Question

我的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。所以我想要它

我该怎么做？如何使自动日期时间值增加？

更新：

文本字段中的时间值是否可以根据当前时间自动增加？

Answer 1

不确定为什么需要它，但你可以使用类似的东西：

$("#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/

Answer 2

您可以每次点击和/或每分钟更新

function updateTime(){
$('#datetimepicker').data("DateTimePicker").date(moment().startOf('minute').add(180, 'm'));
};

$(function () {                
  $('#datetimepicker').datetimepicker({
        minDate: moment().startOf('minute').add(180, 'm'),
    });
});


$("#btnSubmit").click(function() {
    updateTime();
  value = document.getElementById('datetimepicker').value;
  console.log(value)
  });

setInterval(function(){
   updateTime();
},60000);

检查 https://jsfiddle.net/8jpmkcr5/88/

无论如何，选择器的想法是让用户选择，使用它的重点是什么，强迫某些日期？

Answer 3

您可以尝试不同的方法并在提交时添加300分钟，如下所示：

＆＃13;

$(function () {                
    $('#datetimepicker').datetimepicker({
        minDate: moment().startOf('minute').add(300, 'm'),
    });
    
    $("#btnSubmit").click(function() {
        value = document.getElementById('datetimepicker').value;
        var d1 = new Date (),
        d2 = new Date ( value );
        d2.setMinutes ( d1.getMinutes() + 300 );
        console.log(moment(d2).format("YYYY-MM-DD HH:mm:ss"));
    });
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
  <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<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>

＆＃13;

Answer 4

  var date = convertUTCDateToLocalDate(new Date(startdate));
    date = moment(date, 'DD/MM/YYYY HH:mm').format("DD/MM/YYYY HH:mm");
    date = date.toLocaleString();
    $('#datetimepicker7').data("DateTimePicker").date(date);
//Covert date to universal date
function convertUTCDateToLocalDate(date) {
    var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);

    var offset = date.getTimezoneOffset() / 60;
    var hours = date.getHours();

    newDate.setHours(hours - offset);

    return newDate;
}

如何创建动态datetimepicker值？

4 个答案: