为另一个 Bootstrap DateTimePicker 设置 minDate [英] Set minDate for Bootstrap DateTimePicker from another

问题描述

目前，我正在使用 此来源的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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！