Solved

Update end date after choosing start date

Posted on 2014-12-22
17
199 Views
Last Modified: 2014-12-22
Hopefully this is something pretty simple. I need to auto change the departure date on the form right below the slideshow here: http://www.hallmarkinns.com/ when someone chooses a different arrival date than the default seen when entering the page. They'll still need to be able to change the departure date if they want.

I assume jQuery is the best option, but I'm very weak in it to figure out how to do it myself.
0
Comment
Question by:Dzynit
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
  • 2
17 Comments
 
LVL 52

Expert Comment

by:Huseyin KAHRAMAN
ID: 40513499
maybe something like this:

$("#input_6_1").change(function(){
   $( "#input_6_2" ).datepicker( "setDate", $(this).datepicker("getDate")+7 );
});
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40513517
jQuery(document).reayd(function() {
  var doThat = function(dateText, inst) {  
        var d = new Date(dateText);
        d.setDate(d.getDate() + 10); // add 10 days
        jQuery(".datepicker[name=Departure]").datepicker("setDate", );
  };
  $(".datepicker[name=Arrival]").datepicker( "option", "onSelect", doThat);
});

Open in new window

0
 
LVL 14

Author Comment

by:Dzynit
ID: 40513531
leakim - nothing happened when I tried yours. It didn't show any errors either.

HainKurt - I change the 7 to 2 to test. The depart date does change, but it jumps to 5 years in the future. That's very strange.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 82

Expert Comment

by:leakim971
ID: 40513536
line 5 should be :
$(".datepicker[name=Departure]").datepicker("setDate", d);
0
 
LVL 52

Expert Comment

by:Huseyin KAHRAMAN
ID: 40513564
try this:

$("#input_6_1").change(function(){
   var t = new Date();
   t.setDate($(this).datepicker("getDate")+7);
   $( "#input_6_2" ).datepicker( "setDate",  t);
});
0
 
LVL 14

Author Comment

by:Dzynit
ID: 40513566
I tried that but the screen went white from the slideshow on. The error was $ is not a function, so I changed the $'s to jQuery. The screen displayed correctly then, but got a new error:

Error: TypeError: jQuery(...).datepicker is not a function
0
 
LVL 14

Author Comment

by:Dzynit
ID: 40513578
My last reply was for leakim.

Hain, That seems a little better. But whether I leave 7 or change that to 2, it set's the depart date 2 days earlier than the start date.
0
 
LVL 52

Expert Comment

by:Huseyin KAHRAMAN
ID: 40513581
i guess you need a bit of checking... you dont want to set departure all the time... maybe once? or maybe when it is lower?

$("#input_6_1").change(function(){
  var d = new Date();

  if ($( "#input_6_2" ).datepicker("getdate") < $(this).datepicker("getDate")) {
    d.setDate($(this).datepicker("getDate")+7);
    $( "#input_6_2" ).datepicker( "setDate", d);
  };
});
0
 
LVL 14

Author Comment

by:Dzynit
ID: 40513584
I'm echoing this code through php, so I changed the " to single quotes. Could that be causing any problems?
0
 
LVL 52

Expert Comment

by:Huseyin KAHRAMAN
ID: 40513591
or more simply:

$("#input_6_1").change(function(){
  if ($( "#input_6_2" ).datepicker("getdate") < $(this).datepicker("getDate")) {
    $( "#input_6_2" ).datepicker( "setDate", $(this).datepicker("getDate")+7);
  };
});
0
 
LVL 14

Author Comment

by:Dzynit
ID: 40513611
That last code made it jump 5 years again. The previous still keeps setting the depart -2 days.
0
 
LVL 52

Expert Comment

by:Huseyin KAHRAMAN
ID: 40513646
here it is :)

$("#input_6_1").datepicker();
$("#input_6_2").datepicker();

$("#input_6_1").change(function () {
    //alert($(this).datepicker("getDate"));
    //alert($("#input_6_1").datepicker("getDate"));
    //alert($("#input_6_2").datepicker("getDate"));

    if ($("#input_6_2").datepicker("getDate") < $(this).datepicker("getDate")) {
        var d = new Date();
        d.setDate($(this).datepicker("getDate").getDate() + 7);
        $("#input_6_2").datepicker("setDate", d);
    };
});

Open in new window


test it here
0
 
LVL 14

Author Comment

by:Dzynit
ID: 40513668
That gives me "datepicker is not a function" error.
I have to keep changing the $ to jQuery, but then that datepicker error shows.
0
 
LVL 52

Accepted Solution

by:
Huseyin KAHRAMAN earned 500 total points
ID: 40513719
why JavaScript date is too difficult to work :) here is modified version

$("#input_6_1").change(function () {
    //alert($(this).datepicker("getDate"));
    //alert($("#input_6_1").datepicker("getDate"));
    //alert($("#input_6_2").datepicker("getDate"));

    if ($("#input_6_2").datepicker("getDate") < $(this).datepicker("getDate")) {
        var d = new Date();
       
        d.setTime($(this).datepicker("getDate").getTime() + 7*24*60*60*1000);
        $("#input_6_2").datepicker("setDate", d);
    };
});

Open in new window


this one is adding 7 days... test here
0
 
LVL 52

Expert Comment

by:Huseyin KAHRAMAN
ID: 40513741
try adding this to your html, as is:

jQuery(document).ready(function($){

$("#input_6_1").change(function () {
    if ($("#input_6_2").datepicker("getDate") < $(this).datepicker("getDate")) {
        var d = new Date();
       
        d.setTime($(this).datepicker("getDate").getTime() + 7*24*60*60*1000);
        $("#input_6_2").datepicker("setDate", d);
    };
});

});

Open in new window

0
 
LVL 14

Author Comment

by:Dzynit
ID: 40513764
That previous worked great! I took the less than (<) check out because they always want it to auto to x days when arrival is changed. Then the customer can still re-change the depart date for a longer stay. Main reason is that there's a minimum stay at each resort location and the company didn't feel it was professional looking that the depart date could show earlier than the arrival. Now I just need to set the amount of days in my php according to which resort location a person is on. And that I know how to do ;)

Here's the final code I used:

jQuery('#input_6_1').change(function () {
        var d = new Date();
        d.setTime(jQuery(this).datepicker('getDate').getTime() + 2*24*60*60*1000);
        jQuery('#input_6_2').datepicker('setDate', d);    
});

Open in new window

0
 
LVL 14

Author Closing Comment

by:Dzynit
ID: 40513767
Thank you very much! Sorry it went from being simple to such a testy task.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question