jQuery UI Datepicker question

Hello experts!

I have two jQuery UI date pickers on a form, and what I need is the second date picker to default to whatever is chosen in the first date + 7 days.

I have searched for an example but cannot find anything that fits.

This is what I have so far, 2 independent date pickers that are working fine working fine.

Can you help?

Thanks
Jim

     <script>
	$(function() {
	$( "#datepicker1" ).datepicker({dateFormat:'dd/mm/yy',numberOfMonths:3, minDate: +0});
	$( "#datepicker2" ).datepicker({dateFormat:'dd/mm/yy',numberOfMonths:3, minDate: +1});
	});
	</script>

Open in new window


dovercomputersAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
ansudhindraConnect With a Mentor Commented:
check this..
 
$( "#datepicker1" ).datepicker({dateFormat:'dd/mm/yy',numberOfMonths:3, minDate: +0, onSelect: function( selectedDate ) {
            var sda = selectedDate.split("/");
			var d=new Date(sda[1]+"/"+sda[0]+"/"+sda[2]);
			
            d.setDate(d.getDate() + 7);
            $( "#datepicker2" ).val(d.getDate()+"/"+(d.getMonth()+1)+"/"+d.getFullYear());
      } });
		$( "#datepicker2" ).datepicker({dateFormat:'dd/mm/yy',numberOfMonths:3});

Open in new window

0
 
Gurvinder Pal SinghCommented:
after the date is selected from the first one, fetch that selected date
http://jqueryui.com/demos/datepicker/#method-getDate

at the event of selection of date
http://jqueryui.com/demos/datepicker/#event-onSelect

and set the new default date using
http://jqueryui.com/demos/datepicker/#method-setDate
0
 
dovercomputersAuthor Commented:
The links didn't seem to work for me, but I have found the relevant pages.

OK, so I can follow the logic but I am lost in where to incorporate it.

For instance, the getDate, do I include it in the same instance of datepicker1, something along the lines of
$( "#datepicker1" ).datepicker({dateFormat:'dd/mm/yy',numberOfMonths:3, minDate: +0}, "getDate");

Open in new window

or do I put this after
$( "#datepicker1" ).datepicker({dateFormat:'dd/mm/yy',numberOfMonths:3, minDate: +0});
$( "#datepicker1" ).datepicker("getDate");
$( "#datepicker2" ).datepicker({dateFormat:'dd/mm/yy',numberOfMonths:3, minDate: +1});

Open in new window

or should it be something like this
$('#datepicker1').datepicker({
   onSelect: function(dateText, inst) {"getDate"}
});

Open in new window


Sorry if these are stupid questions, but I am learning jQuery.

Could you possibly give me an example that I can follow showing how I could incorporate the code into mine?

Thanks
Jim
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
ansudhindraCommented:
try below one...  (try this by copying this in to the development-bundle/demos of jquery UI download)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.6.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker({onSelect: function( selectedDate ) { 
				var d=new Date(selectedDate);
				d.setDate(d.getDate() + 7);
				$( "#datepicker2" ).val((d.getMonth()+1)+"/"+d.getDate()+"/"+d.getFullYear());
			}
		});
		$( "#datepicker2" ).datepicker();
	});
	</script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>
<p>Date: <input type="text" id="datepicker2"></p>

</div><!-- End demo -->



<div class="demo-description">
<p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->

</body>
</html>

Open in new window


all needed is to add one option "onSelected" to the datepicker..

$( "#datepicker" ).datepicker({onSelect: function( selectedDate ) {
                        var d=new Date(selectedDate);
                        d.setDate(d.getDate() + 7);
                        $( "#datepicker2" ).val((d.getMonth()+1)+"/"+d.getDate()+"/"+d.getFullYear());
                  }
            });

$( "#datepicker2" ) == is the second date picker element
0
 
dovercomputersAuthor Commented:
OK, almost there. The date in the second date field changes when the date is selected from the first date field. The formatting and calculation of the date however is screwed up on the second date field.

I have looked at the javascript date function and it looks ok to me.

My code so far is now
     <script>
	$(function() {
	$( "#datepicker1" ).datepicker({dateFormat:'dd/mm/yy',numberOfMonths:3, minDate: +0, onSelect: function( selectedDate ) {
                        var d=new Date(selectedDate);
                        d.setDate(d.getDate() + 7);
                        $( "#datepicker2" ).val(d.getDate()+"/"+(d.getMonth()+1)+"/"+d.getFullYear());
                  } });
	$( "#datepicker2" ).datepicker({dateFormat:'dd/mm/yy',numberOfMonths:3});
	});
	</script>

Open in new window


You can see it in action HERE

Any ideas on how to fix it?

Many thanks
Jim
0
 
dovercomputersAuthor Commented:
ansudhindra:

You are a hero!

All working now. Thank you very much.

Jim
0
 
ansudhindraCommented:
You are welcome and thanks for the points..
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.