Question

我想要一个像booking.com上的那个日期选择器。

在另一个选择框中更改月份+年份时，它会自动更改当月+日期。我看过jQuery datepicker的API，但是我找不到任何可以帮助我的东西。

Answer 1

请参阅我创建的一个小提琴，您从DatePicker选择日期，然后它将在另一个字段的日/月/年中更改。：Demo

$(function() {
$("#fullDate").datepicker({
    onClose: function(dateText, inst) {
        $('#year').val(dateText.split('/')[2]);
        $('#month').val(dateText.split('/')[0]);
        $('#day').val(dateText.split('/')[1]);
    }
});
});

Answer 2

感谢您的投入。我终于想出了如何让它发挥作用。

所以这里是其他任何想要这种功能的人的答案。

HTML

<select name="day" id="day">
     <option value="">Select Day</option>
</select>
<select name="month" id="month">
     <option value="">Select Month</option>
</select>

JS

function getMonths() {
    var months = new Array(12);
    months[0] = "Jan";
    months[1] = "Feb";
    months[2] = "Mar";
    months[3] = "Apr";
    months[4] = "May";
    months[5] = "Jun";
    months[6] = "Jul";
    months[7] = "Aug";
    months[8] = "Sep";
    months[9] = "Oct";
    months[10] = "Nov";
    months[11] = "Dec";
    var d = new Date();
    var month = d.getMonth();
    var year = d.getFullYear();
    var monthsArray = new Array(13);
    for (var i = 0; i < 13; i++) {
        var now = new Date();
        if (now.getMonth() == 11) {
            var current = new Date(now.getFullYear() + 1, 0, 1);
        } else {
            var current = new Date(now.getFullYear(), now.getMonth() + i, 1);
        }
        monthsArray[current.getMonth() + 1 + '_' + current.getFullYear()] = months[current.getMonth()] + ' ' + current.getFullYear();
    }
    return monthsArray;
}

function getDaysInMonth(month, year, daySelector) {
    var names = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var date = new Date(year, month - 1, 1);
    var days = [];
    while (date.getMonth() == month - 1) {
        days[date.getDate()] = (date.getDate() + " " + names[date.getDay()]);
        date.setDate(date.getDate() + 1);
    }
    daySelector.find('option').remove();
    daySelector.append($("<option></option>").attr("value", '').text("Day"));
    for (var key in days) {
        daySelector.append($("<option></option>").attr("value", key).text(days[key]));
    }
}

var months = getMonths();
for (var key in months) {
    $('#month')
        .append($("<option></option>")
        .attr("value", key)
        .text(months[key]));
}

$('#month').change(function () {

    var monthYear = $('#month').val().split('_');
    getDaysInMonth(monthYear[0], monthYear[1], $('#day'));

});

<强> Demo & Code

jQuery UI Datepicker分开日期/月份+年份

2 个答案: