jQuery UI Datepicker 和选择框困境

Question

我已经在 jQuery UI 中尝试了日期选择器，并且可以让它与选择框一起工作，但只有当有日、月和年选择框时 (http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerIntoSelects.html)。

我需要的是有一个日期和月份的盒子，就像这里可以看到的那样...(http://www.bookassist.com/hotels/index.jsp?source=org)

有人知道这是否可以做到吗？完全碰壁了。

Answer 1

基本上你需要从http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerIntoSelects.html修改这部分

改变这部分，datePicker的初始化，

$(function()
{

    // initialise the "Select date" link
    $('#date-pick')
        .datePicker(
            // associate the link with a date picker
            {
                createButton:false,
                startDate:'01/01/2005',
                endDate:'31/12/2010'
            }

为此，通过添加月份数组并更新 endDate。

$(function()
{
    var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];

    // initialise the "Select date" link
    $('#date-pick')
        .datePicker(
            // associate the link with a date picker
            {
                createButton:false,
                startDate:'01/01/2005',
                endDate:'31/12/2015'
            }

然后，更改更新 3 个选择 (d,m,y) 的函数

var updateSelects = function (selectedDate)
{
    var selectedDate = new Date(selectedDate);
    $('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
    $('#m option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected');
    $('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
}

仅 (d,m) 以这种格式“2011 年 8 月”指定月份。

var updateSelects = function (selectedDate)
{
    var selectedDate = new Date(selectedDate);
    $('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
    $('#m option[value=' + (months[selectedDate.getMonth()]) + ' ' +  (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
}

然后更改从这里更改选择时更新选择器的功能

// listen for when the selects are changed and update the picker
$('#d, #m, #y')
    .bind(
        'change',
        function()
        {
            var d = new Date(
                        $('#y').val(),
                        $('#m').val()-1,
                        $('#d').val()
                    );
            $('#date-pick').dpSetSelected(d.asString());
        }
    );

对此，（编辑：我在之前的答案中错误地交换了年份值和日期值。）

// listen for when the selects are changed and update the picker
$('#d, #m')
    .bind(
        'change',
        function()
        {
            var d = new Date(
                        $('#m').val().split(" ")[1],
                        months.indexOf($('#m').val().split(" ")[0]),
                        $('#d').val()
                    );
            $('#date-pick').dpSetSelected(d.asString());
        }
    );

http://jsfiddle.net/2Nedr/1/ 就是这样做的。 希望能解决您的问题。