BootStrapDatePicker時間選擇器--Tango
團隊中缺少前端開發人員,作為非專業前端,鴨子硬上架摸索了一統,總結一下,受用以後,BootStrap時間選擇器的使用;
踩過的坑:
js對時間選擇器賦值,結果開始時間和結束時間的onchange事件失效,僅滑鼠在其他處單擊後事件才觸發;
解決方案為:js賦值操作後,直接為開始時間 觸發input事件;
程式碼:$('#starttime').trigger(‘input’);
css和js資源引入
<link rel="stylesheet" href="bootstrap.min.css" >
<link href="bootstrap-datetimepicker.min.css" rel="stylesheet">
<script type="text/javascript" src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="moment.js"></script>
<script src="bootstrap-datetimepicker.min.js"></script>
html頁面<div class="container">
<div class="row" style="margin-bottom: 10px;">
<div class="form-inline">
<div class="col-md-4">
<label class="text-success">時間段 </label>
<input class="form-control combobox" style="width:170px;" id="selecttime"/>
</div>
<div class="col-md-4">
<label class="text-success"> 開始時間 <font color='red' align="center">*</font></label>
<div class="input-group date">
<input id="starttime" type='text' class="form-control" style="width:170px;">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-md-4">
<label class="text-success"> 結束時間 <font color='red'>*</font></label>
<div class="input-group date">
<input id="endtime" type='text' class="form-control" style="width:170px;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
控制開始時間和結束時間的指令碼
<script type="text/javascript">
//時間選擇器
$(function () {
var picker1 = $("#starttime").datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
locale: moment.locale('zh-cn'),
//minDate: '2017-7-1'
});
var picker2 = $("#endtime").datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
locale: moment.locale('zh-cn')
});
//動態設定最小值
picker1.on('dp.change', function (e) {
picker2.data('DateTimePicker').minDate(e.date);
});
//動態設定最大值
picker2.on('dp.change', function (e) {
picker1.data('DateTimePicker').maxDate(e.date);
});
});
</script>
相關文章
- element-ui 時間選擇器設定時間選擇範圍UI
- 自定義時間選擇器
- iOS簡易時間選擇器iOS
- vue 手寫一個時間選擇器Vue
- 直播帶貨原始碼,日期時間選擇器 選擇範圍限制原始碼
- 移動端時間選擇器(更新 1.2.0 版本)
- 時間選擇外掛ClockPickerKPI
- elementUI中日期選擇器,控制開始時間小於結束時間UI
- iOS仿滴滴預約用車時間選擇器iOS
- AngularJS教程十六—— 時間選擇AngularJS
- 002---選擇器(標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器)字元
- jQuery選擇器介紹:基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery
- React Native日期時間選擇元件React Native元件
- jQuery選擇器——基本選擇器jQuery
- 小程式年月日時間段區間選擇
- jquery-weui時間選擇器datetimepicker只要年月日不要時間解決方案jQueryUI
- 基本CSS選擇器,複合選擇器,後代選擇器CSS
- 【MySQL】時間型別儲存格式選擇MySql型別
- jQuery選擇器——層次選擇器jQuery
- jQueryweui時間選擇器datetimepicker只要年月日解決方案jQueryUI
- [Flutter package]簡單好用好擴充套件的時間日期選擇器FlutterPackage套件
- 【新特性速遞】最佳化日期選擇器的時間皮膚
- JQuery選擇器——可見性篩選選擇器和屬性篩選選擇器jQuery
- CSS3新增選擇器(屬性選擇器、結構偽類選擇器、偽元素選擇器)CSSS3
- jQuery選擇器之層次選擇器jQuery
- CSS選擇器(5)——屬性選擇器CSS
- jQuery選擇器——基本過濾選擇器jQuery
- CSS ID選擇器與CLASS選擇器CSS
- ant-design date-picker 可以選擇當天,時間不能選擇過去的小時
- dcat-admin 統計修改時間選擇器 日期範圍查詢
- Android學習筆記---使用TimePickerDialog打造時間選擇器Android筆記
- CSS-選擇器6-兄弟選擇器CSS
- jQuery選擇器——內容過濾選擇器jQuery
- jQuery選擇器——子元素過濾選擇器jQuery
- jQuery選擇器——屬性過濾選擇器jQuery
- 微信小程式-選擇時間(一週的某一時刻)微信小程式
- 設計和編寫一個非同步通用Picker選擇器,用於時間日期、城市、商品分類的選擇非同步
- TCP 可靠傳輸的實現-02超時重傳時間的選擇/03選擇確認 SACKTCP