轻量级的日期时间控件Pikaday

矫情吗；* 2022-08-20 15:11 344阅读 0赞

今天看到一个网友分享的一篇文章，有关轻量级的日期时间控件Pikaday，感觉很实用。在这里总结一下,方便日后使用。因为之前也遇到过类似的问题，My97datepicker插件样式过于老旧，但又没有其它更符合要求的日期时间插件。

Pikaday插件的样式跟Bootstrap类似，简洁美观。如下图所示：

![这里写图片描述][20160303220335564]

在线演示地址：[http://www.travisup.com/demo/plugins/pikaday/index.html][http_www.travisup.com_demo_plugins_pikaday_index.html]

可以去这里下载：[http://download.csdn.net/detail/lmb55/9452173][http_download.csdn.net_detail_lmb55_9452173]

下面我简单总结一下如何在js代码中获取Pikaday日期事件框的值：

<script>
     var picker = new Pikaday(
        {
            field: document.getElementById('datepicker1'),
            firstDay: 1,
            minDate: new Date('2010-01-01'),
            maxDate: new Date('2020-12-31'),
            yearRange: [2000,2020]
        });
        var picker = new Pikaday(
                {
                    field: document.getElementById('datepicker2'),
                    firstDay: 1,
                    minDate: new Date('2010-01-01'),
                    maxDate: new Date('2020-12-31'),
                    yearRange: [2000,2020]
                });
    
        function getValue(){
         
    
            var startData = document.getElementById('datepicker1').value;
            var endData = document.getElementById('datepicker2').value;
            var startDateArray = startData.split("-");
            console.log('开始年份' + startDateArray[0] );
            console.log('开始月份' + startDateArray[1] );
            console.log('开始日期' + startDateArray[2] );
            var endDateArray = endData.split("-");
            console.log('结束年份' + endDateArray[0] );
            console.log('结束月份' + endDateArray[1] );
            console.log('结束日期' + endDateArray[2] );
        }
    </script>

[20160303220335564]: /images/20220731/1faca4c23ad3436aba1f149d96227fe0.png
[http_www.travisup.com_demo_plugins_pikaday_index.html]: http://www.travisup.com/demo/plugins/pikaday/index.html
[http_download.csdn.net_detail_lmb55_9452173]: http://download.csdn.net/detail/lmb55/9452173

发表评论取消回复

表情：

评论列表（有 0 条评论，344人围观）

还没有评论，来说两句吧...

相关阅读

相关 bootstrap 时间日期日历控件（datetimepicker）

效果图 [本文转载。原文链接请点击][Link 1] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

蔚落/ 2023年01月17日 09:23/ 0 赞/ 361 阅读

相关在html中引入pikaday的时间控件

版权声明:转载请标明博客地址,谢谢！ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

阳光穿透心脏的1/2处/ 2022年11月30日 15:57/ 0 赞/ 218 阅读

相关 C# DateTimePicker：日期时间控件

日期时间控件（DateTimePicker）在时间控件中的应用最多，主要用于在界面上显示当前的时间。 Format 属性提供了 4 个属性值，

太过爱你忘了你带给我的痛/ 2022年10月01日 13:57/ 0 赞/ 345 阅读

相关轻量级的日期时间控件Pikaday

今天看到一个网友分享的一篇文章，有关轻量级的日期时间控件Pikaday，感觉很实用。在这里总结一下,方便日后使用。因为之前也遇到过类似的问题，My97datepicker插件样

矫情吗；*/ 2022年08月20日 15:11/ 0 赞/ 345 阅读

相关日期控件

<table id="epoch\_popup\_calendar" class="calendar" classname="calendar" style="position

系统管理员/ 2022年08月12日 12:28/ 0 赞/ 326 阅读

相关学习Android之时间日期控件的使用

在Android中，时间日期控件相对来说还是比较丰富的。其中，DatePicker用来实现日期输入设置，TimePicker用来实现时间输入设置。DatePickerDialo

悠悠/ 2022年08月06日 12:05/ 0 赞/ 384 阅读

相关 WdatePicker日期控件的时间限制

问题描述：用户在使用日期空间进行时间选择时，只能选择一个星期之后的7天，并且只能选择这7天当中的星期二与星期四代码：<input class="Wdate"

刺骨的言语ヽ痛彻心扉/ 2022年08月02日 09:47/ 0 赞/ 253 阅读

相关日期控件-Pikaday-WdatePicker

下载地址：https://download.csdn.net/download/qzc2017/10878539 <input type="text"

一时失言乱红尘/ 2022年04月02日 12:22/ 0 赞/ 397 阅读

相关时间控件

页面，在body下面加这块 <body> <script> sd\_body\_init(); </script> 页面里： <td align="

红太狼/ 2021年09月10日 07:00/ 0 赞/ 1085 阅读

相关 Android —— 日期时间控件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

阳光穿透心脏的1/2处/ 2021年07月25日 22:07/ 0 赞/ 523 阅读