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");

上記は私が皆さんのためにまとめたものです。将来皆さんのお役に立てれば幸いです。

関連記事:

AJAXを使用してページログインと登録ユーザー名の検証を実装する簡単な例

Ajaxのループスキーム

Ajaxがオブジェクトを返す簡単な解決策

以上がBootstrap の DatePicker の日付範囲選択に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。