View Full Version : Valid Date Select Menus
LynxGrr
07-08-2004, 04:15 PM
Probably been done may times before but its my very first useful JavaScript! :p
The following script generates three SELECT menu's... one for days one for months and one for years. Each time a new year or a month is selected the menu's are updated to allow only valid dates. Its only just been finished and could probably use commenting more, but im always open to suggestions, advice and criticism.
glenngv
07-09-2004, 12:52 PM
It should have the capability to be used several times in a page. So this should be OO-based.
angst
07-12-2004, 05:15 PM
hmm, how do i use this script in my html pages?
LynxGrr
07-13-2004, 12:24 PM
Youll need 3 DIV tags... should have pointed that out....
<DIV ID="day"></DIV><DIV ID="month"></DIV><DIV ID="year"></DIV>
angst
07-14-2004, 07:39 PM
sorry,
but i must be missing something,,
i tried that, and the page shows up blank..
my code:
<script type="text/javascript" src="ValidDateLists.js"></script>
<DIV ID="day"></DIV><DIV ID="month"></DIV><DIV ID="year"></DIV>
glenngv
07-15-2004, 03:56 AM
You're missing the call to the function that generates the option items.
<body onload="valid_date_lists()">
angst
07-15-2004, 03:46 PM
kool,
ok thats working,
one more thing though,
it seems to be only be showing from this date ( now ) on to the end of the year.
how can i have it just show the whole year?
// Ian Cozens - lynx@nakedhippy.co.uk
// Generates drop down lists that change to allow only valid dates as the year or month is changed
var today = new Date(); // Fixes todays date as a variable
var days_of_month = new Array("31","28","31","30","31","30","31","31","30","31","30","31"); // Total number of days in each month
var month_names = new Array("January","Febuary","March","April","May","June","July","August","September","October","November","December");
function isLeapYear(year) { // Performs a check on a given year to see if its a leap year
return ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) ? true : false;
}
function check_days() { // Re-populate the DAYS select list when month is changed
var selected_month = document.getElementById('month_sel').value;
var selected_year = document.getElementById('year_sel').value;
if(today.getYear() < 1900) { //Check the year... some browsers return a three digit equivalent
this_year = (today.getYear() + 1900);
}
else {
this_year = today.getYear();
}
if((isLeapYear(selected_year) == true) && (selected_month == 2)) {
var max_days = 29;
}
else {
var max_days = days_of_month[selected_month -1];
}
if(((selected_month - 1) == today.getMonth()) && (selected_year == this_year)) { // If selected month is this month and selected year is this year...
start_day = today.getDate(); // ... days start from today ...
}
else {
start_day = 1; // ... otherwise start from 1.
}
var days = '<SELECT ID="day_sel" NAME="day" STYLE=\"font-size: 9;\">';
for(i=start_day ; i<=max_days ; i++) {
days += '<OPTION VALUE="' + i +'">' + i + '</OPTION>';
}
days += '</SELECT>'
document.getElementById("day").innerHTML = days;
}
function check_months() { // Re-populate the MONTHS select list when year is changed
if(today.getYear() < 1900) { //Check the year... some browsers return a three digit equivalent
this_year = (today.getYear() + 1900);
}
else {
this_year = today.getYear();
}
if(document.getElementById('year_sel').value == this_year) { // If the new value matches current year
start_month = today.getMonth() ; // ... start the list using current month as the first choice ...
}
else {
start_month = 0; // ... Otherwise start the months from January
}
var mnth = '<SELECT ID="month_sel" NAME="month" onChange="check_days();" STYLE=\"font-size: 9;\">';
for(x=start_month ; x<12 ; x++) {
mnth += '<OPTION VALUE="' + (x + 1) +'">' + month_names[x] + '</OPTION>';
}
mnth += '</SELECT>'
document.getElementById("month").innerHTML = mnth;
check_days();
}
function valid_date_lists() { // Builds the select lists when the page is loaded
// Deals with the YEAR select list
start_year = today.getYear()
if(start_year < 1900) { start_year = start_year + 1900; }
var yrs = '<SELECT ID="year_sel" NAME="year" onChange="check_months();" STYLE=\"font-size: 9;\">';
for(z=start_year ; z<=(start_year + 5) ; z++) {
yrs += '<OPTION VALUE="' + z +'">' + z + '</OPTION>';
}
yrs += '</SELECT>'
document.getElementById("year").innerHTML = yrs;
// Deals with the MONTH select list
start_month = today.getMonth();
var mnth = '<SELECT ID="month_sel" NAME="month" onChange="check_days();" STYLE=\"font-size: 9;\">';
for(x=(start_month) ; x<12 ; x++) {
mnth += '<OPTION VALUE="' + x +'">' + month_names[x] + '</OPTION>';
}
mnth += '</SELECT>'
document.getElementById("month").innerHTML = mnth;
// Deals with the DAY select list
var max_days = days_of_month[today.getMonth()];
start_day = today.getDate();
var days = '<SELECT ID="day_sel" NAME="day" STYLE=\"font-size: 9;\">';
for(i=start_day ; i<=max_days ; i++) {
days += '<OPTION VALUE="' + i +'">' + i + '</OPTION>';
}
days += '</SELECT>'
document.getElementById("day").innerHTML = days;
}
LynxGrr
07-16-2004, 10:29 AM
I developed the script so as not to show any dates before the current date. By "valid" date I mean "any date in the future and not the past".
Havent got time to tweak it right now. If no one beats me to it ill get it ready for tommorow for you.
angst
07-16-2004, 10:20 PM
kool
thanks!
i've been looking for something just like this,
:thumbsup:
LynxGrr
07-18-2004, 03:37 AM
here you go angst. This one shows all the dates for the selected year plus validates dates for the selected year. Theres two vars at the top for setting how many years forward and how many years back to display.
Hope its useful!
gelnngv: still very new to JavaScript. Only ever used it to validate forms. Could you suggest a site for learning more about OO?
glenngv
07-19-2004, 03:48 AM
gelnngv: still very new to JavaScript. Only ever used it to validate forms. Could you suggest a site for learning more about OO?
http://www.chunkysoup.net/advanced/oojavascript1/
http://www.sitepoint.com/article/470?ct=1
And here are some great OO scripts by beetle.
http://www.peterbailey.net/dev/jsclasses/
angst
07-19-2004, 07:22 PM
hmm,
some parts of the script don't seem to be working,
like if you switch to febuary, then back to january, the days section for january show blank, also seems to be some trouble with the number of days per month.
glenngv
07-20-2004, 09:36 AM
I've whipped up this OO Dropdown Date Picker script (http://www.codingforums.com/showthread.php?p=219639) for you. ;)
Willy Duitt
07-20-2004, 09:51 AM
Attached is a simular script I wrote last year...
It is not quite OOP because I used the two option menu names within the function (I'm sure with a little more work the names can be passed thru the function to make it fully OOP since most of the rest of the functions are reusable, but it fit my needs at the time) :)
.....Willy
Hi all, Just trying desperately to learn about dhtml, (Glenn's being an excellent help to me on another thread) - can anyone let me know what an OOP is please?
Saz
glenngv
07-01-2005, 04:19 AM
There are many tutorials about OOP JS out there.
http://www.webreference.com/js/column80/
http://www.webdevtips.com/webdevtips/article.php?item=73
http://www.developer-x.com/tutorials/oopjs/
For more links, go to "JavaScript Documentation & References" sticky thread in Javascript forum and look for "Object Oriented".
glenmac
07-02-2005, 06:49 AM
OOPs sorry
APSON
02-20-2006, 11:21 AM
The number of days is only corrected after onchange of the month...wouldn't have noticed this if it wasn't February :)
tanhaha_how
02-22-2006, 07:31 AM
wowwwwww...............
This function soooo long...have any other function is shorter and easier than this....
glenngv
02-24-2006, 01:06 PM
wowwwwww...............
This function soooo long...have any other function is shorter and easier than this....
If you're talking about my solution, the whole code may be long but its usage is quite short and easy to understand. In the latest version (http://www.codingforums.com/showthread.php?p=413800#post413796), you can see its sample usage in between these lines
***Sample Usage of DatePicker Start***
...
***Sample Usage of DatePicker End***
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.