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

This article is to share with you about how bootstrap forms choose dates. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

In most projects, the timing of the user interface is essential. Under the premise of user experience friendliness of the project, it is particularly important not to allow users to enter their own time. And the user input time will also have the problem of irregular format, increase the amount of development in the background. At this time, we need to use the time input plug-in, the format is set by ourselves, and the user input link is reduced and the user experience is improved.

Use

BootStrap's time plug-in datetimepicker supports diversity of interfaces with a dedicated URL to illustrate this time selector.

Demo

Take advantage of the method and time brought by the plug-in. You can make a simple demo

Demo function points:

1. Enter the date format as yyyy-MM-dd hh:ii:ss (format can be customized).

two。 After the time of the previous date is entered, the input value of the later date cannot be less than the previous date.

3. After the time of the latter date is entered, the input value of the previous date cannot be greater than the previous date.

Bootstrap is required to provide encapsulated css and js

Fn.datetimepicker.defaults = {/ / default language language: 'zh-CN', / / default selection format format: "yyyy-mm-dd hh:ii:ss", autoclose: true, todayBtn: true, / / the input box location of the selector pickerPosition: "bottom-left"}; $(function () {var picker1 = $(' # startTime'). Datetimepicker (); var picker2 = $("# endTime"). Datetimepicker () / / dynamically set the minimum value (after selecting the previous date: the latter date cannot be less than the previous one) picker1.on ('changeDate', function (e) {picker2.datetimepicker (' setStartDate', e.date);}) / / dynamically set the maximum value (after selecting a later date: the previous date cannot be greater than the previous one) picker2.on ('changeDate', function (e) {picker1.datetimepicker (' setEndDate', e.date);});}); Thank you for reading! This is the end of this article on "how to choose a date on a bootstrap form". 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.