JQuery UI Datepicker и выберите поле дилеммы - PullRequest
Новая
       18

JQuery UI Datepicker и выберите поле дилеммы

0 голосов
/ 02 августа 2011

Я экспериментировал с инструментом выбора даты в пользовательском интерфейсе jQuery и могу заставить его работать с полями выбора, но только при наличии поля выбора дня, месяца и года (http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerIntoSelects.html).

Что мне нужно, так это иметь поле для дня и месяца-года, подобное тому, которое можно увидеть здесь ... (http://www.bookassist.com/hotels/index.jsp?source=org)

Кто-нибудь знает, можно ли это сделать? Полностью ударил кирпичную стену.

1 Ответ

0 голосов
/ 02 августа 2011

Как правило, вам нужно изменить эту часть с 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». 

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/, который делает именно это.Надеюсь, что это решит вашу проблему.

...