Datepicker Template

boiler plate with jquery and jquery ui

by ismett

HTML

<label>From:</label>
<input type="text" id="from" placeholder="From"/>
<label>To:</label>
<input type="text" id="to" placeholder="To">

CSS

.activated{
  background: yellow;
}

JavaScript

$("#from").datepicker({
  changeMonth: true,
  numberOfMonths: 2,
  beforeShow: function(el){
        $(el).val($.datepicker.formatDate('dd-mm-yy', new Date()));
           $(this).addClass("activated");
          },
  onClose: function(selectedDate) {
    $("#to").datepicker("option", "minDate", selectedDate);
    $("#to").datepicker("show");
     $(this).removeClass("activated");
  }
});
$("#to").datepicker({
  changeMonth: true,
  numberOfMonths: 2,
  beforeShow: function(el){
        $(el).val($.datepicker.formatDate('dd-mm-yy', new Date()));
           $(this).addClass("activated");
          },
  onClose: function(selectedDate) {
    $("#from").datepicker("option", "maxDate", selectedDate);
     $(this).removeClass("activated");
  }
});