Datepicker datepicker.js

The datepicker() control provides the user with the ability to choose a date from a highly customizable calender. Datepicker also offers many methods that allow you to programmatically manipulate it.

Usage

Via JavaScript

Initialize the datepicker() via JavaScript (accepting default options):

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

Initialize the datepicker() via JavaScript specifying your own options:

$('#myDatepicker').datepicker({
  allowPastDates: true
});

Via data-attributes

• Datepicker controls that exist when $().ready() executes that have data-initialize="datepicker" on them will be initialized immediately
• Datepicker controls that are created with data-initialize="datepicker" after $.ready() executes will initialize when a mousedown event occurs on them.

Markup

The datepicker() markup is complex and specific. On initialization, the datepicker() plugin searches inside of the specified element for the components used to build the control. For your convenience, we have written the required markup for you. Writing custom datepicker() markup is not recommended; if you choose to do so, understanding the datepicker.js code will be necessary.

<div class="input-group">
  <input class="form-control" id="myDatepickerInput" type="text"/>
  <div class="input-group-btn">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
      <span class="glyphicon glyphicon-calendar"></span>
      <span class="sr-only">Toggle Calendar</span>
    </button>
    <div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
      <div class="datepicker-calendar">
        <div class="datepicker-calendar-header">
          <button class="prev" type="button"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span></button>
          <button class="next" type="button"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span></button>
          <button class="title" type="button">
              <span class="month">
                <span data-month="0">January</span>
                <span data-month="1">February</span>
                <span data-month="2">March</span>
                <span data-month="3">April</span>
                <span data-month="4">May</span>
                <span data-month="5">June</span>
                <span data-month="6">July</span>
                <span data-month="7">August</span>
                <span data-month="8">September</span>
                <span data-month="9">October</span>
                <span data-month="10">November</span>
                <span data-month="11">December</span>
              </span> <span class="year"></span>
          </button>
        </div>
        <table class="datepicker-calendar-days">
          <thead>
          <tr>
            <th>Su</th>
            <th>Mo</th>
            <th>Tu</th>
            <th>We</th>
            <th>Th</th>
            <th>Fr</th>
            <th>Sa</th>
          </tr>
          </thead>
          <tbody></tbody>
        </table>
        <div class="datepicker-calendar-footer">
          <button class="datepicker-today" type="button">Today</button>
        </div>
      </div>
      <div class="datepicker-wheels" aria-hidden="true">
        <div class="datepicker-wheels-month">
          <h2 class="header">Month</h2>
          <ul>
            <li data-month="0"><button type="button">Jan</button></li>
            <li data-month="1"><button type="button">Feb</button></li>
            <li data-month="2"><button type="button">Mar</button></li>
            <li data-month="3"><button type="button">Apr</button></li>
            <li data-month="4"><button type="button">May</button></li>
            <li data-month="5"><button type="button">Jun</button></li>
            <li data-month="6"><button type="button">Jul</button></li>
            <li data-month="7"><button type="button">Aug</button></li>
            <li data-month="8"><button type="button">Sep</button></li>
            <li data-month="9"><button type="button">Oct</button></li>
            <li data-month="10"><button type="button">Nov</button></li>
            <li data-month="11"><button type="button">Dec</button></li>
          </ul>
        </div>
        <div class="datepicker-wheels-year">
          <h2 class="header">Year</h2>
          <ul></ul>
        </div>
        <div class="datepicker-wheels-footer clearfix">
          <button class="btn datepicker-wheels-back" type="button"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span></button>
          <button class="btn datepicker-wheels-select" type="button">Select <span class="sr-only">Month and Year</span></button>
        </div>
      </div>
    </div>
  </div>
</div>

Options

If initializing through JavaScript, datepicker() allows you to specify options.

Date Parsing and MomentJS

MomentJS parsing is the same format for the API as the output within the input element. Datepicker's default MomentJS locale is regionalistic (American). If you are using MomentJS (and it is recommended that you do), option strings such as those within restricted date ranges expect the format that you provide within momentConfig. Locales and formats are available in the MomentJS documentation. The default locale configuration is momentConfig: { culture: 'en', format: 'L' }

Therefore if you do not specify your own locale and format, restricted will be expecting an array of objects of the'MM/DD/YYYY' format--that is the 'L' MomentJS format. An example of this would be restricted: [{ from: '08/10/2014', to: '08/15/2014' }]

Methods

.datepicker('destroy')

Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.

.datepicker('disable')

Ensures the component is disabled

.datepicker('enable')

Ensures the component is enabled

.datepicker('getDate')

Returns the selected date (not formatted)

.datepicker('getFormattedDate')

Returns the selected formatted date

.datepicker('setDate')

Sets datepicker() to date provided. Date provided must be a valid Date object or date string.

$('#myDatepicker').datepicker('setDate', new Date());

.datepicker('getCulture')

Returns the culture the datepicker() is currently using. Only available using moment.js with langs

.datepicker('setCulture')

Updates the culture the datepicker() uses. Only available using moment.js with langs

$('#myDatepicker').datepicker('setCulture', 'fr');

.datepicker('getFormat')

Returns the format the datepicker() is currently using. Only available using moment.js with langs

.datepicker('setFormat')

Updates the format the datepicker() uses. Only available using moment.js with langs

$('#myDatepicker').datepicker('setFormat', 'L');

Events

All datepicker() events are fired on the .datepicker classed element.

$('#myDatepicker').on('changed.fu.datepicker', function (evt, date) {
  // do something…
});

To listen for changes on the Date() object, you will need to combine two listeners (as shown below). The reason for this is to keep double events firing when a date is clicked (previously when a date was clicked dateClicked and changed would both fire, which was confusing to many people.

$('#myDatepicker').on('changed.fu.datepicker dateClicked.fu.datepicker', function (evt, date) {
  // do something…
});

To listen for all changes to the datepicker's input value, including setting the date to invalid values, you will need to combine two listeners:

$('#myDatepicker').on('change dateClicked.fu.datepicker', function (evt, date) {
  // do something…
});

Examples

Choose a date from a calendar dropdown, with input parsing and formatting. Works with moment.js for extended functionality.

To support various date formats around the world, datepicker() has an optional dependency on moment.js. Download moment.js (with locales).