The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.
// Date restriction
var currentTime = new Date();
var hours = currentTime.getHours();
// Date restriction: today may not be selected
var minDate = 'd+1';
// After 12: today and tomorrow may not be selected
if (hours > 12) {
minDate = 'd+2'
}
// Datepicker
$("#date").datepicker({
dateFormat: 'dd-mm-yy',
dayNamesMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
monthNames: ['januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december'],
minDate: minDate
});
// Show datepicker
$('#calendar_icon').click(function() {
$('#date').datepicker("show");
}); |
// Date restriction
var currentTime = new Date();
var hours = currentTime.getHours();
// Date restriction: today may not be selected
var minDate = 'd+1';
// After 12: today and tomorrow may not be selected
if (hours > 12) {
minDate = 'd+2'
}
// Datepicker
$("#date").datepicker({
dateFormat: 'dd-mm-yy',
dayNamesMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
monthNames: ['januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december'],
minDate: minDate
});
// Show datepicker
$('#calendar_icon').click(function() {
$('#date').datepicker("show");
});
.calendar_icon {
float:left;
width:26px;
height:22px;
background-image:url(/images/calendar_icon.jpg);
background-position:0px 0px;
background-repeat:no-repeat;
display:block;
} |
.calendar_icon {
float:left;
width:26px;
height:22px;
background-image:url(/images/calendar_icon.jpg);
background-position:0px 0px;
background-repeat:no-repeat;
display:block;
}
<input id="date" class="date" type="text" name="date" value="" />
<a href="#" title="" id="calendar_icon" class="calendar_icon"></a> |
<input id="date" class="date" type="text" name="date" value="" />
<a href="#" title="" id="calendar_icon" class="calendar_icon"></a>