11

I have a HTML page with 3 dropdowns for the month, day and year and I was wondering if there was a way to populate the month drop down properly depending on the month and year.

I haven't done this before on the client side, but it looks like a lot of controls like the jQuery DatePicker are doing that behind the scenes.

18

You can play with date objects:

var monthStart = new Date(year, month, 1);
var monthEnd = new Date(year, month + 1, 1);
var monthLength = (monthEnd - monthStart) / (1000 * 60 * 60 * 24)

Arithmetic with Date objects gives a number of milliseconds.

This will even work for December; the Date constructor handles out-of-range arguments by wrapping around.

Note that month is zero-based (it must be between 0 and 11)

  • This is awesome.. it even works on leap years. I tried 2/2012. thanks! – Abe Feb 3 '11 at 2:13
  • 2
    I wrapped it as var DaysInMonth = function(year, month) { /* SLAK's code here */; return monthLength;}; and further added a prototype method to Date Date.prototype.daysInMonth = function() { var mlen=DaysInMonth(this.getFullYear(), this.getMonth()); return mlen; }; so I can call (new DateTime(2000, 1)).daysInMonth(); – John K Feb 3 '11 at 2:56
  • March 2014 returns 30.958333333333332 for some reason. – o01 May 8 '14 at 10:34
  • To avoid decimal numbers, add Math.round to monthLength: monthLength = Math.round( (monthEnd - monthStart) / (1000 * 60 * 60 * 24) ); – bdurao Nov 19 '14 at 17:52
  • 1
    Some months have 1 extra hour or one less hour due to daylight savings. The (1000 * 60 * 60 * 24) part of the equation doesn't account for this variance. Rounding will help. – Troy Morehouse Apr 17 '17 at 16:07
27

As far as I know, there's no (neat) built-in function for that. I wrote this once:

// note that month is 0-based, like in the Date object. Adjust if necessary.
function getNumberOfDays(year, month) {
    var isLeap = ((year % 4) == 0 && ((year % 100) != 0 || (year % 400) == 0));
    return [31, (isLeap ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
}
  • 1
    That is cool how you can include a ternary statement inside the array! nice! – Abe Feb 3 '11 at 1:53
  • 1
    This should be the answer! Brilliant! – Johny Jan 28 '16 at 20:09
3

Copy from another post: Get number days in a specified month using javascript?

//Month is 1 based
function daysInMonth(month,year) {
return new Date(year, month, 0).getDate();
}

//July
daysInMonth(7,2009); //31
//February
daysInMonth(2,2009); //28
daysInMonth(2,2008); //29

All the credits to @c_harm, really great solution

2
Date.prototype.daysinMonth: function(){
    var d= new Date(this.getFullYear(), this.getMonth()+1, 0);
    return d.getDate();
}

function daysinMonthfromInput(month,year){
    return (new Date(year,month-1,1)).daysinMonth();
}

alert(daysinMonthfromInput(2,2011));
1

Here's the one liner. Assuming you are saying January=1, February=2 etc..(being normal) Here's the leap year example:

var y = 2012;
var m = 2;
var daysInMonth = new Date(y,m,1,-1).getDate();
0

I am using this approach in my current project and found that I needed correct for round off errors. So instead of using monthLength in my code, I had to use this instead:

monthLength.toFixed(0)

For example if I have an object in which I am storing a text date field, it may look like this:

obj.month = theMonths[mm - 1] + " " + monthLength.toFixed(0) + ", " + obj.year;
0

You can actually use this:

var curdate = new Date(); DaysMonth = 32 - new Date(curdate.getYear(), curdate.getMonth(), 32).getDate();

;)

-2
Date.prototype.daysinMonth= function(){
var d= new Date(this.getFullYear(), this.getMonth()+1, 0);
return d.getDate();
};

function daysinMonthfromInput  (month, year) {
     return (new Date(year, month - 1, 1)).daysinMonth();
};
function fillallday (elem, month, year) {
     var options = null;
     var elementExists = document.getElementById(elem);

     if (elementExists != null) {

         this.removeOptions(elementExists);
         var opt = document.createElement('option');
         opt.value = "";
         opt.innerHTML = "---Day---";
         elementExists.appendChild(opt);
         if (month != "") {
             if (typeof (year) === "undefined") {
                 year = new Date().getFullYear();
             }
             if (year == "") {
                 year = new Date().getFullYear();
             }
             var days = daysinMonthfromInput(month, year);
             for (var i = 1; i <= days; i++) {
                 var opt = document.createElement('option');
                 opt.value = i;
                 opt.innerHTML = i;
                 elementExists.appendChild(opt);
             }
         }
     }

 }
  • This question has already been answered correctly - what does this answer add that the original answer doesn't have? – Ieuan Stanley Jan 12 '16 at 11:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.