JQuery UI: Datepicker

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");
});

.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>

Leave a Reply Cancel reply