pass datetimepicker value to another datetimepicker and add 12 hours

Question

I want to pass the value from datetimepicker1 to datetimepicker2 and add 12hours on datetimepicker2.

Passing value from datetimepicker to datetimepicker2 is working on my code.
But how can I add 12 hours on datetimepicker2?

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

I suppose you are looking for this answer: https://stackoverflow.com/questions/1050720/adding-hours-to-javascript-date-object — Oleksii Aza, May 24 '17 at 02:30
Possible duplicate of [JQuery DateTimePicker add hours](https://stackoverflow.com/questions/14551333/jquery-datetimepicker-add-hours) — Louys Patrice Bessette, May 24 '17 at 02:36
@LouysPatriceBessette i already tried this solution but does'nt work — Lawrence Revano, May 24 '17 at 02:40

Louys Patrice Bessette · Accepted Answer · 2017-05-24T05:04:08.667

0

It finally wasn't an easy one.
I quickly fixed an error in console about Tether lib missing...

Then I played a lot with Moment object formatting.
This worked great, since the documentation is real good.
The thing was to find what BootStrap DateTimePicker was expecting as a date format...

It took time to question things I assumed as correct from start.
like this option:

useCurrent:false //Important! See issue #1075

And to set the date... Not only the maxDate, but the date of the second DP...
I found it by just guessing... Since the documentation is &$?%!

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

And it worked!
See your updated 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);
  });

});

I left all console.logs...

edited May 24 '17 at 05:04

answered May 24 '17 at 02:48

Louys Patrice Bessette

33,375
6
36
64

does not add 12 hours on my datetimepicker2 only pass the value of datetimepicker1 – Lawrence Revano May 24 '17 at 02:53
Okay... I will try it on CodePen, then. First, is it jQuery DateTimePicker or BootStrap DateTimePicker? (I have to load the correct CDN) (I retracted my vote to close) – Louys Patrice Bessette May 24 '17 at 03:00
[jsfiddle](https://jsfiddle.net/8j4hx11h/1/) this is the my running codes and resources – Lawrence Revano May 24 '17 at 03:03
I finally got it! ;) Give me a couple minutes to clean the code and edit my answer. – Louys Patrice Bessette May 24 '17 at 03:51
what glitch? can you tell me so i can help – Lawrence Revano May 24 '17 at 04:20
can i ask one more question? can i limit the days on datetimepicker2 like if i choose 05/24/2017 on datetimepicker1, only 05/25/2017 nd 05/26/2017will be available on the datetimepicker2 and others will be disabled? datetimpicker will only have 2 max date base on the date on datetimepicker1 thank you. – Lawrence Revano May 24 '17 at 05:15
Yes... This is the maxDate parameter. Actually, the minDate is set to the date/time took from DP1 +12hours. But you could also set the maxDate to DP1 +2 days the same way. – Louys Patrice Bessette May 24 '17 at 05:22
okay i think the code for hours and the code for the maxdate on Date is same – Lawrence Revano May 24 '17 at 05:26
You just have to var a new date object for it, something like `var newMaxDate = moment(e.date).add(2,"day");` and apply it to maxDate. – Louys Patrice Bessette May 24 '17 at 05:28
var newMaxDate = moment(e.date).add(2,"day"); $('#datetimepicker2').data("DateTimePicker").maxDate(newMaxDate); like this? – Lawrence Revano May 24 '17 at 05:34
Yes, exactly ;) – Louys Patrice Bessette May 24 '17 at 05:35
1

ok thanks to you :)) its working :) my code now is working :D many thanks :)) u save my life – Lawrence Revano May 24 '17 at 05:36
w8 just a second why selected date is also disabled? – Lawrence Revano May 24 '17 at 05:37
You should adjust the min date to something else. It now is DP1 + 12h... But it may be DP -1 day. it would be `var newMinDate = moment(e.date).substract(1,"day"); ` – Louys Patrice Bessette May 24 '17 at 05:40
Here is the doc about Moment date manipulation : https://momentjs.com/docs/#/manipulating/ – Louys Patrice Bessette May 24 '17 at 05:45

pass datetimepicker value to another datetimepicker and add 12 hours

1 Answers1