Question

我已经在jQuery UI中尝试了datepicker，并且可以使用选择框，但只有在有日，月和年选择框（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'
            }

，通过添加months数组并更新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/。希望能解决你的问题。

jQuery UI Datepicker和选择框的困境

1 个答案: