JavaScript 日期选择器 Pikaday

所属分类:输入-日期和时间

 66301  312  查看评论 (15)
分享到微信朋友圈
X
JavaScript 日期选择器 Pikaday ie兼容8

Pikaday 的简单使用

1. 首先创建如下的输入框:

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

2. 在页脚加载 Pikaday 的 Javascript 库和 CSS 文件,并调用 Pikaday:

<link rel="stylesheet" href="http://dbushell.github.com/Pikaday/css/pikaday.css">
<script src="http://dbushell.github.com/Pikaday/pikaday.js"></script>
<script>
    var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>

如果网页已经加载了 jQuery 库,其中调用代码可以改成下面更简洁的方式:

var picker = new Pikaday({ field: $('#datepicker')[0] });

以上2步就完成了简单的 Pikaday 的使用。

格式化 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>


相关插件-日期和时间

jquery ui酒店预订日历选择器控件代码

jquery ui酒店预订日历选择器控件代码
  日期和时间
 58350  422

移动端日期滚动选择插件mobisscroll3.0完整版

mobiscroll是个很好用的jQuery日期插件,它可以实现在移动端滚动选择日期。
  日期和时间
 45820  395

漂亮的倒计时

漂亮的倒计时,带反转效果。
  日期和时间
 42202  328

时间插件lhgcalendar

lhgcalendar是一功能强大的简单迷你并且高效的弹出日历组件,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+.
  日期和时间
 50392  355

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    咖啡馆? 0
    2017/9/19 10:49:55

    为啥我格式化不了?

    回复
    chenkaixia 0
    2017/8/23 10:50:09

    IE8下,div有滚动条,滚动后,定位不正确的问题。

    回复
    MrCanJu 0
    2017/6/12 10:46:41

    怎么设置当前日期之后的无法选择   跪求

    回复
    小白前端成长史 0
    2017/4/18 23:33:08
    这个导入motent.js后默认样式就是YYYY-MM-DD 使用作者的方法,改不了样式,有解决的么,谢谢 回复
    咔咔 0
    2016/12/1 10:12:45
    这个支持“”分秒" 吗 回复
    苦涩の咖啡 0
    2016/10/25 11:10:08
    紫雪璇宇 0
    2016/8/2 14:08:09
    Pikaday可以多选日期吗,选择的日期用逗号隔开 回复
    riveryu 0
    2016/6/21 10:06:33
    选择日期后怎么格式化??选择出来是这样的 》》》》  Thu Jun 09 2016,我需要2016/06/09
        yanghc0
        2016/8/23 14:08:11
        需要饮用moment.js
        侦是、谁的谁0
        2016/10/10 14:10:07
        他这个只有methods.js和module.js,并且引用了没用啊
    回复
    admade 0
    2016/6/6 20:06:08
    怎么改中文?
        microsoftvs2
        2016/6/6 21:06:37

        pikaday.js中下面的自己修改

        previousMonth : 'Previous Month',
        nextMonth     : 'Next Month',
        months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
        weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
        weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
        Lemon Tree0
        2016/7/21 11:07:11
        修改后 ,最有input里显示还是英文的。不知道哪里改。麻烦看到了回答下。
        夜雨幽兰洁0
        2016/7/25 14:07:33
        我遇到了同样的问题,不知道怎样解决
        侦是、谁的谁0
        2016/10/10 14:10:28
        同求,请问解决了吗
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复