码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript 日期选择器 Pikaday

时间:2016-12-30 20:27:58      阅读:581      评论:0      收藏:0      [点我收藏+]

标签:this   exp   使用步骤   ada   技术   closed   max   tor   结合   

找一些插件的过程实在太痛苦了。。。好容易找到一个,赶紧记录下。免得以后重复浪费时间在这上面。

 

插件名:Pikaday

github地址https://github.com/dbushell/Pikaday

效果图技术分享

使用步骤

1、写个html元素

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

2、引入js、css文件

技术分享
<link rel="stylesheet" href="....../pikaday.css">
//moment.js另外下载,用于格式化日期
<script src="....../moment.js"></script>
<script src="....../pikaday.js"></script>
View Code

3、初始化,并设置

技术分享
<script type="text/javascript">
$(document).ready(function() {
    var i18n = { // 本地化
        previousMonth: 上个月,
        nextMonth: 下个月,
        months: [一月, 二月, 三月, 四月, 五月, 六月, 七月, 八月, 九月, 十月, 十一月, 十二月],
        weekdays: [周日, 周一, 周二, 周三, 周四, 周五, 周六],
        weekdaysShort: [, , , , , , ]
    }
    var picker = new Pikaday(
                    {
                        field: document.getElementById(datepicker),
                        firstDay: 1,
                        minDate: new Date(2000, 0, 1),
                        maxDate: new Date(2220, 12, 31),
                        yearRange: [2000,2220],
                        i18n: i18n,
                        onSelect: function() {
                            var date = document.createTextNode(this.getMoment().format(Do MMMM YYYY) +  );
                            document.getElementById(selected).appendChild(date);
                        }
                    });
}); 
</script>
View Code

 

最后

结合bootstrap,效果为

技术分享

 

注意:格式化日期得使用到 Moment.js  ,故得另外下载,否则无法正确格式化

 

JavaScript 日期选择器 Pikaday

标签:this   exp   使用步骤   ada   技术   closed   max   tor   结合   

原文地址:http://www.cnblogs.com/shenxinpeter/p/6237930.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!