Home

Awesome

Pikadaytime

A refreshing JavaScript Datetimepicker

Pikadaytime

see also:

Production ready? Since version 1.0.0 Pikaday is stable and used in production. If you do however find bugs or have feature requests please submit them to the GitHub issue tracker.
Also see the changelog

Usage

Pikaday can be bound to an input field:

<input type="text" id="datepicker">

Add the JavaScript to the end of your document:

<script src="pikaday.js"></script>
<script>
    var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>

If you're using jQuery make sure to pass only the first element:

var picker = new Pikaday({ field: $('#datepicker')[0] });

If the Pikaday instance is not bound to a field you can append the element anywhere:

var field = document.getElementById('datepicker');
var picker = new Pikaday({
    onSelect: function(date) {
        field.value = picker.toString();
    }
});
field.parentNode.insertBefore(picker.el, field.nextSibling);

For advanced formatting load Moment.js prior to Pikaday:
See the moment.js example for a full version.

<input type="text" id="datepicker" value="9 Oct 2014">

<script src="moment.js"></script>
<script src="pikaday.js"></script>
<script>
    var picker = new Pikaday({
        field: document.getElementById('datepicker'),
        format: 'D MMM YYYY',
        onSelect: function() {
            console.log(this.getMoment().format('Do MMMM YYYY'));
        }
    });
</script>

Configuration

As the examples demonstrate above Pikaday has many useful options:

jQuery Plugin

The normal version of Pikaday does not require jQuery, however there is a jQuery plugin if that floats your boat (see plugins/pikaday.jquery.js in the repository). This version requires jQuery, naturally, and can be used like other plugins:
See the jQuery example for a full version.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="pikaday.js"></script>
<script src="plugins/pikaday.jquery.js"></script>
<script>

// activate datepickers for all elements with a class of `datepicker`
$('.datepicker').pikaday({ firstDay: 1 });

// chain a few methods for the first datepicker, jQuery style!
$('.datepicker').eq(0).pikaday('show').pikaday('gotoYear', 2042);

</script>

AMD support

If you use a modular script loader than Pikaday is not bound to the global object and will fit nicely in your build process. You can require Pikaday just like any other module.
See the AMD example for a full version.

require(['pikaday'], function(Pikaday) {
    var picker = new Pikaday({ field: document.getElementById('datepicker') });
});

The same applies for the jQuery plugin mentioned above.
See the jQuery AMD example for a full version.

require(['jquery', 'pikaday.jquery'], function($) {
    $('#datepicker').pikaday();
});

CommonJS module support

If you use a CommonJS compatible environment you can use the require function to import Pikaday.

var pikaday = require('pikaday');

When you bundle all your required modules with Browserify and you don't use Moment.js specify the ignore option:

browserify main.js -o bundle.js -i moment

Ruby on Rails

If you're using Ruby on Rails, make sure to check out the Pikaday gem.

Methods

You can control the date picker after creation:

var picker = new Pikaday({ field: document.getElementById('datepicker') });

Get and set date

picker.toString('YYYY-MM-DD')

Returns the selected date in a string format. If Moment.js exists (recommended) then Pikaday can return any format that Moment understands, otherwise you're stuck with JavaScript's default.

picker.getDate()

Returns a basic JavaScript Date object of the selected day, or null if no selection.

picker.setDate('2015-01-01')

Set the current selection. This will be restricted within the bounds of minDate and maxDate options if they're specified. You can optionally pass a boolean as the second parameter to prevent triggering of the onSelect callback (true), allowing the date to be set silently.

picker.getMoment()

Returns a Moment.js object for the selected date (Moment must be loaded before Pikaday).

picker.setMoment(moment('14th February 2014', 'DDo MMMM YYYY'))

Set the current selection with a Moment.js object (see setDate for details).

Change current view

picker.gotoDate(new Date(2014, 1))

Change the current view to see a specific date. This example will jump to February 2014 (month is a zero-based index).

picker.gotoToday()

Shortcut for picker.gotoDate(new Date())

picker.gotoMonth(2)

Change the current view by month (0: January, 1: Februrary, etc).

picker.nextMonth() picker.prevMonth()

Go to the next or previous month (this will change year if necessary).

picker.gotoYear()

Change the year being viewed.

picker.setMinDate()

Update the minimum/earliest date that can be selected.

picker.setMaxDate()

Update the maximum/latest date that can be selected.

picker.setStartRange()

Update the range start date. For using two Pikaday instances to select a date range.

picker.setEndRange()

Update the range end date. For using two Pikaday instances to select a date range.

Show and hide datepicker

picker.isVisible()

Returns true or false.

picker.show()

Make the picker visible.

picker.adjustPosition()

Recalculate and change the position of the picker.

picker.hide()

Hide the picker making it invisible.

picker.destroy()

Hide the picker and remove all event listeners — no going back!

Internationalization

The default i18n configuration format looks like this:

i18n: {
    previousMonth : 'Previous Month',
    nextMonth     : 'Next Month',
    months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
    weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
    weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
}

You must provide 12 months and 7 weekdays (with abbreviations). Always specify weekdays in this order with Sunday first. You can change the firstDay option to reorder if necessary (0: Sunday, 1: Monday, etc). You can also set isRTL to true for languages that are read right-to-left.

Browser Compatibility

browser compatibility

Authors

Thanks to @shoogledesigns for the name.

Copyright © 2014 David Bushell | BSD & MIT license