
Pikaday 的简单使用
- 首先创建如下的输入框:
<input type="text" id="datepicker">
- 在页脚加载 Pikaday 的 Javascript 库和 CSS 文件,并调用 Pikaday:
<link rel="stylesheet" href="http://dbushell.github.com/Pikaday/css/pikaday.css">
<script src="http://dbushell.github.com/Pikaday/pikaday.js"></script>
<script>
var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>
如果网页已经加载了 jQuery 库,其中调用代码可以改成下面更简洁的方式:
var picker = new Pikaday({ field: $('#datepicker')[0] });
以上2步就完成了简单的 Pikaday 的使用。
格式化 Pikaday
<script type="text/javascript">
$(document).ready(function() {
var i18n = { // 本地化
previousMonth: '上个月',
nextMonth: '下个月',
months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
weekdaysShort: ['日', '一', '二', '三', '四', '五', '六']
}
var datepicker = new Pikaday({
field: jQuery('#datepicker')[0],
minDate: new Date('2000-01-01'),
maxDate: new Date('2020-12-31'),
yearRange: [2000, 2020],
i18n: i18n,
onSelect: function() {
var date = document.createTextNode(this.getMoment().format('YYYY-MM-DD') + ' '); //生成的时间格式化成 2013-09-25
$('#datepicker').appendChild(date);
}
});
}); < /script>