How to select date in bootstrap form

In most projects, the time selection of the user interface is essential. Under the premise of the user experience friendliness of the project, it is particularly important not to allow users to enter the time themselves. important. In addition, the user input time will have the problem of unstable format, which will increase the amount of backend development. At this time, we need to use the time input plug-in. The format is set by ourselves, which also reduces the user's input process and improves the user-friendliness.

Use

bootStrap's time plug-in datetimepicker supports interface diversification and has a dedicated URL to illustrate this time picker.

Demo

Use the methods and time provided 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 (the format can be customized) .

2. After the time of the previous date is entered, the input value of the following date cannot be less than the previous date.

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

Related recommendations: "bootstrap Getting Started Tutorial"

Requires bootstrap to provide encapsulated css and js

<link href="bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" />
<script src="bootstrap-datetimepicker.js"></script>
<script src="bootstrap-datetimepicker.zh-CN.js"></script>
<script>
 $.fn.datetimepicker.defaults = {
  //默认语言
  language: &#39;zh-CN&#39;,
  //默认选择格式
  format: "yyyy-mm-dd hh:ii:ss",
  autoclose: true,
  todayBtn: true,
  //选择板所在输入框位置
  pickerPosition: "bottom-left"
 };
</script>
 <div class="input-append date form_datetime">
 <input size="16" type="text" value="" id="startTime" readonly>
 <input size="16" type="text" value="" id="endTime" readonly>
</div>
<script>
 $(function () {
  var picker1 = $(&#39;#startTime&#39;).datetimepicker();
  var picker2 = $("#endTime").datetimepicker();
  //动态设置最小值(选择前面一个日期后：后面一个日期不能小于前面一个)
  picker1.on(&#39;changeDate&#39;, function (e) {
   picker2.datetimepicker(&#39;setStartDate&#39;, e.date);
  });
  //动态设置最大值(选择后面一个日期后：前面一个日期不能大于前面一个）
  picker2.on(&#39;changeDate&#39;, function (e) {
   picker1.datetimepicker(&#39;setEndDate&#39;, e.date);
  });
 });
</script>

The above is the detailed content of How to select date in bootstrap form. For more information, please follow other related articles on the PHP Chinese website!