Solved

jQuery UI Datepicker question

Posted on 2011-09-14
7
569 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: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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to use embargo Date/time in php 29 39
More SharePoint App with Angular and Bootstrap 17 50
Jquery keyup 4 20
Not allowed to load local recource. 4 13
Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
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…

810 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