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

Denis

发布于 2023-04-15 11:20:16

1.2K0

发布于 2023-04-15 11:20:16

文章被收录于专栏：WordPress果酱WordPress果酱

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

界面不支持中文。
选择日期格式只能是 Tue Sep 03 2013 这样的格式。

下面就讲解下如何解决这两个问题：

1. 首先同样创建如下的输入框：

<input type="text" id="datepicker">

2. 调用时间格式化和本地化 JavaScript 库：Momnet.js：

<script src="http://cdn.staticfile.org/moment.js/2.2.1/moment.min.js"></script>

3. 在页脚加载 Pikaday 的 Javascript 库和 CSS 文件：

<link rel="stylesheet" href="http://dbushell.github.com/Pikaday/css/pikaday.css">
<script src="http://dbushell.github.com/Pikaday/pikaday.js"></script>

4. 调用和格式化 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>

5. 最后效果：

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

下载：Pikaday

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript