jQuery ui Date Picker from to date range
JS Script
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
CSS style sheet
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet">
HTML
From Date: <input type = "text" id = "from">
To Date: <input type = "text" id = "to">
<script>
jQuery(document).ready(function(){
function customRange(input) {
if (input.id == 'to') {
var minDate = new Date($('#from').val());
var maxDate = new Date($('#from').val());
minDate.setDate(minDate.getDate());
maxDate.setDate(maxDate.getDate()+30);
return { minDate: minDate, maxDate: maxDate };
} else {
jQuery("#to").val('');
return { }
}
}
$("#from, #to").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
yearRange: '2016:+0',
beforeShow: customRange,
});
});
</script>
Another example
Comments
Post a Comment