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 : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
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
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 : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
weekdays : ['日曜日', '月曜日','火曜日', '水曜日', '木曜日','金曜日','土曜日'],
weekdaysShort : ['日', '月','火', '水', '木','金','土']
}
});
Authors
Pikaday