How to change date in jquery based on other date

Question

I have a simple PHP FORM:

<form>
  Date of dispatch<br>
  <input type="datetime" name="date_dispatch" id="date_dispatch" value="2016-04-26 10:00:00"><br>
  Expected delivery timne<br>
  <input type="datetime" name="date_delivery" id="date_delivery">
  <br>
  <input type="submit" value="Submit">
</form>

User can specify first date (when to collect a parcel) and the second field should be a date of expected delivery. However delivery time can't be earlier than 3 hors later then collet time. How to use a AJAX/JQUERY to change the value of date_delivery to automatically calculated based on date_dispatch +3 hours.

I am trying some tests but without a result:

$(document).ready(function(){

    $('#date_dispatch').change(function() {
    document.getElementById('date_delivery').value = 'test';
  });

});

This is my test fiddle: https://jsfiddle.net/xr7cm6w7/

Will appreciate any help

ajax is for communicating with a server. you just want javascript (with possibly jquery layered on top). — Marc B, Apr 26 '16 at 18:35

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

you don't need to use AJAX as long as you want to display this value only. Use the javascript Date object on the first input change function

here sth more about this

edited May 23 '17 at 12:31

Community

1
1

answered Apr 26 '16 at 19:03

kejsu

384
2
5

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

Here's a function that handles it using jQUery:

$(document).ready(function(){
  $('#date_dispatch').change(function() {
    // Get current dispatch time
    var time = new Date($('#date_dispatch').val());

    // Add 3 hours
    time.setTime(time.setHours(time.getHours()+3));

    // Set delivery time
    $('#date_delivery').val(time.toString());
  });
});

Here's the jsfiddle: https://jsfiddle.net/mewcg3zo/10/

You'll notice the formatting isn't the same, you'll have to do some extra work to get the date string back to how you want it. You can look here for some tips on how to do that. Javascript format date / time

edited May 23 '17 at 12:16

Community

1
1

answered Apr 26 '16 at 19:07

xCRKx TyPHooN

808
5
18

Hello, thanx for contribution but this is not working, when I am changing the first date I can see only text in second field 'Invalid Date', instead of date (even in other date format). Or this need to be modified first to change the date? – Tikky Apr 26 '16 at 19:52
It works, but there are some things you'll need to check for validation. An empty string, letters or even just a time like 1:00 PM won't work with this implementation. – xCRKx TyPHooN Apr 26 '16 at 20:00
I am just changing an hour: "2016-04-26 10:00:00" to for example "2016-04-26 11:00:00" and can see only an 'invalid date' – Tikky Apr 26 '16 at 20:02
Does it work for you in jsfiddle? If it does it must be something locally. What browser are you using? – xCRKx TyPHooN Apr 26 '16 at 20:04
I am using Safari on MacOS and this is not working in jfiddle. I've tried also a Firefox - the same. – Tikky Apr 26 '16 at 20:18
Looks like there can be some issues with Date on Safari. http://stackoverflow.com/questions/4310953/invalid-date-in-safari – xCRKx TyPHooN Apr 26 '16 at 20:20
Hello again. I've just tried your dolution on my PC with FIrefox, and works fine :-) But on MacOS (both Firefox and Safari) won't work. Thank you for contribution. – Tikky Apr 28 '16 at 10:48

How to change date in jquery based on other date

2 Answers2