1.bootstrap datepicker 使用

<div class="row form-group"><label class="control-label col-md-2">Log Date</label><div class="col-md-3"><div class="input-group input-medium date-picker input-daterange" data-date-format="yyyy-mm-dd"><input id="ModifyDateStart" name="ModifyDateStart" class="form-control" style="font-size: 13px;" type="text" value=""><span class="input-group-addon">~</span><input id="ModifyDateEnd" name="ModifyDateEnd" class="form-control" style="font-size: 13px;" type="text" value=""></div></div></div>

　　

<script type="text/javascript">$(function () {$(".date-picker").datepicker({language: "zh-EN",//autoclose: true,//選中之后自動隱藏日期選擇框//clearBtn: true,//清除按鈕format: "yyyy-mm-dd"//日期格式});});</script>

　　2.bootstrap datetimepicker的使用

<label class="control-label col-md-2">Access Time</label><div class="col-md-4"><div class="input-group input-medium"><input id="AccessTimeStart" name="AccessTimeStart" class="form-control" style="font-size: 13px;" type="text" value=""><span class="input-group-addon">~</span><input id="AccessTimeEnd" name="AccessTimeEnd" class="form-control" style="font-size: 13px;" type="text" value=""></div></div>

　　

<script type="text/javascript">$(function () {setTwoDateTimePicker('#AccessTimeStart', '#AccessTimeEnd');bandDatapicker();});function bandDatapicker() {debugger;batchSetDateTimePicker(".date-picker", "YYYY-MM-DD HH:mm", null, moment());};//將兩個輸入框設置為日期時間段控件function setTwoDateTimePicker(beginId, endId, dateFormat) {var newDateFormat = dateFormat || 'YYYY-MM-DD HH:mm';$(beginId).datetimepicker({format: newDateFormat,});$(endId).datetimepicker({format: newDateFormat,useCurrent: false});$(beginId).on("dp.change", function (e) {var value = e.date ? convertToMoment(e.date, newDateFormat) : false;$(endId).data("DateTimePicker").minDate(value);});$(endId).on("dp.change", function (e) {var value = e.date ? convertToMoment(e.date, newDateFormat) : false;$(beginId).data("DateTimePicker").maxDate(value);});}//批量將輸入框設置為日期時間控件，批量的時候必須遍歷單獨設置，否則最大最小值會無效function batchSetDateTimePicker(id, dateFormat, minDate, maxDate, changeFunc) {$(id).each(function (index, element) {value = $(element).val();setDateTimePicker(element, dateFormat, minDate, maxDate, value, changeFunc);});}//將輸入框設置為日期時間控件function setDateTimePicker(id, dateFormat, minDate, maxDate, defaultValue, changeFunc) {var newDateFormat = dateFormat || 'YYYY-MM-DD';$(id).datetimepicker({format: newDateFormat,// useCurrent: false});if (minDate) {var value = convertToMoment(minDate, newDateFormat);$(id).data("DateTimePicker").minDate(value);}if (maxDate) {var value = convertToMoment(maxDate, newDateFormat);$(id).data("DateTimePicker").maxDate(value);}//賦初始值，否則當設置了最大最小值時可能會將當天日期賦給輸入框if (defaultValue) {var value = convertToMoment(defaultValue, newDateFormat);$(id).data("DateTimePicker").date(value);} else {$(id).data("DateTimePicker").date(null);}if (changeFunc) {$(id).on("dp.change", changeFunc);}}//將日期時間字符串或者moment對象按照指定格式轉換為新的moment對象function convertToMoment(datetime, dateFormat) {if (!datetime) { return null; }if (moment.isMoment(datetime)) {return moment(datetime.format(dateFormat), dateFormat);} else {return moment(datetime, dateFormat);}} </script>

　　

轉載于:https://www.cnblogs.com/Tom-yi/p/8031541.html

總結

以上是生活随笔為你收集整理的bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。