从另一个设置 Bootstrap DateTimePicker 的 minDate
Set minDate for Bootstrap DateTimePicker from another
目前,我正在使用来自 this source
的 Bootstrap 3 Datepicker
我的系统上有 2 个 datetimepicker
。 (startTime
, endTime
).
我尝试过,但不知道如何在 startTime
值更改时从 startTime
值为 endTime
设置 minDate
。即使它不跳到 change
事件。
请指出我遗漏了什么。
非常感谢。
您需要像
一样使用change event and minDate()函数
$('#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>
目前,我正在使用来自 this source
的Bootstrap 3 Datepicker
我的系统上有 2 个 datetimepicker
。 (startTime
, endTime
).
我尝试过,但不知道如何在 startTime
值更改时从 startTime
值为 endTime
设置 minDate
。即使它不跳到 change
事件。
请指出我遗漏了什么。
非常感谢。
您需要像
一样使用change event and minDate()函数$('#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>