DatePicker

DatePicker from FoxRunSoftware

jQuery-based DatePicker with support for date ranges, multiple calendars, easy styling and more.

View project on GitHub Download DatePicker (v1.0.0)

Clean Style Examples

Load the Scripts/Styles

First, load jquery, datepicker, and the base and clean stylesheets.

<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/datepicker/js/datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="/js/datepicker/css/base.css" />
<link rel="stylesheet" type="text/css" href="/js/datepicker/css/clean.css" />

Simple Calendar

A simple inline calendar.

$('#simple-calendar').DatePicker({
  mode: 'single',
  inline: true,
  date: new Date()
});

Multi Calendar

Three calendars, side-by-side, with multiple date selection enabled as well.

$('#multi-calendar').DatePicker({
  mode: 'multiple',
  inline: true,
  calendars: 3,
  date: [new Date(), new Date() - 172800000, new Date() - 345600000]
});

Calendar With Input

A calendar tied to a text input box.

$('#inputDate').DatePicker({
  mode: 'single',
  position: 'right',
  onBeforeShow: function(el){
    if($('#inputDate').val())
      $('#inputDate').DatePickerSetDate($('#inputDate').val(), true);
  },
  onChange: function(date, el) {
    $(el).val((date.getMonth()+1)+'/'+date.getDate()+'/'+date.getFullYear());
    if($('#closeOnSelect input').attr('checked')) {
      $(el).DatePickerHide();
    }
  }
});

Calendar With Custom Widget

A calendar that allows date range selection, tied to a custom widget box.

See the page source for the full widget styling and javascript.

▼ 
var to = new Date();
var from = new Date(to.getTime() - 1000 * 60 * 60 * 24 * 14);

$('#datepicker-calendar').DatePicker({
  inline: true,
  date: [from, to],
  calendars: 3,
  mode: 'range',
  current: new Date(to.getFullYear(), to.getMonth() - 1, 1),
  onChange: function(dates,el) {
    // update the range display
    $('#date-range-field span').text(
      dates[0].getDate()+' '+dates[0].getMonthName(true)+', '+
      dates[0].getFullYear()+' - '+
      dates[1].getDate()+' '+dates[1].getMonthName(true)+', '+
      dates[1].getFullYear());
  }
});