JavaScript 日期选择器 Pikaday 的高级用法

我前面介绍了轻量级的 JavaScript 日期选择器 Pikaday 和其简单的用法,但是在使用当中发现有几个限制:

  1. 界面不支持中文。
  2. 选择日期格式只能是 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. 最后效果:

RSS用户请点击这里参看演示

下载:Pikaday


©我爱水煮鱼,本站推荐使用的主机:阿里云,国外主机建议使用BlueHost

本站长期承接 WordPress 优化建站业务,请联系微信:「chenduopapa」。