About

Add datepicker picker to field or to any other element.

  • can be used as a component
  • formats: dd, d, mm, m, yyyy, yy
  • separators: -, /, .

Example

Attached to a field with the format specified via options.

Attachet to a field with the format specified via data tag.

As component.

Start with years viewMode.

Limit the view mode to months

Attached to other elment then field and using events to work with the date values.

Oh snap!
Start dateChange End dateChange
2012-02-20 2012-02-25

Disabling dates in the past and dependent disabling.

Check in: Check out:

Using datepicker.js

Call the datepicker via javascript:

Options

Name type default description
format string 'mm/dd/yyyy' the date format, combination of d, dd, m, mm, yy, yyy.
weekStart integer 0 day of the week start. 0 for Sunday - 6 for Saturday
viewMode string|integer 0 = 'days' set the start view mode. Accepts: 'days', 'months', 'years', 0 for days, 1 for months and 2 for years
minViewMode string|integer 0 = 'days' set a limit for view mode. Accepts: 'days', 'months', 'years', 0 for days, 1 for months and 2 for years

Markup

Methods

.datepicker(options)

Initializes an datepicker.

.datepicker('show')

Show the datepicker.

.datepicker('hide')

Hide the datepicker.

.datepicker('place')

Updates the date picker's position relative to the element

.datepicker('setValue', value)

Set a new value for the datepicker. It cand be a string in the specified format or a Date object.

Events

Datepicker class exposes a few events for manipulating the dates.

Event Description
show This event fires immediately when the date picker is displayed.
hide This event is fired immediately when the date picker is hidden.
changeDate This event is fired when the date is changed.
onRender This event is fired when a day is rendered inside the datepicker. Should return a string. Return 'disabled' to disable the day from being selected.