码迷,mamicode.com
首页 > 其他好文 > 详细

日期时间选择器插件flatpickr

时间:2017-05-12 20:26:49      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:get   时间   ebe   例子   csharp   tpi   new   type   today   

前言:在网页上需要输入时间的时候,我们可以用HTML5的inputl中的date类型。但是如下入所示,有些浏览器不支持。flatpickr这个小插件可以解决这个问题。

技术分享

1.flatpickr日期时间选择器插件的github地址为:https://chmln.github.io/flatpickr/

技术分享

2.里面有很多例子,告诉我们呢怎么设置,不过太多很容易让人眼花。我这里做一个最简单的例子。

2.1引用人家的css和js

    //路径一定要写对
<link rel="stylesheet" type="text/css" href="~/Content/flatpickr-master/flatpickr.css" /> <script type="text/javascript" src="~/Content/flatpickr-master/flatpickr.js"></script>

2.2 写一个input

 <input  class="InputTestStyle"   name="timeBefore"> 

2.3 初始化插件

document.getElementsByClassName("InputTestStyle").flatpickr(); 

 2.4这个时候已经可以使用了,不过没有一个默认的时间。所以自己设置一个默认的时间。

//创建一个当前日期对象
    var now = new Date();
    //格式化日,如果小于9,前面补0
    var day = ("0" + now.getDate()).slice(-2);
    //格式化月,如果小于9,前面补0
    var month = ("0" + (now.getMonth() + 1)).slice(-2);
    //拼装完整日期格式
    var today = now.getFullYear() + "-" + (month) + "-" + (day);
    $(".InputTestStyle").val(today);

3.简答的例子完成了,更多功能请参考下面链接。

http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201608213894.html

日期时间选择器插件flatpickr

标签:get   时间   ebe   例子   csharp   tpi   new   type   today   

原文地址:http://www.cnblogs.com/Cui-Shi-Yu/p/6846770.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!