欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

推薦三款日期選擇插件(My97DatePicker、jquery.datepicker、Mobiscroll)

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

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

1.My97DatePicker

純?cè)鶭S，專注于PC端，支持IE6+；頁(yè)面上只需要引入WdatePicker.js文件，但是My97DatePicker整個(gè)目錄是一個(gè)整體，最好不要破壞里面的目錄結(jié)構(gòu)，否則就會(huì)報(bào)錯(cuò)找不到指定文件。

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

<input id="ipt" type="text" onclick="WdatePicker()" />

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

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

(7)可以實(shí)現(xiàn)日期選擇聯(lián)動(dòng)

<input id="d5221" type="text" onfocus="var d5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:'#F{$dp.$D(\'d5222\')}'})" />
<input id="d5222" type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})" />

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

<input type="text" id="d523_y" size="5" /> 年
<input type="text" id="d523_M" size="3" /> 月
<input type="text" id="d523_d" size="3" /> 日
<input type="text" id="d523_HH" size="3" /> 時(shí)
<input type="text" id="d523_mm" size="3" /> 分
<input type="text" id="d523_ss" size="3" /> 秒
<img onclick="WdatePicker({el:'d523',dateFmt:'yyyy-MM-dd HH:mm:ss',onpicked:pickedFunc})" src="../../My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle"  />

<script>
 function pickedFunc(){
  $dp.$('d523_y').value=$dp.cal.getP('y');
  $dp.$('d523_M').value=$dp.cal.getP('M');
  $dp.$('d523_d').value=$dp.cal.getP('d');
  $dp.$('d523_HH').value=$dp.cal.getP('H');
  $dp.$('d523_mm').value=$dp.cal.getP('m');
  $dp.$('d523_ss').value=$dp.cal.getP('s');
 }
</script>

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

2.jquery.datepicker.js

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

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

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

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

3.Mobiscroll

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

(1)demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 <title>Mobiscroll日期時(shí)間插件</title>

 <!-- 核心CSS樣式 -->
 <link href="dev/css/mobiscroll.core-2.5.2.css" rel="external nofollow" rel="stylesheet" type="text/css" />
 <!-- 添加動(dòng)畫效果 -->
 <!-- <link href="dev/css/mobiscroll.animation-2.5.2.css" rel="external nofollow" rel="stylesheet" type="text/css" /> -->
 <!-- 安卓樣式 -->
 <link href="dev/css/mobiscroll.android-ics-2.5.2.css" rel="external nofollow" rel="stylesheet" type="text/css" />

 <!-- 或者引用一整個(gè)壓縮好的css文件 -->
 <!-- <link href="css/mobiscroll.custom-2.5.2.min.css" rel="external nofollow" rel="stylesheet" type="text/css" /> -->

 <style type="text/css">
 .dwl{
  font-size: 20px;
 }
 .dwbg .dwb{
  font-size: 20px;
 }
 table td:first-child{
  padding-right: 15px;
 }
 table td:last-child{
  padding-left: 15px;
 }
 table .dww{
  min-width: 150px !important;
 }
 </style>
</head>

<body>
 <input type="text" name="appDate" id="appDate" />

 <!-- jquery類庫(kù) -->
 <script src="dev/jquery-1.9.1.js"></script>

 <!-- 核心js文件 -->
 <script src="dev/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
 <!-- 添加中文 -->
 <!-- <script src="dev/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script> -->
 <!-- 針對(duì)日期時(shí)間 -->
 <script src="dev/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
 <!-- 添加中文 -->
 <!-- <script src="dev/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script> -->
 <!-- 安卓端 -->
 <!-- <script src="dev/js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script> -->

 <!-- 或者引用一整個(gè)壓縮好的js文件 -->
 <!-- <script src="js/mobiscroll.custom-2.5.2.min.js" type="text/javascript"></script> -->

 <script type="text/javascript">
 $(function () {
  var currYear = (new Date()).getFullYear();
  var opt={};
  opt.date = {preset : 'date'};
  opt.default = {
  theme: 'android-ics light', // 皮膚樣式
  display: 'bottom', // 顯示方式
  mode: 'scroller', // 日期選擇模式
  startYear: currYear , //開始年份
  endYear: currYear + 30, //結(jié)束年份
  dateFormat: 'mm/yyyy ', // 日期格式
  dateOrder: 'mmyy', // 面板中日期排列格
  setText: '確定', // 確認(rèn)按鈕名稱
   cancelText: '取消',// 取消按鈕名籍我
  monthText: '月', // 面板中月文字
  yearText: '年', // 面板中年文字
  };

  $("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));
 });
 </script>
</body>
</html>

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

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

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

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

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

名稱欄目：推薦三款日期選擇插件(My97DatePicker、jquery.datepicker、Mobiscroll)
網(wǎng)頁(yè)URL：http://chinadenli.net/article42/gohiec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、手機(jī)網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)