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

JavaScript 日期选择器 Pikaday

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

 67034  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移动端日期选择插件jquery-date

 此插件依赖jQuery，且是为移动端而写，也支持pc端的使用，但因为操作不便和样式问题，所以不建议。
  日期和时间
 29939  307

一款精简实用的时间轴插件一timeline

 一款精简实用的时间轴插件
  日期和时间
 50206  334

jquery获取一年后的日期（原创）

 利用jeDate插件 当选中一个时间之后 自动生成一个为期一年的时间
  日期和时间
 29335  201

jQuery仿苹果手机秒表计时器特效

 jQuery仿苹果手机秒表计时器特效是一款支持计次复位的苹果秒表计时器代码
  日期和时间
 30398  326

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