将datetimepicker值传递给另一个datetimepicker并添加12个小时

时间:2017-05-24 02:26:45

标签: jquery twitter-bootstrap datetimepicker

我想将datetimepicker1中的值传递给datetimepicker2,并在datetimepicker2上添加12hours。

将值从datetimepicker传递到datetimepicker2正在处理我的代码 但是如何在datetimepicker2上添加12小时?

<div class="row">
  <div class="col-md-12">
    <form id="form1" method="post">
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type="text" id="r_from"  name="r_from" class="form-control" >
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker2'>
          <input type="text" id="r_until"  name="r_until" class="form-control" ><br>
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
      <input type="submit" name="check_cottage" value="Check Availability">
    </form>
  </div>

<script type="text/javascript">
$(function () {
  $('#datetimepicker1').datetimepicker();
  $('#datetimepicker2').datetimepicker({
    useCurrent: false //Important! See issue #1075
  });

  $("#datetimepicker1").on("dp.change", function (e) {
    $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
  });

  $("#datetimepicker2").on("dp.change", function (e) {
    $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
  });
});
</script>

<script type="text/javascript">
var form = document.getElementById('form1');
form.elements.r_from.onblur = function () {
  var form = this.form;
  form.elements.r_until.value = form.elements.r_from.value;
};
</script>

1 个答案:

答案 0 :(得分:0)

最后这不是一件容易的事 我在控制台中快速修复了一个关于Tether lib丢失的错误...

然后我用Moment对象格式化玩了很多 这很有效,因为文档真的很好 问题是找到BootStrap DateTimePicker期望的日期格式...

我从一开始就质疑我认为正确的事情需要时间 喜欢这个选项:

useCurrent:false //Important! See issue #1075

并设置日期......不仅是maxDate,还有第二个DP的日期......
我发现它只是猜测...因为文档是&amp; $?%!

$('#datetimepicker2').data("DateTimePicker").date( [the new date + 12h] );

它奏效了!
查看更新后的Fiddle

$(function () {
  $('#datetimepicker1').datetimepicker();
  $('#datetimepicker2').datetimepicker({
    useCurrent:"year"
  });

  $("#datetimepicker1").on("dp.hide", function (e) {
    console.log("From DP: "+e.date);

    var momentDate = moment(e.date);
    console.log("DP1 Moment hour: "+momentDate.hour());

    var improvedDate = moment(e.date).add(12,"hour");
    console.log("DP2 Moment date: "+improvedDate.hour());

    var improvedDateForDP = improvedDate.format("MM/DD/YYYY hh:mm:ss A");
    console.log("DP2 Moment hour: "+improvedDateForDP);

    $('#datetimepicker2').data("DateTimePicker").minDate(improvedDate);
    $('#datetimepicker2').data("DateTimePicker").date(improvedDate);
  });

  $("#datetimepicker2").on("dp.change", function (e) {
    $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
  });

});

我离开了所有的console.logs ......