将小时添加到datetimepicker(日期选择器)

在处理日期和表单时，我喜欢使用日期选择器，这些允许用户使用日历来选择日期并以 mysql 可以存储的格式保存日期。我最近需要从日期和时间选择器中更改时间，例如从日期和时间中选择一个，能够将选择的日期和时间复制到另一个输入但随着时间增加一个，这将非常有用小时。 

jQuery 使这很容易做到。从输入的 from 和 to 开始，重要的部分是 id，id 是 jQuery 用来读取和更新的内容。

<p>From:<br><input id='from' name='from' class='datetimepicker' type="text" value="" /></p>
<p>To:<br><input id='to' name='to' class='datetimepicker' type="text" value="" /></p>

使用的日期选择器来自http://trentrichardson.com/examples/timepicker/ 它需要包含 jQuery 和 jQuery UI。 

调用日期时间选择器：

$('body').on('click', '.datetimepicker', function() {
      $(this).not('.hasDateTimePicker').datetimepicker({changeMonth: true,changeYear: true,dateFormat: "yy-mm-dd",timeFormat: 'HH:mm:00',yearRange: "1900:+10",showOn:'focus'}).focus();
 });

这使得可以在任何输入上使用类 datetimepicker 来显示选择器。

接下来使用#from 作为标识符读取它的内容并从输入日期创建一个新的 javascript 日期，将其分解为月、年、日、小时、分钟和秒部分，然后将新的格式化日期放在一起。

使用的切片是为了确保个位数始终是两位数。在小时变量结束时使用 +1 将小时加 1。 

最后，新日期被添加到输入中，id 为 to

//update date with an id of from into an id of to
$('#from').change(function () {
    var d = $('#from').val();
    d = new Date(d);

    var month = ('0' + (d.getMonth()+1)).slice(-2);
    var year = d.getFullYear();
    var day = ('0'+d.getDate()).slice(-2);

    var hour = d.getHours()+1;
    var min = ('0'+d.getMinutes()).slice(-2);
    var sec = ('0'+d.getMilliseconds()).slice(-2);

    newdate = year+'-'+month+'-'+day+' '+hour+':'+min+':'+sec;
    $('#to').val(newdate);
});