前端日期控制元件——My97DatePicker控制元件用法說明
阿新 • • 發佈：2018-12-11
My97DatePicker是一款功能強大的日期控制元件
-
把控制元件包拷貝到專案中，js引用 本身寫法是jQuery的把jQuery檔案引入
<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
簡單使用
利用onclick或onfocus事件觸發 返回的在輸入框生成String字串
<input id="i" class="Wdate" type="text" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
- 效果展示
- 效果圖程式碼
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script> <script> function testA() { $dp.show(); var str =$dp.$D(i,{M:3,d:7}); console.log(str); } </script> <body> <input id="i" class="Wdate" type="text" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})"> <button onclick="testA()">顯示日期選項框</button>
官方給的屬性用法
官方注意事項
My97DatePicker目錄是一個整體,不可破壞裡面的目錄結構,也不可對裡面的檔案改名,可以改目錄名 WdatePicker.js 配置檔案,在呼叫的地方僅需使用該檔案,可多個共存,以xx_WdatePicker.js方式命名
calendar.js 日期庫主檔案,無需引入
目錄lang 存放語言檔案,你可以根據需要清理或新增語言檔案
目錄skin 存放面板的相關檔案,你可以根據需要清理或新增面板檔案包
當WdatePicker.js裡的屬性:$wdate=true時,在input里加上class="Wdate"就會在選擇框右邊出現日期圖示,如果您不喜歡這個樣式,可以把class="Wdate"去掉,另外也可以通過修改skin目錄下的WdatePicker.css檔案來修改樣式
更多用法官網檢視： http://www.my97.net/demo/index.htm