Solved

jQuery UI Datepicker question

Posted on 2011-09-14
7
585 Views
Last Modified: 2012-06-22
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


0
Comment
Question by:dovercomputers
[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
  • 3
  • 3
7 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36535181
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
 

Author Comment

by:dovercomputers
ID: 36535252
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
 
LVL 13

Expert Comment

by:ansudhindra
ID: 36535330
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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 

Author Comment

by:dovercomputers
ID: 36535490
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
 
LVL 13

Accepted Solution

by:
ansudhindra earned 500 total points
ID: 36535596
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
 

Author Closing Comment

by:dovercomputers
ID: 36535608
ansudhindra:

You are a hero!

All working now. Thank you very much.

Jim
0
 
LVL 13

Expert Comment

by:ansudhindra
ID: 36535616
You are welcome and thanks for the points..
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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).

726 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