javascript - Repopulating dates on select boxes - Stack Overflow

admin管理员组

文章数量:1310059

I've created a date_select in Rails (which is 3 select boxes: one for year, one for month, and one for day).

To have 31st February on them is quite confusing. What I want to be able to is to have the select boxes only with valid dates. What I mean is that, when you select February, 31st, 30th, (and on some years 29th) are removed, then, when you select January, they're added again, and so forth. Additionally, I want that the initial select boxes are only populated with the days of the selected month.

I've created a date_select in Rails (which is 3 select boxes: one for year, one for month, and one for day).

To have 31st February on them is quite confusing. What I want to be able to is to have the select boxes only with valid dates. What I mean is that, when you select February, 31st, 30th, (and on some years 29th) are removed, then, when you select January, they're added again, and so forth. Additionally, I want that the initial select boxes are only populated with the days of the selected month.

• javascript
• jquery
• ruby-on-rails
• ruby-on-rails-3

Share Improve this question Follow edited Jun 20, 2018 at 10:14 Zoe - Save the data dump 28.3k2222 gold badges128128 silver badges160160 bronze badges asked Jan 27, 2011 at 22:15 Abel ToyAbel Toy 32855 silver badges1616 bronze badges 1

• I'd put a bit of jquery there. – apneadiving Commented Jan 27, 2011 at 22:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

I assume you have three selects with classes 'day', 'month', 'year'. Then use this JS:

function monthChanged() {
    var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var month = $('.month').val() - 1, year = +$('.year').val();
    var diff;

    // Check for leap year if Feb
    if (month == 1 && new Date(year, month, 29).getMonth() == 1) days[1]++;

    // Add/Remove options
    diff = $('.day option').length - (days[month] + 1);
    if (diff > 0) { // Remove
        $('.day option').slice(days[month] + 1).remove();
    } else if (diff < 0) { // Add
        for (var i = $('.day option').length; i <= days[month]; i++) {
            $('<option>').attr('value', i).text(i).appendTo('.day');
        }
    }
}

$(function () {
    monthChanged(); // On document ready
    $('.month').change(monthChanged); // On month change
    $('.year').change(monthChanged); // On year change (for leap years)
});

Demo: http://jsfiddle/FxBpB/

/* automatically update days based on month */

for (var i = 2014; i < 2019; i++) {
    $('<option>').attr('value', i).text(i).appendTo('#start_year');
}

function monthChanged() {
    debugger;
    var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var month = $('#start_month').val() - 1,
        year = +$('#start_year').val();

    // Check for leap year if Feb
    if (month == 1 && new Date(year, month, 29).getMonth() == 1) 
        days[1]++;

    // Add/Remove options
    if ($('#start_day option').length > days[month]) {
        // Remove
        $('#start_day option').slice(days[month] + 1).remove();
    } else if ($('#start_day option').length < days[month] + 1) {
        // Add
        for (var i = $('#start_day option').length + 1; i <= days[month]; i++) {
            $('<option>').attr('value', i).text(i).appendTo('#start_day');
        }
    }
}


monthChanged(); // On document ready
$('#start_month').change(monthChanged); // On month change
$('#start_year').change(monthChanged); // On year change (for leap years)

Refer fiddle link: http://jsfiddle/u3fr1mt0/

本文标签： javascriptRepopulating dates on select boxesStack Overflow