Drop Down Date select

Started by ganeshbala, Apr 15, 2009, 02:53 PM

Previous topic - Next topic
Go Down Pages1

ganeshbala

Apr 15, 2009, 02:53 PM
Drop Down Date select

STEP 1 - Insert the following script into the <HEAD> section of your page:

Code Select
<script type="text/javascript">

/***********************************************
* Drop Down Date select script- by JavaScriptKit.com
* This notice MUST stay intact for use
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more
***********************************************/

var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];

function populatedropdown(dayfield, monthfield, yearfield){
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i  )
dayfield.options[i]=new Option(i, i 1)
dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m  )
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y  ){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear =1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}

</script>

STEP 2 Add the below form into the <BODY> section:
Code Select

<form action="" name="someform">
<select id="daydropdown">
</select>
<select id="monthdropdown">
</select>
<select id="yeardropdown">
</select>
</form>

<script type="text/javascript">

//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
</script>



Description: This script displays the current date inside a form via 3 prefilled drop down menus (day, month, year). The visitor can then specify a different date if he/she wants. You can have multiple drop down dates within the same form as well.

Source : javascript kit
Go Up Pages1