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

時間 2019-12-12

標籤推薦日期選擇插件 my97datepicker+jquery.datepicker+mobiscroll datepicker jquery mobiscroll 欄目 JQuery 简体版

原文原文鏈接

1.My97DatePicker

純原生JS，專一於PC端，支持IE6+；頁面上只須要引入WdatePicker.js文件，可是My97DatePicker整個目錄是一個總體，最好不要破壞裏面的目錄結構，不然就會報錯找不到指定文件。

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

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

注意：因爲此插件是原生JS寫的，因此綁定點擊事件請務必請用原生JS的點擊事件綁定方法，若是使用$('#ipt').on('click',function( ){ })，在選中一個日期並失去焦點後，想要從新選擇就必須點擊兩次次才能喚起日曆。

(2)若是給輸入框添加class="Wdate"，輸入框的右邊會出現一個日期圖標。

(3)能夠經過其餘元素來彈出日期選擇框，直接給該元素添加onclick="WdatePicker({el: '#ipt'})"

(4)能夠經過添加position屬性來定義彈出位置，例如 onclick="WdatePicker({position: {left:100,top:50}})"

(5)能夠經過添加dateFmt屬性來定義日期格式，例如 onclick="WdatePicker({dateFmt: 'MM-yy'})"

(6)若是沒有定義onpicked和oncleared事件，將自動觸發文本框的onchange事件，定義這些事件的方式以下

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

(7)能夠實現日期選擇聯動javascript

<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)還能將選中的值拆分到文本框css

<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" /> 時
<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" style="cursor:pointer" />

<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>

更多功能和參數請去官網查詢http://www.my97.net/dp/demo/resource/3.asp。html

2.jquery.datepicker.js

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

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

(2)經常使用的幾個參數配置以下

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

3.Mobiscroll

專一於移動端，依賴於jquery類庫，有多種樣式可供選擇，根據須要引入各種文件。

(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日期時間插件</title>

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

    <!-- 或者引用一整個壓縮好的css文件     -->
    <!-- <link href="css/mobiscroll.custom-2.5.2.min.css" 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類庫 -->
    <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> -->
    <!-- 針對日期時間 -->
    <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> -->

    <!-- 或者引用一整個壓縮好的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, //結束年份
                dateFormat: 'mm/yyyy ', // 日期格式
                dateOrder: 'mmyy', // 面板中日期排列格
                setText: '肯定', // 確認按鈕名稱
                   cancelText: '取消',// 取消按鈕名籍我
                monthText: '月', // 面板中月文字
                yearText: '年', // 面板中年文字
            };

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

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

若是頁面有多個輸入框，當點擊一個輸入框時會喚起設備自帶的軟鍵盤，而後若是直接點擊另外一個id名爲appDate的日期輸入框，即失去焦點的同時，獲取到了mobiscroll綁定的輸入框的焦點，結果發現以前的軟鍵盤下沉消失以後，本該顯示在底部的日期選擇部件顯示在了屏幕的上方，解決辦法是找到mobiscroll.core-2.5.2.js 這個文件，搜索focus關鍵字，將對應的地方改爲：

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

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

相關標籤/搜索

軟件推薦

硬件推薦

選擇