本文介绍了为另一个 Bootstrap DateTimePicker 设置 minDate的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
目前,我正在使用 此来源的Bootstrap 3 Datepicker
一个>
我的系统上有 2 个 datetimepicker
.(startTime
, endTime
).
我尝试过,但不知道如何在 startTime
值时从 startTime
值为 endTime
设置 minDate
改变了.即使它不会跳转到 change
事件.
请指出我遗漏了什么.
这是我的代码
非常感谢.
解决方案
您需要使用 更改事件 和 minDate() 等函数>
$('#txtStartTime').datetimepicker({showTodayButton: 真,格式:'MM/DD/YYYY HH:mm',并排:真实,最大日期:时刻()}).on('dp.change', function(e) {$('#txtEndTime').data("DateTimePicker").minDate(e.date)});$('#txtEndTime').datetimepicker({showTodayButton: 真,格式:'MM/DD/YYYY HH:mm',并排:真});
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></脚本><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css"><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></脚本><div class="row">.</div><div class="col-md-3"><input class="form-control datetimepicker" id="txtStartTime" type='text'/>
<div class="col-md-3"><input class="form-control datetimepicker" id="txtEndTime" type='text'/>
Currently, I'm using Bootstrap 3 Datepicker
from this source
I have 2 datetimepicker
on my system. (startTime
, endTime
).
I tried but don't know how to set minDate
for endTime
from startTime
value whenever startTime
value changed. Even it don't jump on change
event.
Please point me what am I missing.
Here is my code
Many thanks.
解决方案
You need to use the change event and minDate() function like
$('#txtStartTime').datetimepicker({
showTodayButton: true,
format: 'MM/DD/YYYY HH:mm',
sideBySide: true,
maxDate: moment()
}).on('dp.change', function(e) {
$('#txtEndTime').data("DateTimePicker").minDate(e.date)
});
$('#txtEndTime').datetimepicker({
showTodayButton: true,
format: 'MM/DD/YYYY HH:mm',
sideBySide: true
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">.</div>
<div class="col-md-3">
<input class="form-control datetimepicker" id="txtStartTime" type='text' />
</div>
<div class="col-md-3">
<input class="form-control datetimepicker" id="txtEndTime" type='text' />
</div>
这篇关于为另一个 Bootstrap DateTimePicker 设置 minDate的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!