首页 > 代码库 > JavaScript 日期选择器 Pikaday
JavaScript 日期选择器 Pikaday
找一些插件的过程实在太痛苦了。。。好容易找到一个,赶紧记录下。免得以后重复浪费时间在这上面。
插件名:Pikaday
github地址:https://github.com/dbushell/Pikaday
效果图:
使用步骤:
1、写个html元素
<input type="text" id="datepicker">
2、引入js、css文件
<link rel="stylesheet" href=http://www.mamicode.com/"....../pikaday.css"> //moment.js另外下载,用于格式化日期 <script src=http://www.mamicode.com/"....../moment.js"></script> <script src=http://www.mamicode.com/"....../pikaday.js"></script>
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>
最后:
结合bootstrap,效果为
注意:格式化日期得使用到 Moment.js ,故得另外下载,否则无法正确格式化
JavaScript 日期选择器 Pikaday
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。