jQuery UI Datepicker и дилема за избор на кутия

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

Това, от което се нуждая, е да имам кутия за ден и година за месец като тази, която може да се види тук...(http://www.bookassist.com/hotels/index.jsp?source=org)

Някой там знае дали това може да се направи? Тотално се удари в тухлена стена.


person Community    schedule 02.08.2011    source източник
comment
Публикувайте какво вече сте направили в jsFiddle и споделете връзката. Така всеки може да ви помогне по-добре.   -  person Sahil Muthoo    schedule 02.08.2011
comment
Не можете ли просто да използвате манипулатор onselect, за да настроите елементите на падащото меню по подходящ начин, когато бъде избрана дата?   -  person Pointy    schedule 02.08.2011
comment
Ето кода на jsFiddle...jsfiddle.net/aggYd Опитах решението на ace по-долу, но без успех .   -  person    schedule 02.08.2011


Отговори (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'
            }

към това, като добавите масива от месеци и актуализирате крайната дата.

$(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/, който прави точно това. Надявам се това да реши проблема ви.

person ace    schedule 02.08.2011
comment
Благодаря, асо, но не се получи. Добавих връзка към jsFiddle в първия пост по-горе. - person ; 02.08.2011
comment
Да, и той не работи, когато го проверих. Изглежда кодът има проблем при настройка на най-новата дата. Ще актуализирам отговора си след известно време. - person ace; 03.08.2011
comment
Ето един работещ код. jsfiddle.net/2Nedr Работя върху грешката, която кодът му има, забележете, че не има годината 2011 в неговия пример, опитайте да добавите 2011 и 2012 и кодът му няма да работи. - person ace; 03.08.2011
comment
Моя грешка. Имаше конфигурация за крайна дата. Ще актуализирам отговора си след известно време. - person ace; 03.08.2011
comment
Благодаря за помощта, ас. Трябва да премахна полето за избор на година и да има месеца и годината в едно поле за избор, напр. август-2011, октомври-2012 и т.н. - person ; 03.08.2011
comment
А, работи ли вече? Просто трябва да промените $('#m').val().split(" ")[1] на $('#m').val().split("-")[1] и months.indexOf($('#m').val().split(" ")[0]) на months.indexOf($('#m').val().split("-")[0]) и също така да промените масива с месеци от ['January','February',...] на ['Jan','Feb',...] - person ace; 03.08.2011
comment
перфектен Много благодаря за това! Работи страхотно сега. - person ; 03.08.2011