ホームページ >ウェブフロントエンド >jsチュートリアル >jquery UI Datepickerの時刻制御の使い方(3)

jquery UI Datepickerの時刻制御の使い方(3)

PHPz転載: 2021-05-28 15:58:503704ブラウズ

この記事は、jquery UI Datepicker 時間コントロールの使用方法の最終バージョンです。実装された関数には、開始時間と終了時間の範囲が 3 日以内に制限されており、クリア時間、再選択時間などが設定されています。。一定の参考値があるので、困っている友達が参考になれば幸いです。

最初に 2 つのレンダリングを示します

jquery UI Datepickerの時刻制御の使い方(3)

例では、私が管理する開始時刻と終了時刻は 3 日です。つまり、開始時刻と終了時刻の間の期間は 3 日を超えることはできません。

具体的な実装方法については、コード内に非常に詳細な説明が記載されています。読み続けてください:

最初のステップは、ここでコントロール js を導入することです。 2 つあり、1 つは jquery.js、もう 1 つは jquery-ui-datepicker.js で、もちろんスタイルファイルの導入があります:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui-datepicker.js"></script> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />

2 番目のステップ: テキスト入力ボックスを作成し、テキストタイプを入力し、クリア時間の設定もデモに記述されています。つまり、ボタンがイベント

<td width="35%">
    <label>开始时间：</label>
    <input type="text" name="start" id="start" value="${params.start}" readonly="true" title="日期范围不能大于3天"/>
    <input type="button" class="formButton" value="清空" onclick="cleaPrevInput(this);"/>
    <font color="red">必选*</font>
   </td>
   <td width="35%">
    <label>结束时间：</label>
    <input type="text" name="end" id="end" value="${params.end}" readonly="true" title="日期范围不能大于3天"/>
    <input type="button" class="formButton" value="清空" onclick="cleaPrevInput(this);"/>
    <font color="red">必选*</font>
   </td>

に応答します。内部の値については心配しないでください。これはプロジェクトで書いたコードです。値は次のように書かれているため、クエリ後にページが更新されたときに、時間ボックスに選択された時間値がまだ存在することができます。

次のコードは、日付コントロールを呼び出すためのコードです。コードは次のとおりです:

$(function(){
 // 获取调用控件的对象
 var dates = $("#start,#end");
 var option;
 //设置目标时间，因为例子中的开始时间和结束时间是有时间限制的
 var targetDate;
 var optionEnd;
 var targetDateEnd;
 dates.datepicker({
  showButtonPanel:false,
  //当选择时间的时候触发此事件
  onSelect: function(selectedDate){ 
   if(this.id == "start"){
   // 如果是选择了开始时间
   option = "minDate";
   //getTimeByDateStr 这个方法的代码下面会贴出来的，就是处理时间的代码
   var selectedTime = getTimeByDateStr(selectedDate);
   var minTime = selectedTime;
   targetDate = new Date(minTime);
   //设置结束时间
   optionEnd = "maxDate";
   targetDateEnd = new Date(minTime+2*24*60*60*1000);
   }else{
   // 如果是选择了结束时间
   option = "maxDate";
   var selectedTime = getTimeByDateStr(selectedDate);
   var maxTime = selectedTime;
   targetDate = new Date(maxTime);
   //设置开始时间
   optionEnd = "minDate";
   targetDateEnd = new Date(maxTime-2*24*60*60*1000);

   }
   //设置时间框中时间，比如根据选择的开始时间，限制结束时间的不可选项,dates.not(this)是js选择器使用，
   //datepicker("option", option, targetDate),这个就是日期控件封装的api了
   dates.not(this).datepicker("option", option, targetDate); 
   dates.not(this).datepicker("option", optionEnd, targetDateEnd); 
  }
 });
});

まず、上記のコードの getTimeByDateStr(XXX) メソッドのコードを掲載します。このコードは非常に便利です。シンプルなので、誰でも一目で理解できると思います:

//根据日期字符串取得其时间
function getTimeByDateStr(dateStr){
 var year = parseInt(dateStr.substring(0,4));
 var month = parseInt(dateStr.substring(5,7),10)-1;
 var day = parseInt(dateStr.substring(8,10),10);
 return new Date(year, month, day).getTime();
}

コードは日付コントロールの使用を実装できるようになり、開始時刻と終了時刻は制限されていますたとえば、開始時刻を 2014-03-27 として選択した場合、終了時刻のオプションは 27、28、29 の 3 つだけです。他の日付はクリックできません。終了時刻を 28 にすると、開始時刻は 28、27、26 のみになります。それだけです。

ステップ 3: クリアボタンを見てください。クリアボタンは、時間選択ボックスの値をクリアします。。これは非常に簡単に実装できます:

//清空日历控件
function cleaPrevInput(objs){
 //清空输入框中的值，但是仅仅是清空了值而已，时间控件的选值限制还在的
 $(objs).prev().val("");
 //如果开始时间和结束时间都清空了，这时应该是你选择的那个框中是没有时间限制的，也就是说可以随便选择日期
 if($(&#39;#start&#39;).val()=="" && $(&#39;#end&#39;).val()==""){
 var dates = $("#start,#end");
 //调用datepicker封装的api，使刚刚设置的开始时间和结束时间为空，这样就可以选择任意日期了
 dates.datepicker("option", "minDate", null);
 dates.datepicker("option", "maxDate", null);
 }
}

すぐに使用できます。コントロールを使用するだけなら、時間制限を設定する必要がなく、非常に簡単です。上記のコードは、ほとんどの日付選択ニーズに使用できますが、何か特別な場合は、まだ確認する必要がありますそのとき、私は日付コントロールの値をクリアするためだけに、API を長い間チェックしていました。これは次のコードです: days.datepicker("option", "maxDate", null)。まだ全員が必要です十分な忍耐力を持つこと。

以上がjquery UI Datepicker時間コントロールの紹介の全てです、一旦終了となります、今後関連記事があれば随時紹介していきます。