首頁 >web前端 >Bootstrap教程 >bootstrap的表單怎麼選日期

bootstrap的表單怎麼選日期

爱喝马黛茶的安东尼
爱喝马黛茶的安东尼原創
2019-07-13 14:08:533774瀏覽

bootstrap的表單怎麼選日期

在大多數專案中使用者介面的時間選擇是必不可少的,在專案的使用者體驗友善度這個大前提下,不讓使用者自己輸入時間就顯得格外的重要。而且使用者輸入時間還會有格式不固定的問題,加大後台的開發量。在這個時候就需要用到時間輸入插件了,格式由我們自己設置,也減少了使用者的輸入環節提高了使用者體驗友善度。

使用

bootStrap的時間外掛程式datetimepicker支援介面多元化有專門的的一個網址來說明這個時間選擇器。

Demo

利用外掛程式所帶的方法和時間。可以做一個簡單的demo 

demo功能點: 

1.輸入日期格式為yyyy-MM-dd hh:ii:ss(格式可以自訂) 。 

2.前一個日期的時間輸入以後,後面一個日期的輸入值不能小於前一個日期 。

3.後一個日期的時間輸入以後,前面一個日期的輸入值不能大於前一個日期。

相關推薦:《bootstrap入門教學

需要bootstrap提供封裝的css和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>

以上是bootstrap的表單怎麼選日期的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn