bswift Styleguide: Datepicker

Standard: with Month and Year Dropdowns

This is the default jQuery UI datepicker with dropdowns for month and year, combined with the placeholder attribute. Just add class="datepicker" to the input; a unique ID will be added dynamically to allow multiple instances. (Documentation)

Date

HTML

<input type="text" class="datepicker" placeholder="mm/dd/yyyy">

JS

$( ".datepicker" ).datepicker({
  changeMonth: true,
  changeYear: true
});

Birthdate

This is the default jQuery UI datepicker with dropdowns for month and year, with a year range set for birthdates, combined with the placeholder attribute. Just add class="datepicker" to the input; a unique ID will be added dynamically to allow multiple instances. (Documentation)

Date of Birth

HTML

<input type="text" class="datepick-birthdate" placeholder="mm/dd/yyyy">

JS

$(".datepick-birthdate").datepicker({
  dateFormat: 'mm/dd/yy',
  changeMonth: true,
  changeYear: true,
  yearRange: '-100y:c+nn',
  maxDate: '-1d'
});

Birthdate 18+

This datepicker is built using datepicker-birthday, however, it only shows dates 18 years in the past. Ideal for forms that restrict users who are 18 and older. (Documentation)

Date of Birth

HTML

<input type="text" class="datepicker-birthday-18" placeholder="mm/dd/yyyy">

JS

$(function () {
  $(".datepicker-birthday-18").datepicker({
    dateFormat: 'mm/dd/yy',
    changeMonth: true,
    changeYear: true,
    yearRange: '-100y:-18y',
    maxDate: '-1d',
    defaultDate: '-18y'
  });
});

Date Range

This is the default jQuery UI datepicker with dropdowns for month and year, with a year range set for birthdates, combined with the placeholder attribute. Just add class="datepicker" to the input; a unique ID will be added dynamically to allow multiple instances. (Documentation)

From to

HTML

<label for="from"> From</label>
<input type="text" id="from" name="from" />
<label for="to"> to</label>
<input type="text" id="to" name="to" />

JS

$(function() {
  $( "#from" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    onSelect: function( selectedDate ) {
      $( "#to" ).datepicker( "option", "minDate", selectedDate );
    }
  });
  $( "#to" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    onSelect: function( selectedDate ) {
      $( "#from" ).datepicker( "option", "maxDate", selectedDate );
    }
  });
});