JavaScript 日期选择器 Pikaday 的高级用法
我前面介绍了轻量级的 JavaScript 日期选择器 Pikaday 和其简单的用法,但是在使用当中发现有几个限制:
- 界面不支持中文。
- 选择日期格式只能是 Tue Sep 03 2013 这样的格式。
下面就讲解下如何解决这两个问题:
1. 首先同样创建如下的输入框:
2. 调用时间格式化和本地化 JavaScript 库:Momnet.js:
3. 在页脚加载 Pikaday 的 Javascript 库和 CSS 文件:
4. 调用和格式化 Pikaday
$(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);
}
});
});
5. 最后效果:
下载:Pikaday