A datepicker based on Moment.js and jQuery
You can change the default language (english) and even make it RTL (with some css).
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();
});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'
}
});
});The current date, to start with an already selected date. You should use (and expect to receive) Moment.js instances for all the dates.
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.
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.
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).
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).
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);
});Gets/sets the selected date.
Shows the next group of years, months or the next month (depending on which level you are).
Shows the previous group of years, months or the next month (depending on which level you are).
Gets/sets the minimum allowed date.
Gets/sets the maximum allowed date.
Renders the year's level (a group of years, level 0).
Renders the month's level (a group of months, level 1).
Renders the days's level (just a month, level 2).
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>');
});Fired after a date is selected or setted through the API.
Fired after the level 0 gets rendered.
Fired after the level 1 gets rendered.
Fired after the level 2 gets rendered.
Fired after everything gets rendered.
Fired after the current viewed group of years/group of months/month is changed for the previous one.
Fired after the current viewed group of years/group of months/month is changed for the next one.
Fired after the plugin is fully instantiated.
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.