Solved

Update end date after choosing start date

Posted on 2014-12-22
17
197 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
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 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

912 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

24 Experts available now in Live!

Get 1:1 Help Now