時間外掛程式My97DatePicker 時段選擇

近日專案中有做到關於時段的內容，因為是時段需要對於起始時間與結束時間進行判斷，於是就使用了my97datepicker時間外掛程式(同事推薦，因為看到我自己寫的判斷方法太low)，下面就對my97datepicker進行簡單了解

首先給出外掛程式**my97時間控制項

（這是樓主覺得最好看的**）

首先進行簡單配置

（2）在html頁面中匯入wdatepicker.js。

（3）在輸入框input元素上加入class="wdate" onfocus(或onclick)="wdatepicker()"**。

然後就開始我們的使用：

首先這個div中有兩個input框分別為 1.開始時間、2.結束時間

1
<
div 
id="existing"
style
="margin-top: 10px;margin-bottom: 10px;"
>
input 
name
="starttime"
id="beg$"
type
="text"
maxlength
="20"
3class
="input-medium wdate"
required value
="$" pattern
="hh:mm"
/>"4
onclick="wdatepicker(\')}'});"/>
input 
name
="endtime"
id="end$"
type
="text"
maxlength
="20"
6class
="input-medium wdate"
required value
="$" pattern
="hh:mm"
/>"7
onclick="wdatepicker(\')}'});"/>
8<
input 
type
="button"
onclick
="timemanagement(this)"
class
="btn btn-primary "
value
="刪除"
/>
9div
>

主要說下在wdatepicker內的各屬性意義

1.datefmt：限定在使用者在點選這個input框時日期控制項是以一種什麼格式出現的 hh:mm 就是--時:分(注大寫的hh為24小時制，hh為12小時制),『yyyy-mm-dd』則為年-月-日這種形式，有靈活的可調控性

2.isshowclear：是乙個清空按鈕，點選直接清空日期，有這個屬性控制項中就會出現

3.maxdate(此屬性用來控制時段)：最大時間

4.mindate(此屬性用來控制時段)：最小時間

這個表示式是關鍵#f:

把他拆分開分為：1.#f、2.$dp.$d( )兩部分

1.#f在{}中可以自定義的js**

2.$dp.$d( )：$dp.$相當於document.getelementbyid函式--獲取id,沒錯就是在起始時間maxdate的$dp.$d( )中寫入結束時間的id就行了！是不是很easy！但是記得id要被----\' \'框住(注:id必須唯一,我寫的花裡胡哨是因為做的動態表單,id要有唯一標識)

更多的時間控制請前往這裡

繼續深入學習~

時間外掛程式My97DatePicker 時段選擇

My97DatePicker日曆外掛程式

簡單好用的時間選擇外掛程式My97datepicker

My97DatePicker時間控制項

時間外掛程式My97DatePicker 時段選擇

My97DatePicker日曆外掛程式

簡單好用的時間選擇外掛程式My97datepicker

My97DatePicker時間控制項

相關推薦