Pikadaytime

Examples

Simple date picker

Using default options. No initial date.

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

Default datetime picker

Initial date. Position:right

var picker = new Pikaday({
    field          : document.getElementById("picker"),
    defaultDate    : new Date(),
    setDefaultDate : true,
    showTime       : true,
    position       : 'top right'
});

Russian localization

Minutes step is 10

var picker = new Pikaday({
    field          : document.getElementById("picker"),
    defaultDate    : new Date(),
    setDefaultDate : true,
    showTime       : true,
    minutesStep    : 10,
    firstDay       : 1,
    i18n           : {
        previousMonth : 'Предыдущий месяц',
        nextMonth     : 'Следующий месяц',
        months        : ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
        weekdays      : ['Воскресенье', 'Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
        weekdaysShort : ['Вс','Пн','Вт','Ср','Чт','Пт','Сб']
    }
});

Min datetime and max datetime

Show week number. Japanese localization

var picker = new Pikaday({
    field          : document.getElementById("picker"),
    defaultDate    : new Date(),
    setDefaultDate : true,
    showTime       : true,
    firstDay       : 1,
    showWeekNumber : true,
    minDate        : new Date('2012-07-07 12:00'),
    maxDate        : new Date('2016-06-12 15:00'),
    i18n           : {
        previousMonth : '先月',
        nextMonth     : '来月',
        months        : ['１月','２月','３月','４月','５月','６月','７月','８月','９月','１０月','１１月','１２月'],
        weekdays      : ['日曜日', '月曜日','火曜日',　'水曜日', '木曜日','金曜日','土曜日'],
        weekdaysShort : ['日', '月','火',　'水', '木','金','土']
    }
});

12 hours format

Seconds selector

var picker = new Pikaday({
    field          : document.getElementById("picker"),
    defaultDate    : new Date(),
    setDefaultDate : true,
    showTime       : true,
    splitTimeView  : false,
    showSeconds    : true,
    hours24format  : false
});

Events handlers

See output in console

var picker = new Pikaday({
    field          : document.getElementById("picker"),
    defaultDate    : new Date(),
    setDefaultDate : true,
    showTime       : true,
    onSelect : function(date) {
        console.log('onSelect', date, this);
    },
    onOpen : function() {
        console.log('onOpen', this);
    },
    onClose : function() {
        console.log('onClose', this);
    },
    onDraw : function() {
        console.log('onDraw', this);
    }

});

Manual instalation

<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/pikaday.css">

<script src="javascripts/pikaday.js"></script>

<script>
    var picker = new Pikadatime({
        field : document.getElementById('picker'),
        ...... //other options
    });
</script>

Instalation using bower

bower install pikadaytime

Datepicker options and methods

See on Pikaday github page

Timepicker options

showTime : [Boolean] show time picker. (default false) hours24format : [Boolean] use 24 or 12 hours format. (default true (24 format)) showSeconds : [Boolean] show seconds picker. (default false) minutesStep : [Number] Show every n minutes. (default 1) secondsStep : [Number] Show every n seconds. (default 1) splitTimeView : [Boolean] Show one time selector with splited hours and minutes. Only 24 hours format. (default true)

Internationalization

You can setup i18n globaly.

Pikaday.prototype.i18n = {
    previousMonth : 'Предыдущий месяц',
    nextMonth     : 'Следующий месяц',
    months        : ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
    weekdays      : ['Воскресенье', 'Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
    weekdaysShort : ['Вс','Пн','Вт','Ср','Чт','Пт','Сб']
}

Or pass i18n in picker constructor

var picker = new Pikaday({
    field : document.getElementById('picker'),
    .....
    i18n : {
        previousMonth : '先月',
        nextMonth     : '来月',
        months        : ['１月','２月','３月','４月','５月','６月','７月','８月','９月','１０月','１１月','１２月'],
        weekdays      : ['日曜日', '月曜日','火曜日',　'水曜日', '木曜日','金曜日','土曜日'],
        weekdaysShort : ['日', '月','火',　'水', '木','金','土']
    }
});

Authors

Pikaday

• David Bushell
• Ramiro Rikkert GitHub

• Dmitry (dio) Levashov