Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to generate date selector using in website

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 85
    Comment on it

    Hello Reader's if want to generate the date selector then you can use the Javascript. By choosing JS you don't have to write every month, day or date hard core in the code.
    Lets start to generate the code for it.

    Step 1: Create head section in your html file and inside code will go like this:-

    <script type="text/javascript">
    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: Now just after your body tag put this script code:-

    <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>
    

    Now when this html file load it will automatically show 3 drop downs, Day Month Year. Now user can choose the date from these dropdowns. Also you can extend this code and put multiple date from dropdown selectboxes

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: