?
Solved

Update end date after choosing start date

Posted on 2014-12-22
17
Medium Priority
?
208 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 58

Expert Comment

by:HainKurt
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
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 
LVL 82

Expert Comment

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

Expert Comment

by:HainKurt
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 58

Expert Comment

by:HainKurt
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 58

Expert Comment

by:HainKurt
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 58

Expert Comment

by:HainKurt
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 58

Accepted Solution

by:
HainKurt earned 2000 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 58

Expert Comment

by:HainKurt
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
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…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

762 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