How to select a date range using Bootstrap's DatePicker property

This time I will show you how to select a date range for the DatePicker attribute of Bootstrap. What are the precautions for selecting a date range for the DatePicker attribute of Bootstrap? The following is a practical case, let’s take a look together. take a look.

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

Bootstrap DatePicker implements date selection. The start date is not greater than the end time, the end time is not less than the start time, and the start date and end date are not greater than Current date.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

ajax implements the complete process of registering user names

Ajax+PHP data interaction implementation

The above is the detailed content of How to select a date range using Bootstrap's DatePicker property. For more information, please follow other related articles on the PHP Chinese website!