MomentPicker

A datepicker based on Moment.js and jQuery

You can change the default language (english) and even make it RTL (with some css).

How to use

The proper way to get it is through bower bower install MomentPicker, but you can also clone this project or even download the minified version from the dist folder.

After grabbing it, include the css (the one included here or your own) and the js (jQuery, Moment.js and MomentPicker).

To instantiate just apply it to any div wrapped in jQuery, like:

$(function() {
    $('#picker').MomentPicker();
});

Options

You can easily configure it by passing a plain js object to the constructor.

$(function() {
    $('#picker').MomentPicker({
        date : moment(),
        min  : moment().subtract('d', 10),
        max  : moment().add('y', 1),
        level: 0,
        style: {
            selected: 'selected',
            current : 'current'
        }
    });
});

date

The current date, to start with an already selected date. You should use (and expect to receive) Moment.js instances for all the dates.

min

The minimum date allowed to be selected. It can be a date or a function returning dates that will be called everytime MomentPicker needs to render dates or validate a date.

max

The maximum date allowed to be selected. It can be a date or a function returning dates that will be called everytime MomentPicker needs to render dates or validate a date.

level

An integer value to determine the possible ways to pick a date, starting from picking the year (level 0), the month (level 1) or only the date itself, like a regular datepicker (level 2).

style

Lets you change the css class names applied to selected dates (year, month and date depending on the level) and to the current date (current date is today).

API

You can grab an instance of the API from an already applied MomentPicker using jQuery's data:

var api = $('#picker').data('MomentPicker');

from the plugin itself (on an already applied jQuery object):

// picker is a jQuery object!
var picker = $('#picker').MomentPicker();

// api is the MomentPicker API
var api = picker.MomentPicker();

or from any event object received as the first argument on every listener callback:

var picker = $('#picker').MomentPicker();

picker.on('render', function(event) {

    console.log(event.api);
});

val

Gets/sets the selected date.

next

Shows the next group of years, months or the next month (depending on which level you are).

prev

Shows the previous group of years, months or the next month (depending on which level you are).

min

Gets/sets the minimum allowed date.

max

Gets/sets the maximum allowed date.

renderYears

Renders the year's level (a group of years, level 0).

renderMonths

Renders the month's level (a group of months, level 1).

renderDays

Renders the days's level (just a month, level 2).

Events

Events are a great way to interact with the plugin and add some custom funcionality in a decoupled way, like including some extra information and attaching some behaviours to date links.

MomentPicker uses the jQuery's trigger method to emit its events through the DOM. The context of every callback (this) will be the jQuery's picker instance and you can grab the api from the event object received as explained above.

For example, if you need to add some text to a date, exclude it from being selected or add some specific css class to it, just try this:

var picker = $('#picker').MomentPicker();

picker.on('renderDays', function(event) {

    picker
        .find('[data-day^="1-5"]')
        .replaceWith('<a href="http://en.wikipedia.org/wiki/International_Workers%27_Day">International Workers' Day</a>');
});

pick

Fired after a date is selected or setted through the API.

renderYears

Fired after the level 0 gets rendered.

renderMonths

Fired after the level 1 gets rendered.

renderDays

Fired after the level 2 gets rendered.

render

Fired after everything gets rendered.

showPrev

Fired after the current viewed group of years/group of months/month is changed for the previous one.

showNext

Fired after the current viewed group of years/group of months/month is changed for the next one.

ready

Fired after the plugin is fully instantiated.

Styling

The style is done with css, so you can craft your own just taking a look to the more than simple plugin markup or modifying the one included here.