Time Control-pikaday.js

Today, the task is to use a time control, the format is the year-month-day format, with a lightweight pikaday.js called the approximate volume of 11k,

Using the native JS package, use the following:

var picker = new Pikaday (
{
Field:document.getElementById (' Datecontrl '),
Firstday:1,
Mindate:new Date (' 2010-01-01 '),
Maxdate:new Date (' 2020-12-31 '),
Yearrange: [2000,2020]
});

Instantiate a Pikaday object, and then align several special properties to assign values,

The HTML structure is as follows:

<class= "Float-left width-62 select_01">     <   ID= "Datecontrl"  readonly= "ReadOnly"  class= " width-100 "  value=" 2017-8-18 "  type=" text "> </ Div >

The CSS is as follows:

@charset "UTF-8";/*! * Pikaday * Copyright, David Bushell | BSD & MIT License | http://dbushell.com/*/. Pika-single{Z-index:9999;Display:Block;position:relative;width:240px;padding:8px;Color:#333;background:#fff;Border:1px solid #ccc;Border-bottom-color:#bbb;font-family:"Helvetica Neue", Helvetica, Arial, Sans-serif;}. Pika-single.is-hidden{Display:None;}. Pika-single.is-bound{position:Absolute;Box-shadow:0 5px 15px-5px rgba (0,0,0,.5);}. Pika-title{position:relative;text-align:Center;}. Pika-label{Display:Inline-block;*display:inline;position:relative;Z-index:9999;Overflow:Hidden;margin:0;padding:5px 3px;font-size:14px;Line-height:20px;Font-weight:Bold;Background-color:#fff;}. Pika-title Select{cursor:Pointer;position:Absolute;Z-index:9998;margin:0; Left:0;Top:5px;Filter:Alpha (opacity=0);Opacity:0;}. Pika-prev,.pika-next{Display:Block;cursor:Pointer;position:relative;Outline:None;Border:0;padding:0;width:20px;Height:30px;Background-color:Transparent;background-position:Center Center;background-repeat:no-repeat;background-size:75% 75%;White-space:nowrap;text-indent:100%;Overflow:Hidden;Opacity:. 5;*position:Absolute;*top:0;}. Pika-prev:hover,.pika-next:hover{Opacity:1;}. Pika-prev,.is-rtl. Pika-next{float: Left;Background-image:url (' data:image/png;base64,ivborw0kggoaaaansuheugaaabqaaaaecayaaaasej5raaaaukleqvr42u3vmqoaibadqf8pgj+ od9hg2ctonjb2ymqkke0hbwap0xucdiqwaritidebenmgmq8s8+aqbil6kkghixqqqaejepbo/z38j/    u0uahlabkbl9i4gwaaaabjru5erkjggg== '); *left:0;}. Pika-next,.is-rtl. Pika-prev{float: Right;Background-image:url (' data:image/png;base64,ivborw0kggoaaaansuheugaaabqaaaaecayaaaasej5raaaau0leqvr42u3vowoamage0dwfannju26bykbcfgwfil9vvwoo+    Bj4gf3gtsekkofbntcocayvwaaignqgmuhmkjgbgjk2mionuxo0nc8xncf1jxgarvizaqh5tkyaaaaasuvork5cyii= '); *right:0;}. pika-prev.is-disabled,.pika-next.is-disabled{cursor:default;Opacity:. 2;}. Pika-select{Display:Inline-block;*display:inline;}. Pika-table{width:100%;Border-collapse:collapse;border-spacing:0;Border:0;}. pika-table th,.pika-table TD{width:14.285714285714286%;}. pika-table th{Color:#999;font-size:12px;Line-height:25px;Font-weight:Bold;text-align:Center;}. Pika-button{cursor:Pointer;Display:Block;Outline:None;Border:0;margin:0;width:100%;padding:5px;Color:#666;font-size:12px;Line-height:15px;text-align:Center;background:#f5f5f5;}. Is-today. Pika-button{Color:#33aaff;Font-weight:Bold;}. is-selected. Pika-button{Color:#fff;Font-weight:Bold;background:#33aaff;Box-shadow:inset 0 1px 3px #178fe5;Border-radius:3px;}. is-disabled. Pika-button{pointer-events:None;cursor:default;Color:#999;Opacity:. 3;}. Pika-button:hover{Color:#fff!important;background:#ff8000!important;Box-shadow:None!important;Border-radius:3px!important;}
Simple and practical lightweight JS time Date selection control Pikaday, this plugin is modified from the foreign version, open source to
Address: Http://dbushell.github.io/Pikaday/js: https://github.com/dbushell/Pikaday/blob/master/pikaday.js

Time Control-pikaday.js