UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

JavaScript 日期选择器 Pikaday

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

 65784  312  查看评论 (15)
分享到微信朋友圈
X
JavaScript 日期选择器 Pikaday ie兼容8
 查看演示  website  立即下载

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双日历插件daterangepicker

 jQuery双日历插件daterangepicker,和之前的所发布的相比，修改了时间格式，设置为中文，提供双日历的选择以及最近7天，30天，60天等便捷选择日期
  日期和时间
 59000  417

jQuery公历农历插件xp

 可选择公历或农历来填写输入框，界面有些简陋但功能是没有问题的。
  日期和时间
 26042  291

简易日期时间插件jQuery Timepicker v1.6.3版

一款汉化后的时间日期插件，可以根据需求自我调整样式
  日期和时间
 37597  339

zepto移动端时间选择插件

 简单的移动端时间选择，去掉年显示，适合线上预定下单
  日期和时间
 52372  383

讨论这个项目（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
        同求，请问解决了吗
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复