[英]Why timepicker can not be downgraded when choosing a date other than today?
My html code like this : 我的html代码是这样的:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
My JavaScript code like this: 我的JavaScript代码如下:
$(function () {
$('#datepicker').datetimepicker();
$('#timepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
console.log(value)
});
Demo like this: https://jsfiddle.net/8jpmkcr5/89/ 演示像这样: https : //jsfiddle.net/8jpmkcr5/89/
If I click the timepicker and click the decrement hour icon, it does not work. 如果我单击时间选择器,然后单击减量小时图标,则它不起作用。 I know it happens because this code :
minDate: moment().startOf('minute').add(300, 'm')
. 我知道它的发生是因为以下代码:
minDate: moment().startOf('minute').add(300, 'm')
。 I want the code to work only on this day. 我希望代码仅在这一天工作。 Other than today the code does not work
除今天以外,该代码不起作用
How can I do it? 我该怎么做?
Your #datepicker
and #timepicker
are unrelated , they are fully independent , is up to you to relate them. 您的
#datepicker
和#timepicker
是无关的 ,它们是完全独立的 ,取决于您如何关联它们。 You can dinamically set minDate
of #timepicker
using minDate
function. 您可以设置dinamically
minDate
的#timepicker
使用minDate
功能。
You can add a listner for dp.change
event and enable or disable the minDate
for the #timepicker
chceking if the selected day is current day (using momentjs isSame
). 您可以添加一个听者的
dp.change
事件,并启用或禁用minDate
为#timepicker
chceking如果所选一天是当前日期(用momentjs isSame
)。
You have to add minDate
option also to #datepicker
if you want to disable past dates, as you stated in the comments. 如注释中所述,如果要禁用过去的日期,则还必须将
minDate
选项添加到#datepicker
。
Here a working sample: 这是一个工作示例:
$(function () { $('#datepicker').datetimepicker({ minDate: moment().startOf('day') }).on('dp.change', function(e){ if( e.date && e.date.isSame(moment(), 'd') ){ var min = moment().startOf('minute').add(300, 'm'); $('#timepicker').data("DateTimePicker").minDate(min); } else { $('#timepicker').data("DateTimePicker").minDate(false); } }); $('#timepicker').datetimepicker({ minDate: moment().startOf('minute').add(300, 'm'), }); }); $("#btnSubmit").click(function() { value = document.getElementById('datepicker').value; console.log(value) valueTime = document.getElementById('timepicker').value; console.log(valueTime) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" /> </div> </div> <div class='col-sm-6'> <div class="form-group"> <input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" /> </div> </div> </div> </div> <button id="btnSubmit"> Submit </button>
Please note that, as stated before, #datepicker
and #timepicker
are unrelated, so with the #timepicker
you are simply selecting a time, that defaults to current day (no automatic relationship with the selected day using #datepicker
). 请注意,如前所述,
#datepicker
和#timepicker
是不相关的,因此使用#timepicker
您只需选择一个默认为当前日期的时间(使用#datepicker
与所选日期没有自动关系)。
If you want to limit the input to today only, why are you trying to set a limit on the time picker? 如果您只想将输入限制为今天,为什么要设置时间选择器的限制? You should be setting the limit on the date picker
您应该在日期选择器上设置限制
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.