Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jQuery UI Datepicker question

Posted on 2011-09-14
7
Medium Priority
?
605 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
  • 3
  • 3
7 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 2000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
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).
Suggested Courses

876 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