bootstrap 的 datetimepicker,同時有日期和時間, 且開始時間要早於結束時間
阿新 • • 發佈:2018-11-11
開始時間和結束時間的選擇
<div class="form-group">
<label class="col-md-2 control-label">開始時間</label>
<div class="input-group date form_datetime col-md-5" id="start_datetime" data-date="2018-10-16T05:25:07Z"
data-date-format="yyyy-mm-dd HH:ii" data-link-field="dtp_input1">
<input class="form-control" size="6" type="text" id="start_datetime_input" name="start_datetime" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
< span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_input1" value=""/><br/>
</div>
<div class="form-group">
<label class="col-md-2 control-label">結束時間</ label>
<div class="input-group date form_datetime col-md-5" id="end_datetime" data-date="2018-10-16T05:25:07Z"
data-date-format="yyyy-mm-dd HH:ii" data-link-field="dtp_input1">
<input class="form-control" size="6" type="text" id="end_datetime_input" name="end_datetime" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_input1" value=""/><br/>
<span id='end_validator' style="color: red">hello</span>
</div>
js程式碼,主要是使用datetimepicker的 setStartDate和setEndDate兩個函式來設定顯示。
$('.form_datetime').datetimepicker({ //language: 'fr', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, showMeridian: 1 }); const dateOptions = { language: 'zh-CN', format: 'yyyy-mm-dd HH:ii', minuteStep: 1, autoclose: true }; $('#start_datetime').datetimepicker(dateOptions).on('show', function () { const endTime = $('#end_datetime_input').val(); console.log('endTime') console.log(endTime) if (endTime !== '') { $(this).datetimepicker('setEndDate', endTime); } else { $(this).datetimepicker('setEndDate', null); } }); $('#end_datetime').datetimepicker(dateOptions).on('show', function () { const startTime = $('#start_datetime_input').val(); if (startTime !== '') { $(this).datetimepicker('setStartDate', startTime); } else { $(this).datetimepicker('setStartDate', null); } });
效果如下:先選擇開始日期,再選擇結束日期時,會發現前邊的日期都變為灰色,不能選中