Shulou(Shulou.com)06/03 Report--

This article is about how to use DatePicker in Bootstrap. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

When using date plug-ins, there is often a requirement. Select two input boxes. The start time is less than the end time, the end time is greater than the start time, and neither the start time nor the end time is greater than the current time.

Of course, we can judge whether the input is correct or not by the result of the choice. But a better way is to let our date selection plug-in impose some restrictions.

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

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

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

However, when you click the clear button using the DateTimePicker plug-in, you will get an error Uncaught TypeError: Cannot read property 'getTime' of null, resulting in the changeDate event not being used properly.

So use the DatePicker plug-in instead.

Then when the date of one input box changes (including clearing), the changeDate event triggers to modify the optional range of the other input box in its callback function.

In addition, DatePicker needs to load css to make the interface display Chinese. Bootstrap-datepicker.zh-CN.min.js .

Here is the code:

Function DatePicker (beginSelector,endSelector) {/ / Select 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 implementation date Select the start date is not greater than the end time, the end time is not less than the start time, and neither the start date nor the end date is greater than the current date.

Thank you for reading! This is the end of the article on "how to use DatePicker in Bootstrap". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.