A brief discussion on Bootstrap's DatePicker date range selection

Below I will bring you a brief discussion of Bootstrap's DatePicker date range selection. Let me share it with you now and give it as a reference for everyone.

When using date plug-ins, there is often a need. Two input box selections. The start time is less than the end time, the end time is greater than the start time, and the start time and end time are neither greater than the current time.

Of course we can use the selection result to judge whether the input is correct or not. But a better approach would be to have our date picker add some restrictions.

Bootstrap is equipped with an excellent date selection plug-in. DatePicker and DateTimePicker.

The two functions are very similar. The method of use is also similar. DatePicker supports more events and settings.

Look at the api and know that there will be an event changeDate when the date changes. When the selected date changes, the callback we gave to this event will be called. But unfortunately, this event does not seem to be triggered when we directly enter or delete the date in the input box. So you can add the attribute readonly to the input box. Read-only state, and give the date control a clear button. In this way, the change of date can normally only be controlled through the date plug-in.

However, when using the DateTimePicker plug-in to click the clear button, the error Uncaught TypeError: Cannot read property 'getTime' of null will be reported. As a result, the changeDate event cannot be used normally.

So I used the DatePicker plug-in instead.

Then when the date of an input box changes (including clearing), the changeDate event is triggered, and the optional range of another input box is modified in its callback function.

In addition, if DatePicker wants the interface to display Chinese, it also needs to load css. bootstrap-datepicker.zh-CN.min.js.

The following is the code:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

A simple example of using AJAX to implement page login and registered user name verification

Loop scheme in Ajax

Quick solution for ajax to return object Object

The above is the detailed content of A brief discussion on Bootstrap's DatePicker date range selection. For more information, please follow other related articles on the PHP Chinese website!