Date and Time selector plug-in flatpickr and Selector plug-in flatpickr

Date and Time selector plug-in flatpickr and Selector plug-in flatpickr

We can use the date type in inputl of html5. But as shown in the following figure, Some browsers do not support this function. The flatpickr plug-in can solve this problem.

1. The github address of the flatpickr Date and Time selector plug-in is https://chmln.github.io/flatpickr /.

2. There are many examples in it, which tell us how to set it, but too many are easy to make people dazzled. Here is a simple example.

2.1 reference others' css and js

// The path must be written
<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 write an input

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

2.3 initialize the plug-in

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

2.4 this time can be used, but there is no default time. Therefore, you can set a default time.

// Create a current Date object var now = new Date (); // format the Date. If the value is smaller than 9, add 0 var day = ("0" + now. getDate ()). slice (-2); // format the month. If the value is smaller than 9, add 0 var month = ("0" + (now. getMonth () + 1 )). slice (-2); // assemble the complete Date Format var today = now. getFullYear () + "-" + (month) + "-" + (day); $ (". inputTestStyle "). val (today );

3. The simple answer example is complete. For more functions, see the following link.

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