Commit 110b6c53 authored by Madineni Aaslesha's avatar Madineni Aaslesha

Date and Slot picker

parent 227fb018
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<style>
.popover {
left: 40% !important;
}
.btn {
margin: 1%;
}
</style>
</head>
<body>
<div class=" col-md-4">
<div class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
<span class="" id="example-popover-2"></span> </div>
<div id="example-popover-2-content" class="hidden"> </div>
<div id="example-popover-2-title" class="hidden"> </div>
<script>
$('.date-picker-2').popover({
html : true,
content: function() {
return $("#example-popover-2-content").html();
},
title: function() {
return $("#example-popover-2-title").html();
}
});
$(".date-picker-2").datepicker({
onSelect: function(dateText) {
$('#example-popover-2-title').html('<b>Avialable Slots</b>');
var html = '<button class="btn btn-success">07:30 am – 09:00 am</button><br><button class="btn btn-success">09:00 am – 10:00 am</button><br><button class="btn btn-success">10:00 am – 11:00 am</button><br><button class="btn btn-success">11:00 am – 12:00 pm</button><br><button class="btn btn-success">12:00 pm – 01:00 pm</button><br><button class="btn btn-success">01:00 pm – 02:00 pm</button><br><button class="btn btn-success">02:00 pm – 03:00 pm</button><br><button class="btn btn-success">03:00 pm – 04:00 pm</button><br><button class="btn btn-success">04:00 pm – 05:00 pm</button><br>';
$('#example-popover-2-content').html('Avialable Appiontments On <strong>'+dateText+'</strong><br>'+html);
$('.date-picker-2').popover('show');
}
});
</script>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment