Moment Datepicker

Example

Attached to a field with the format specified via options.

Using KnockOut.js ISO-8601 binding.

Using KnockOut.js Format binding.

Using KnockOut.js Start and End date binding.

Using KnockOut.js Date binding.

Using KnockOut.js Moment binding.

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

As component.

As component expanding to the left.

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.

Start dateChange	End dateChange
2012-02-20	2012-02-25

Using bootstrap-datepicker.js

Call the datepicker via javascript:

$('.datepicker').datepicker()

Options

Name	type	default	description
format	string	'MM/DD/YYYY'	the date format, see details....
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
autoHide	boolean	true	Close the datepicker when an element is selected
calendarPlacement	string	'right'\|'left'	Decide the dropdown direction for the calendar

Markup

Format a component.

<div class="input-append date" id="dp3" data-date="12-02-2012" data-datepicker-format="dd-mm-yyyy">
    <input class="span2" size="16" type="text" value="12-02-2012">
    <span class="add-on"><i class="icon-th"></i></span>
</div>

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('set', value)

Set a new value for the datepicker. It cand be a string, moment, date, etc.

.datepicker('get')

Returns a clone of current internal moment object

.datepicker('getAsText')

Returns selected date as a formated string

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.

$('#dp5').datepicker()
    .on('changeDate', function(ev){
        if (ev.date.valueOf() < startDate.valueOf()){
        //....
    }
});

Datepicker moment.js