Web Analytics Made Easy -
StatCounter Drop down menu year/month/day - CodingForum


No announcement yet.

Drop down menu year/month/day

  • Filter
  • Time
  • Show
Clear All
new posts

  • Drop down menu year/month/day


    I've come across this archive at


    What I would like is to have it to have it include "days" as well.

    So lets say as of today (Apr 8th), when a user choose Apr, the dropdown for 'day' will have the options 01, 02, 03.....08.

    Another thing to note is that each month has different number of days in it.

    I've tried playing around for quite some time now...but so far no luck.

    Thanks in advance for any tips.

  • #2
    Seems pretty trivial. What do you want to have showing when the page first appears??? Just the years? With the month and day not yet available? Or should it default to showing the current date?
    Be yourself. No one else is as qualified.


    • #3
      Here's what I'm trying to come up with...

      I would like to have 2 sets of dropdown lists: one for start and one for end.

      For 'start', showing just the 'year' -2009 as default- will be fine. (leaving 'month' and 'day' blank) There should be only 4 options in 'month' and none in 'day'.

      For 'end', set to show the current year/month/day by default (and of course, the "current" date should be the last option in 'year', 'month', and 'day')

      I know it's a lot to ask...but any help is appreciated.


      • #4
        Okay, just one more question: Wouldn't a little calendar picker be more user friendly?? Such as the one I have here:

        That picker always defaults to the current date and lets the user pick any date, past or future, but modifying it to restrict the pick to only past (or current) dates wouldn't be hard and would be a lot more user friendly that a set of drop downs.

        Anyway...wasn't quite as simple as I thought it would be with the added conditions. I opted to *NOT* pick ANY "from" date, at all. If I picked a year, I'd have to initialize the months, etc. But if you want, we could init to any year.
        <style type="text/css">
        #TheForm select { font-size: medium; width: 120px; }
        <script type="text/javascript">
        var monthNames = new Array("--Month?--","January","February","March","April",
        function changeDate(sel)
            // parent form of everything
            var form = sel.form; 
            // get current year, month, day for use later:
            var now = new Date( );
            var curYear  = now.getFullYear( );
            var curMonth = now.getMonth() + 1; // js months are 0 to 11
            var curDay   = now.getDate();
            // analyze source of the change
            var toFrom = sel.name.charAt(0); // always f(rom) or t(0)
            var unit = sel.name.charAt(1); // Y(ear) or M(onth)
            // set up the sel references to appropriate set...
            var selYear  = toFrom == "f" ? form.fYear  : form.tYear;
            var selMonth = toFrom == "f" ? form.fMonth : form.tMonth;
            var selDay   = toFrom == "f" ? form.fDay   : form.tDay;
            // need selected year to calculate Feb days and how many months
            var year = parseInt(selYear.options[selYear.selectedIndex].text)
            // if year changed, then must rebuild months:
            if ( unit == "Y" )
                selMonth.options.length = 1;
                for ( var m = 0; m <= (year == curYear ? curMonth : 12); ++m )
                    selMonth.options[m] = new Option(monthNames[m],m);
                selMonth.selectedIndex = 0;
                selDay.options.length = 1;
                selDay.selectedIndex = 0;
            } else {
                // change of month, so rebuild the days:
                selDay.options.length = 1;
                var lastDay = 31;
                switch ( selMonth.selectedIndex )
                    case 0: 
                        lastDay = 0; break;
                    case 4: case 6: case 9: case 11: /* april, june, sept, nov */
                        lastDay = 30; break;
                    case 2:
                        lastDay = ( year % 4 == 0 ? 29 : 28 );
                // but if current year and month selected, last day is today
                if ( year == curYear && selMonth.selectedIndex == curMonth ) 
                    lastDay = curDay;
                for ( var d = 1; d <= lastDay; ++d )
                    selDay.options[d] = new Option(d,d);
        function setupPickers( )
            // get current year, month, day for use later:
            var now = new Date( );
            var curYear  = now.getFullYear( );
            var curMonth = now.getMonth() + 1; // js months are 0 to 11
            var curDay   = now.getDate();
            var form = document.TheForm;
            var selF = form.fYear;
            var selT = form.tYear;
            // allow last 10 years to be chosen (easy to change this)
            for ( var i = 1; i <= 10; ++i )
                var y = curYear - 10 + i;
                selF.options[i] = new Option(y,y);
                selT.options[i] = new Option(y,y);
            // for the TO side, we force feed to current day
            // So first fake a change of year to this year:
            selT.selectedIndex = selT.options.length - 1; // always last in list
            changeDate( selT );
            // and then fake a change of month to this month:
            form.tMonth.selectedIndex = curMonth;
            changeDate( form.tMonth );
            // and finally select today:
            form.tDay.selectedIndex = curDay;
        <body onLoad="setupPickers( );">
        <form name="TheForm" id="TheForm">
        Year: <select name="fYear" onChange="changeDate(this);"><option value=0>--Year?--</option></select>
        &nbsp;Month: <select name="fMonth" onChange="changeDate(this);"><option value=0>--Month?--</option></select>
        &nbsp;Day: <select name="fDay"><option value=0>--Day?--</option></select>
        Year: <select name="tYear" onChange="changeDate(this);"><option value=0>--Year?--</option></select>
        &nbsp;Month: <select name="tMonth" onChange="changeDate(this);"><option value=0>--Month?--</option></select>
        &nbsp;Day: <select name="tDay"><option value=0>--Day?--</option></select>
        Be yourself. No one else is as qualified.


        • #5
          Thanks for the help. BTW, you got a nice website there.

          With a bit of fooling around, I've managed to make it just the way I wanted.

          There's one minor issue that I would like to suggest.

          I've noticed that when you just have "--Year?--" selected, all the options are shown for 'month'. Shouldn't there be nothing at all until a user chooses a year?

          Once again, thanks for the help.