日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

三款日期選擇插件推薦給大家：

上饒網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司從2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

1.My97DatePicker

純原生JS，專注于PC端，支持IE6+；頁面上只需要引入WdatePicker.js文件，但是My97DatePicker整個目錄是一個整體，最好不要破壞里面的目錄結(jié)構(gòu)，否則就會報錯找不到指定文件。

(1)直接在html文件中寫入

注意：由于此插件是原生JS寫的，所以綁定點擊事件請務(wù)必請用原生JS的點擊事件綁定方法，如果使用$('#ipt').on('click',function( ){ })，在選中一個日期并失去焦點后，想要重新選擇就必須點擊兩次次才能喚起日歷。
(2)如果給輸入框添加class="Wdate"，輸入框的右邊會出現(xiàn)一個日期圖標。
(3)可以通過其他元素來彈出日期選擇框，直接給該元素添加onclick="WdatePicker({el: '#ipt'})"
(4)可以通過添加position屬性來定義彈出位置，例如 onclick="WdatePicker({position: {left:100,top:50}})"
(5)可以通過添加dateFmt屬性來定義日期格式，例如 onclick="WdatePicker({dateFmt: 'MM-yy'})"
(6)如果沒有定義onpicked和oncleared事件，將自動觸發(fā)文本框的onchange事件，定義這些事件的方式如下

document.getElementById('ipt').onclick = function(){
 WdatePicker({
  onpicked: function(){
   // 配合jquery.validate.js插件，在這里手動添加校驗
  },
  oncleared: function(){
   // 配合jquery.validate.js插件，在這里手動添加校驗
  },
 });    
}

(7)可以實現(xiàn)日期選擇聯(lián)動

(8)還能將選中的值拆分到文本框

 年
 月
 日
 時
 分
 秒

更多功能和參數(shù)請去官網(wǎng)查詢http://www.my97.net/dp/demo/resource/3.asp。 

2.jquery.datepicker.js

主要用于PC端，需要同時引入jquery.js和jquery-ui.js，樣式方面除了引入jquery-ui.css，還要帶上jquery-ui目錄中的images文件夾，否則就會報錯找不到指定的文件。

(1)引入相關(guān)文件后，直接就是$('#ipt').datepicker( );

(2)常用的幾個參數(shù)配置如下

$("#ipt").datepicker({
 numberOfMonths:1, // 顯示幾個月 
 showButtonPanel:true, // 是否顯示按鈕面板 
 dateFormat: 'yy-mm-dd', // 日期格式 
 clearText:"清除", // 清除日期的按鈕名稱 
 closeText:"關(guān)閉", // 關(guān)閉選擇框的按鈕名稱 
 yearSuffix: '年', // 年的后綴 
 showMonthAfterYear:true, // 是否把月放在年的后面 
 defaultDate:'2011-03-10', // 默認日期 
 minDate:'2011-03-05', // 最小日期 
 maxDate:'2011-03-20', // 最大日期 
 monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], 
 dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
 dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 
 dayNamesMin: ['日','一','二','三','四','五','六'], 
 onSelect: function(selectedDate) {
 // 選擇日期后執(zhí)行的操作 
 alert(selectedDate); 
 } 
}); 

3.Mobiscroll

專注于移動端，依賴于jquery類庫，有多種樣式可供選擇，根據(jù)需要引入各類文件。

(1)demo如下：

(2)解決與移動端軟鍵盤的定位沖突

如果頁面有多個輸入框，當(dāng)點擊一個輸入框時會喚起設(shè)備自帶的軟鍵盤，然后如果直接點擊另一個id名為appDate的日期輸入框，即失去焦點的同時，獲取到了mobiscroll綁定的輸入框的焦點，結(jié)果發(fā)現(xiàn)之前的軟鍵盤下沉消失之后，本該顯示在底部的日期選擇部件顯示在了屏幕的上方，解決辦法是找到mobiscroll.core-2.5.2.js 這個文件，搜索focus關(guān)鍵字，將對應(yīng)的地方改成：

elm.bind('focus.dw', function () {
 setTimeout(function(){
  that.show();
 },300) 
});

其中300ms就是設(shè)置的延遲時間，這樣以來再做相同的操作，就是等之前的軟鍵盤下沉消失之后從底部浮上顯示日期選擇部件。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。