如何創建動態datetimepicker值？

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分鐘吧

得到datetime值但如果提交之前，我等了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

你可以嘗試不同的方法，並添加300分鐘提交這樣的：

$(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")); 
 
    }); 
 
});

<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>

Answer 3

您可以每次點擊和/或每分鐘更新一次

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/

不管怎樣撿拾工具的想法是讓用戶選擇，使用，並迫使一些日期有什麼意義？