JavaScript 日期选择器 Pikaday 的一些总结

最新推荐文章于 2024-05-13 20:03:17 发布

ime33

最新推荐文章于 2024-05-13 20:03:17 发布

阅读量9.5k

点赞数 1

分类专栏：前端组件文章标签： pikaday moment javascript 日期插件多样化组件

本文链接：https://blog.csdn.net/ime33/article/details/53981595

版权

前端组件专栏收录该内容

34 篇文章 1 订阅

订阅专栏

转载请注明出处！

做完一个关于公寓系统后，涉及到了日期选择组件的小东西，在这里抽空整理下，小白在此，前面大牛避让~~~

首先：附上PikaDay的下载地址

废话不多话，直接上干货。

Pikaday是一款超轻量级的javascript日期选择器，并且支持模块化的CSS，可以帮助你更加简单的配置样式。

兼容以下浏览器

IE 7+
Chrome 8+
Firefox 3.5+
Safari 3+
Opera 10.6+

目前虽然处于开发状态，但是看起来已经十分不错了。

和重量级别的jQueryUI 日期选择器相比，Pikaday更轻量级，压缩版本只有5kb。当然，如果你使用jQuery类库的话，同时也提供了jQuery插件，它的未压缩版本的api接口也十分的详尽，有兴趣的可以自己动手进行二次开发，相信大家一定会喜欢。

html结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>http://blog.csdn.net/ime33 原生JS英文时间日期插件 Pikaday.js</title>
    <link rel="stylesheet" href="http://dbushell.github.com/Pikaday/css/pikaday.css">
    <script src="http://dbushell.github.com/Pikaday/pikaday.js"></script>
</head>
<body>
    <h3>基础例子</h3>
    <input type="text" id="datepicker">

    <script>

        var picker = new Pikaday(
        {
            field: document.getElementById('datepicker'),
            firstDay: 1,
            minDate: new Date('2000-01-01'),
            maxDate: new Date('2020-12-31'),
            yearRange: [2000,2020]
        });

    </script>
</body>
</html>

运行结果：

因为这个js插件是老外一牛人做的，所以这个界面还是英文的、而且日期格式只能是这个，那么变换方法还是有的，上菜：

需要在资源中再引入一个格式化库件moment.js

var i18n = { // 本地化
            previousMonth : '上个月',
            nextMonth   : '下个月',
            months      : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
            weekdays    : ['周日','周一','周二','周三','周四','周五','周六'],
            weekdaysShort : ['日','一','二','三','四','五','六']
          }

var picker = new Pikaday(
        {
            field: document.getElementById('datepicker'),
            firstDay: 1,
            i18n:     i18n,
            minDate: new Date('2000-01-01'),
            maxDate: new Date('2020-12-31'),
            yearRange: [2000,2020]
        });

再实例化 Pikaday组件，效果：