如何创建动态的datetimepicker值? [英] How to create dynamic datetimepicker value?
问题描述
我的HTML代码如下:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
console.log(value)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/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='datetimepicker' />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
像这样的演示: https://jsfiddle.net/oscar11/8jpmkcr5/83/
如果我单击提交"按钮,则从现在开始成功获取日期时间值300分钟
但是,如果我在提交之前等待了10分钟,结果与我的期望不符
例如现在在6点.在提交之前,我需要等待10分钟.提交后,我得到的时间值为11.10.所以我想喜欢
我该怎么做? 如何使日期时间值自动增加?
更新:
是否可以基于当前时间自动增加文本字段中的时间值?
不确定为什么会需要它,但可以使用类似以下的东西:
$("#btnSubmit").click(function() {
var targetDate = new Date(new Date().getTime() + (300 * 60 * 1000));
$('#datetimepicker').data("DateTimePicker").date(targetDate);
value = document.getElementById('datetimepicker').value;
console.log(targetDate, value);
});
单击时,它将datetimepicker更改为当前日期+ 300分钟. 我已经更新了示例: https://jsfiddle.net/8jpmkcr5/86/ >
根据您的最新评论,我相信您希望用户能够选择日期(日/月/年),但时间(小时/分钟)会随着时间推移而变化,直到当前时间+ 3小时.如果是这样,您可以使用类似以下内容的方法:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(180, 'm'),
});
});
setInterval(function(){
var pickedDate = $('#datetimepicker').data('DateTimePicker').date();
var currentDate = moment();
pickedDate = pickedDate.set({
'hour' : currentDate.get('hour') + 3,
'minute' : currentDate.get('minute'),
'second' : currentDate.get('second')
});
$('#datetimepicker').data("DateTimePicker").date(pickedDate);
},1000);
您可以在此处进行测试: https://jsfiddle.net/8jpmkcr5/98/
My HTML code like this:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
console.log(value)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/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='datetimepicker' />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
Demo like this : https://jsfiddle.net/oscar11/8jpmkcr5/83/
If I click submit button, I successfully get the datetime value 300 minutes from now
But if before submitting, I wait 10 minutes, the result does not match my expectations
For example now at 6 o'clock. Before submit I wait 10 minutes. After submit, the time value I get is 11.10. So I want to like it
How can I do that? How do I make the automatic datetime value increase?
Update :
Whether the time value in textfield can be automatically increased based on current time?
Not sure why would you need it, but you can use something like:
$("#btnSubmit").click(function() {
var targetDate = new Date(new Date().getTime() + (300 * 60 * 1000));
$('#datetimepicker').data("DateTimePicker").date(targetDate);
value = document.getElementById('datetimepicker').value;
console.log(targetDate, value);
});
On click, it will change the datetimepicker to the current date + 300 minutes. I've updated the example: https://jsfiddle.net/8jpmkcr5/86/
EDIT: Based on your latest comment, i believe you want the use to be able to pick the date (day/month/year) but the time (hour/minutes) keep changing as time passes to current time + 3 hours. If thats the case you can use something like:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(180, 'm'),
});
});
setInterval(function(){
var pickedDate = $('#datetimepicker').data('DateTimePicker').date();
var currentDate = moment();
pickedDate = pickedDate.set({
'hour' : currentDate.get('hour') + 3,
'minute' : currentDate.get('minute'),
'second' : currentDate.get('second')
});
$('#datetimepicker').data("DateTimePicker").date(pickedDate);
},1000);
You can test here: https://jsfiddle.net/8jpmkcr5/98/
这篇关于如何创建动态的datetimepicker值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!