码迷,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
迷上了代码!