首頁 >web前端 >Bootstrap教程 >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: 'zh-CN', //默认选择格式 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 = $('#startTime').datetimepicker(); var picker2 = $("#endTime").datetimepicker(); //动态设置最小值(选择前面一个日期后:后面一个日期不能小于前面一个) picker1.on('changeDate', function (e) { picker2.datetimepicker('setStartDate', e.date); }); //动态设置最大值(选择后面一个日期后:前面一个日期不能大于前面一个) picker2.on('changeDate', function (e) { picker1.datetimepicker('setEndDate', e.date); }); }); </script>
以上是bootstrap的表單怎麼選日期的詳細內容。更多資訊請關注PHP中文網其他相關文章!