Solved

Update end date after choosing start date

Posted on 2014-12-22
17
196 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
  • 8
  • 7
  • 2
17 Comments
 
LVL 51

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

Expert Comment

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

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 51

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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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 51

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 51

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 51

Accepted Solution

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

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

746 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now