Bootstrap の DatePicker プロパティを使用して日付範囲を選択する方法

今回はBootstrapのDatePicker属性の日付範囲を選択する方法を紹介します。具体的なケースを見てみましょう。 。 日付プラグインを使用する場合、多くの場合、必要になります。 2 つの入力ボックスの選択。開始時刻は終了時刻より小さく、終了時刻は開始時刻より大きく、開始時刻と終了時刻は現在時刻より大きくありません。

もちろん、選択結果を使用して入力が正しいかどうかを判断することもできます。ただし、より良いアプローチは、日付ピッカーにいくつかの制限を追加することです。

Bootstrap には優れた日付選択プラグインが装備されています。 DatePicker と DateTimePicker。

この 2 つの機能は非常に似ています。使用方法も同様です。 DatePicker は、より多くのイベントと設定をサポートしています。

API を確認すると、日付が変わるときにイベントchangeDateがあることがわかります。選択した日付が変更されると、このイベントに指定したコールバックが呼び出されます。ただし、残念ながら、入力ボックスに日付を直接入力または削除した場合、このイベントはトリガーされないようです。したがって、属性 readonly を入力ボックスに追加できます。読み取り専用状態にし、日付コントロールにクリア ボタンを与えます。このように、日付の変更は通常、日付プラグインを通じてのみ制御できます。

ただし、DateTimePicker プラグインを使用してクリアボタンをクリックすると、「Uncaught TypeError: Cannot read property 'getTime' of null」というエラーが報告され、その結果、changeDate イベントが正常に使用できなくなります。

そこで、代わりに DatePicker プラグインを使用しました。

その後、入力ボックスの日付が変更されると (クリアを含む)、changeDate イベントがトリガーされ、別の入力ボックスのオプションの範囲がその

で変更されます。 さらに、DatePicker がインターフェースに中国語を表示したい場合は、CSS をロードする必要もあります。 bootstrap-datepicker.zh-CN.min.js。

function DatePicker(beginSelector,endSelector){
  // 仅选择日期
  $(beginSelector).datepicker(
  {
  	language: "zh-CN",
  	autoclose: true,
  	startView: 0,
  	format: "yyyy-mm-dd",
  	clearBtn:true,
  	todayBtn:false,
  	endDate:new Date()
  }).on('changeDate', function(ev){  	
  	if(ev.date){
  		$(endSelector).datepicker('setStartDate', new Date(ev.date.valueOf()))
  	}else{
  		$(endSelector).datepicker('setStartDate',null);
  	}
  })
  $(endSelector).datepicker(
  {
  	language: "zh-CN",
  	autoclose: true,
  	startView:0,
  	format: "yyyy-mm-dd",
  	clearBtn:true,
  	todayBtn:false,
  	endDate:new Date()
  }).on('changeDate', function(ev){ 
  	if(ev.date){
  		$(beginSelector).datepicker('setEndDate', new Date(ev.date.valueOf()))
  	}else{
  		$(beginSelector).datepicker('setEndDate',new Date());
  	} 
  })
}
DatePicker("#date_begin","#date_end");

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がBootstrap の DatePicker プロパティを使用して日付範囲を選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。