Discussion on the DatePicker date range selection of bootstrap _ajax related

When using date plug-ins, there is always a need. Two input box selection. 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 less than the current time.

We can certainly use the results of the selection to determine whether the input is correct or not. But the better way is to let our date select Plug-ins to make some restrictions.

Bootstrap with a very good date selection plugin. DatePicker and DateTimePicker.

The two functions are similar. The use of the method is similar. DatePicker support for more events and settings.

There is an event changedate when the API knows the date changes. When the selected date changes, we call the callback for the event. Unfortunately, it doesn't seem to trigger this event when we enter or delete a date directly in the input box. So you can add the input box attribute readonly. Read-only state, and give the date control a purge button. The date changes are normally only controlled by the date plugin.

However, when using the DateTimePicker plug-in click the Purge button, the error uncaught typeerror:cannot read property ' GetTime ' of NULL, resulting in changedate events also can not be used normally.

So use the DatePicker plugin instead.

Then, when an input box date changes (including cleanup), the ChangeDate event triggers and modifies the optional range of another input box in its callback function.

In addition, DatePicker to make the interface display Chinese, also need to load CSS. Bootstrap-datepicker.zh-cn.min.js.

Here's the code:

function DatePicker (beginselector,endselector) {
  //Select Date
  $ (beginselector) only. 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 Implementation Date Selection Start date is not greater than the end time, the end time is not less than the start time, the start date and end date are not the current date.

The above is a small series for everyone to talk about bootstrap DatePicker date range Select all the content, I hope we support cloud-Habitat Community ~