jquery-uiの日付プラグインの使用

4743 ワード

HTMLは
        <input type="text" id="starttime" readonly />
        <input type="text" id="endtime" readonly />

readonlyプロパティを設定すると、入力ボックスは書き込み不可になります.
必要なjsファイルとcssファイルを導入
        <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
        <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>

中国語を使用する場合は、以下のjsファイルを導入します.
        <script type="text/javascript" src="datepicker_cn.js"></script>

ページのロード後にプラグインを初期化する必要があります
 1             $(function(){
 2                 /*
 3                  *        
 4                  */
 5                 $('#starttime').datepicker({
 6                     onSelect : function(dateText, inst) {
 7                         $("#endtime").datepicker("option", "minDate", dateText);
 8                     },
 9                     showButtonPanel : true,
10                     inline : true
11                 });
12                 
13                 $('#endtime').datepicker({
14                     onSelect : function(dateText, inst) {
15                         $("#starttime").datepicker("option", "maxDate", dateText);
16                     },
17                     showButtonPanel : true,
18                     inline : true
19                 });
20             });

開始時間を今日から制限するには、昨日以前のものは選択できません.初期化後も追加できます.
1     //           
2     $('#txtbegintime').datepicker('option', 'minDate', '0');

時間分秒のタイムプラグインのみを使用するには、次のjsファイルとcssファイルを導入する必要があります.
     <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
        <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>
        <script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
        <script type="text/javascript" src="jquery-ui-timepicker-zh-CN.js"></script> //  
1 $(function(){
2     $("#starttime").timepicker();
3     $(".timeinput").timepicker();
4 });
  //

未完、追加を続行...