Introduction to the date range selection and bootstrapdatepicker of Bootstrap

Introduction to the date range selection and bootstrapdatepicker of Bootstrap

There is often a need to use the date plug-in. Select two input boxes. The start time is earlier than the end time. The End Time is later than the start time. the start time and end time are not later than the current time.

Of course, we can use the selected result to determine whether the input is correct or not. But the better way is to make some restrictions on our date selection plug-in.

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

The two functions are similar. The usage is similar. DatePicker supports more events and settings.

When the api knows the date change, there will be an event changeDate. When the selected date changes, we will call the callback for this event. Unfortunately, this event does not appear to be triggered when we enter or delete a date in the input box. Therefore, you can add the readonly attribute to the input box. Read-Only status, and a clear button is provided for the date control. In this case, only the date plug-in is used to control the changes of the date.

However, when the DateTimePicker plug-in is used to click the Clear button, the following error occurs: Uncaught TypeError: Cannot read property 'gettime' of null. As a result, the changeDate event Cannot be used normally.

So use the DatePicker plug-in.

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, to display Chinese characters on the interface, DatePicker also needs to load css. Bootstrap-datepicker.zh-CN.min.js.

The following code is used:

Function DatePicker (beginSelector, endSelector) {// select only the date $ (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: the start date and end date are not later than the end time, And the start date and end date are not later than the current date.

The above is a small Editor for you to talk about how to choose all the content of the date range of Bootstrap DatePicker ~