<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Datepicker for Bootstrap, from Twitter</title>
<link href=”css/bootstrap.css” rel=”stylesheet”>
<link href=”css/datepicker.css” rel=”stylesheet”>
<style>
.container {
background: #fff;
}
#alert {
display: none;
}
</style>
<link href=”js/google-code-prettify/prettify.css” rel=”stylesheet”>
<!– Le HTML5 shim, for IE6-8 support of HTML elements –>
<!–[if lt IE 9]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
</head>
<body>
<div>
<p>Attached to other elment then field and using events to work with the date values.</p>
<div>
<div id=”alert”>
<strong>Oh snap!</strong>
</div>
<table>
<thead>
<tr>
<th>Start date<a href=”#” id=”dp4″ data-date-format=”yyyy-mm-dd” data-date=”2012-02-20″>Change</a></th>
<th>End date<a href=”#” id=”dp5″ data-date-format=”yyyy-mm-dd” data-date=”2012-02-25″>Change</a></th>
</tr>
</thead>
<tbody>
<tr>
<td id=”startDate”>2012-02-20</td>
<td id=”endDate”>2012-02-25</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</div>
<script src=”js/google-code-prettify/prettify.js”></script>
<script src=”js/jquery.js”></script>
<script src=”js/bootstrap-datepicker.js”></script>
<script>
$(function(){
window.prettyPrint && prettyPrint();
$(‘#dp1’).datepicker({
format: ‘mm-dd-yyyy’
});
$(‘#dp2’).datepicker();
$(‘#dp3’).datepicker();
$(‘#dp3’).datepicker();
$(‘#dpYears’).datepicker();
$(‘#dpMonths’).datepicker();
var startDate = new Date(2012,1,20);
var endDate = new Date(2012,1,25);
$(‘#dp4’).datepicker()
.on(‘changeDate’, function(ev){
if (ev.date.valueOf() > endDate.valueOf()){
$(‘#alert’).show().find(‘strong’).text(‘The start date can not be greater then the end date’);
} else {
$(‘#alert’).hide();
startDate = new Date(ev.date);
$(‘#startDate’).text($(‘#dp4’).data(‘date’));
}
$(‘#dp4’).datepicker(‘hide’);
});
$(‘#dp5’).datepicker()
.on(‘changeDate’, function(ev){
if (ev.date.valueOf() < startDate.valueOf()){
$(‘#alert’).show().find(‘strong’).text(‘The end date can not be less then the start date’);
} else {
$(‘#alert’).hide();
endDate = new Date(ev.date);
$(‘#endDate’).text($(‘#dp5’).data(‘date’));
}
$(‘#dp5’).datepicker(‘hide’);
});
// disabling dates
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $(‘#dpd1’).datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? ‘disabled’ : ”;
}
}).on(‘changeDate’, function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$(‘#dpd2’)[0].focus();
}).data(‘datepicker’);
var checkout = $(‘#dpd2’).datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? ‘disabled’ : ”;
}
}).on(‘changeDate’, function(ev) {
checkout.hide();
}).data(‘datepicker’);
});
</script>
<script src=”http://www.google-analytics.com/urchin.js” type=”text/javascript”>
</script>
<script type=”text/javascript”>
_uacct = “UA-106117-1”;
urchinTracker();
</script>
</body>
</html>
Note:please download bootstrap and jquery and put in the appropriate css and js folder to work the above code.
This is the out put you will get for the above code.
If you select the second date less than the first it will result in error like the below picture.
Hope this helped to you.
T.mahes's Blog 