close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Date picker Range of years

Thread began 3/21/2011 6:04 am by info383475 | Last modified 8/04/2014 11:28 am by Jason Byrnes | 1531 views | 5 replies |

info383475

Date picker Range of years

I want to use the date picker helping the users to select their birthday. So I need a possibility to customize the range of the years that will be shown. How can I do this?

Sign in to reply to this post

Jason ByrnesWebAssist

on your page, there will be code similar to this:

$(function(){
$('#datepicker_1').datepicker({
dateFormat: 'mm/dd/yy',
showAnim: 'show',
onClose: closeDatePicker_datepicker_1
});
});




that creates the date picker object.

you can add minDate and maxDate arguments to restrict the date range that will be displayed by the date picker:

$(function(){
$('#datepicker_1').datepicker({
dateFormat: 'mm/dd/yy',
showAnim: 'show',
onClose: closeDatePicker_datepicker_1,
minDate: new Date(2010, 0, 1),
maxDate: new Date(2012, 11, 31)
});
});



this sets the available date range to 1/1/2010 and 12/31/2012

Sign in to reply to this post

dataworks388155

Code Not found

Originally Said By: Jason Byrnes
  on your page, there will be code similar to this:
$(function(){
$('#datepicker_1').datepicker({
dateFormat: 'mm/dd/yy',
showAnim: 'show',
onClose: closeDatePicker_datepicker_1
});
});



that creates the date picker object.

you can add minDate and maxDate arguments to restrict the date range that will be displayed by the date picker:
$(function(){
$('#datepicker_1').datepicker({
dateFormat: 'mm/dd/yy',
showAnim: 'show',
onClose: closeDatePicker_datepicker_1,
minDate: new Date(2010, 0, 1),
maxDate: new Date(2012, 11, 31)
});
});


this sets the available date range to 1/1/2010 and 12/31/2012  



My Datepicker does not contain any code like this. I am finding

<script type="text/javascript">
$(function(){
$('#Registration_group_1_Date_Of_Birth').datepicker({
changeMonth: true,
changeYear: true,
onClose: closeDatePicker_Registration_group_1_Date_Of_Birth
});
});
function closeDatePicker_Registration_group_1_Date_Of_Birth() {
var tElm = $('#Registration_group_1_Date_Of_Birth');
if (typeof Registration_group_1_Date_Of_Birth_Spry != null && typeof Registration_group_1_Date_Of_Birth_Spry != "undefined") {
Registration_group_1_Date_Of_Birth_Spry.validate();
}
var docElm = document.getElementById("Registration_group_1_Date_Of_Birth");
var tBlur = docElm.getAttribute("onBlur");
if (!tBlur) tBlur = docElm.getAttribute("onblur");
if (!tBlur) tBlur = docElm.getAttribute("ONBLUR");
if (tBlur) {
tBlur = tBlur.replace(/\bthis\b/g, "docElm");
eval(tBlur);
}
}

var Registration_group_First_Name_Spry = new Spry.Widget.ValidationTextField("Registration_group_First_Name_Spry", "none",{validateOn:["blur"]});
var Registration_group_Last_Name_Spry = new Spry.Widget.ValidationTextField("Registration_group_Last_Name_Spry", "none",{validateOn:["blur"]});
var Registration_group_Email_Spry = new Spry.Widget.ValidationTextField("Registration_group_Email_Spry", "none",{validateOn:["blur"]});
var Registration_group_SK_Name_Spry = new Spry.Widget.ValidationTextField("Registration_group_SK_Name_Spry", "none", { is_unique:true , validateOn:["blur"]});
var Registration_group_Password_Spry = new Spry.Widget.ValidationPassword("Registration_group_Password_Spry", { isRequired:true , validateOn:["blur"]});
var Registration_group_Confirm_Spry = new Spry.Widget.ValidationConfirm("Registration_group_Confirm_Spry", "Registration_group_Password",{validateOn:["blur"]});
var Registration_group_1_Date_Of_Birth_Spry = new Spry.Widget.ValidationTextField("Registration_group_1_Date_Of_Birth_Spry", "date", { format:'mm/dd/yyyy' , validateOn:["blur"]});</script>
</div>

<script type="text/javascript">
<!--
var Registration_group_1_FaceBook_Profile_Spry = new Spry.Widget.ValidationTextField("Registration_group_1_FaceBook_Profile_Spry", "url",{validateOn:["blur"]});
//-->
</script>

How do I set it to show dates before 2002?

Sign in to reply to this post

Jason ByrnesWebAssist

the code that defines the date picker in the code you posted is:

$(function(){
$('#Registration_group_1_Date_Of_Birth').datepicke r({
changeMonth: true,
changeYear: true,
onClose: closeDatePicker_Registration_group_1_Date_Of_Birth
});
});




you can add the min and max date lines to that code:

$(function(){
$('#Registration_group_1_Date_Of_Birth').datepicke r({
changeMonth: true,
changeYear: true,
minDate: new Date(2000, 0, 1),
maxDate: new Date(2012, 11, 31),
onClose: closeDatePicker_Registration_group_1_Date_Of_Birth
});
});



to show date before 2002, set the min date to use a year prior to 2002, for example:
minDate: new Date(2000, 0, 1),

Sign in to reply to this post

bjgarner241692

I have a related request, but I cannot hard code it to a date range.
User needs to pick year of their birth. Drop down allows the functionality but it is a little clunky in that it defaults to a range of 2004 to 2023. User can reselect to get 1984 to 2003 but it is not overly intuitive because they have to first pick 2004, then reselect. I do not need any forward dates at all and I would like the user to be able to scroll through the years rather than have to reselect.

Sign in to reply to this post

Jason ByrnesWebAssist

Use the year range option, and echo the current year using php date as the max year:


$(function(){
$('#datepicker_1').datepicker({
dateFormat: 'mm/dd/yy',
showAnim: 'show',
changeYear: 'true',
yearRange: "1939:<?php echo(date("Y")); ?>",
onClose: closeDatePicker_datepicker_1
});
});



that will set the year range in the year select list to 1939 - 2014


more details on the date picker api can be found here:
http://api.jqueryui.com/datepicker/#option-yearRange

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...