Advanced Search

Simple javascript date select

/ Published in: JavaScript
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript">
  2.  
  3. /***********************************************
  4. * Drop Down Date select script- by JavaScriptKit.com
  5. * This notice MUST stay intact for use
  6. * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more
  7. ***********************************************/
  8.  
  9. var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
  10.  
  11. function populatedropdown(dayfield, monthfield, yearfield){
  12. var today=new Date()
  13. var dayfield=document.getElementById(dayfield)
  14. var monthfield=document.getElementById(monthfield)
  15. var yearfield=document.getElementById(yearfield)
  16. for (var i=0; i<31; i++)
  17. dayfield.options[i]=new Option(i, i+1)
  18. dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
  19. for (var m=0; m<12; m++)
  20. monthfield.options[m]=new Option(monthtext[m], monthtext[m])
  21. monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
  22. var thisyear=today.getFullYear()
  23. for (var y=0; y<20; y++){
  24. yearfield.options[y]=new Option(thisyear, thisyear)
  25. thisyear+=1
  26. }
  27. yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
  28. }
  29.  
  30. </script>
  31.  
  32. /* usage */
  33. <form action="" name="someform">
  34. <select id="daydropdown">
  35. </select> 
  36. <select id="monthdropdown">
  37. </select> 
  38. <select id="yeardropdown">
  39. </select> 
  40. </form>
  41.  
  42. <script type="text/javascript">
  43. //populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
  44. window.onload=function(){
  45. populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
  46. }
  47. </script>

URL: http://www.javascriptkit.com/script/script2/curdateform2.shtml

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.