時間控制項-pikaday.js

標籤：tom   events   賦值   none   relative   格式   first   執行個體化   好的   

 今天做任務要用到一個時間控制項，格式是年-月-日格式的，用到一個叫pikaday.js的輕量級的 大概體積有11k，

使用原生js 封裝好的，用法如下:

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]
});

//執行個體化一個Pikaday對象，然後對齊幾個特殊屬性賦值即可，

html 結構如下：

<div class="float-left width-62 select_01">     <input id="datecontrl" readonly="readonly"  class="width-100"  value="2017-8-18" type="text"> </div>

css 如下：

@charset "UTF-8";/*! * Pikaday * Copyright ? 2012 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;}
簡潔實用輕量級JS時間日期選擇控制項Pikaday，此外掛程式是從國外版本修改而來，開源地
址：http://dbushell.github.io/Pikaday/  js 地址:https://github.com/dbushell/Pikaday/blob/master/pikaday.js

 

時間控制項-pikaday.js