Pickers

The date and color picker 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.

Display Inline

Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.

$('#datepicker1').datepicker();

Dates In Other Months

The datepicker can show dates that come from other than the main month being displayed. These other dates can also be made selectable.

$('#datepicker2').datepicker({
  showOtherMonths: true,
  selectOtherMonths: true
});

Month and Year Menus

Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.

$('#datepicker3').datepicker({
  showOtherMonths: true,
  selectOtherMonths: true,
  changeMonth: true,
  changeYear: true
});

Basic Functionality

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.

$('#datepicker4').datepicker();

Display Button Bar

Display a button for selecting Today's date and a Done button for closing the calendar.

$('#datepicker5').datepicker({
  showButtonPanel: true
});

Multiple Months

Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.

$('#datepicker6').datepicker({
  numberOfMonths: 2
});

Date Range

Select the date range to search for.

var dateFormat = 'mm/dd/yy',
from = $('#dateFrom')
.datepicker({
  defaultDate: '+1w',
  numberOfMonths: 2
})
.on('change', function() {
  to.datepicker('option','minDate', getDate( this ) );
}),
to = $('#dateTo').datepicker({
  defaultDate: '+1w',
  numberOfMonths: 2
})
.on('change', function() {
  from.datepicker('option','maxDate', getDate( this ) );
});

function getDate( element ) {
  var date;
  try {
    date = $.datepicker.parseDate( dateFormat, element.value );
  } catch( error ) {
    date = null;
  }

  return date;
}

Colorpicker

A simple component to select color in the same way you select color in Adobe Photoshop.

$('#colorpicker').spectrum({
  color: '#17A2B8'
});

You can allow alpha transparency selection. Check out these example.

$('#showAlpha').spectrum({
  color: 'rgba(23,162,184,0.5)',
  showAlpha: true
});

Show pallete only. If you'd like, spectrum can show the palettes you specify, and nothing else.

$('#showPaletteOnly').spectrum({
    showPaletteOnly: true,
    showPalette:true,
    color: '#DC3545',
    palette: [
      ['#1D2939', '#fff', '#0866C6','#23BF08', '#F49917'],
      ['#DC3545', '#17A2B8', '#6610F2', '#fa1e81', '#72e7a6']
    ]
});