Moment Datepicker

The best bootstrap datepicker!

Original code from Stefan Petre. I also took things from Andrew Rowls and Aymeric Kodono.

Moment Datepicker is ready to work with Knockout, TypeScript and NuGet. It uses Moment.js to parse dates and to localize the literals, and Twitter-Bootstrap (2 or 3) to ensure a nice appearance.

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 date Change End date Change
2015-01-20 2015-01-25

Using moment-datepicker.js

Call the datepicker via javascript:

$('.datepicker').datepicker()

Don't forget to include the datepicker.css stylesheet.

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-group date" id="dp3" data-date="12-02-2015" data-datepicker-format="dd-mm-yyyy">
    <input class="form-control" size="16" type="text" value="12-02-2015">
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></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()){
            ....
        }
    });

Using with Bootstrap 2

You can use Moment Datepicker with Bootstrap 2 by including only the datepicker2.css stylesheet.

Also, the markup for the component will vary a little:

<div class="input-append date" id="dp3" data-date="12-02-2015" data-datepicker-format="dd-mm-yyyy">
    <input class="col-md-2" size="16" type="text" value="12-02-2015">
    <span class="input-group-addon"><i class=".glyphicon .glyphicon-th"></i></span>
</div>