$ ("# datePicker"). datepicker ("getDate"). getMonth не является функцией

Question

Попытка помочь заставить это работать со ссылкой на определенный месяц

http://jquerymobile.com/test/experiments/ui-datepicker/

Я пробовал это

http://jsfiddle.net/mplungjan/FQLjS/2/

1. Дата по умолчанию не первое июня
2. У меня есть видимый календарь и еще один onclick.
3. Я получаю

Ошибка: $ ( "# Datepicker"). DatePicker ( "GetDate"). GetMonth это не функция
Исходный файл: http://fiddle.jshell.net/mplungjan/FQLjS/2/show/
Линия: 59

Какие здесь проблемы?

Обратите внимание на добавленные ресурсы от мобильного jquery и мобильного DatePicker

Answer 1

Проблема вызвана jquery.ui.datepicker.mobile.js, где бы вы ни получили, это явно неполный взлом.

Реальная проблема с этой строкой:

//return jqm obj 
return this;

Это означает, что независимо от того, что вы вызываете, он всегда будет возвращать взломанный объект jQuery для нового средства выбора даты. В вашем случае он должен вернуть дату.

Решение, которое опять-таки является просто взломом, состоит в том, чтобы сохранить возвращаемое значение исходного вызова datepicker и возвращать объект jQuery только в том случае, если исходное возвращаемое значение фактически было объектом jQuery:

...

//call cached datepicker plugin
var retValue = prevDp.call( this, options );

...

//return jqm obj
if(retValue){
    if(!retValue.jquery) return retValue;
}
return this;

...

Редактировать: Дальнейшие проблемы с этим расширением расширения в том, что оно нарушает все команды, которые требуют более одного параметра. datepicker() может принимать до 5 параметров, поэтому эти дополнения должны быть переданы в исходное расширение.

Аналогично, добавление дополнительных стилей и привязка события click должны происходить только при построении средства выбора даты, поэтому необходимо установить дополнительную проверку, чтобы определить, является ли тип первого параметра строка или нет.

Полученный код должен выглядеть примерно так, остальное оставлю на усмотрение оригинального разработчика:).

(function($, undefined ) {

    //cache previous datepicker ui method
    var prevDp = $.fn.datepicker;

    //rewrite datepicker
    $.fn.datepicker = function( options, param2, param3, param4, param5 ){

        var dp = this;

        //call cached datepicker plugin
        var retValue = prevDp.call( this, options, param2, param3, param4, param5 );

        //extend with some dom manipulation to update the markup for jQM
        //call immediately
        function updateDatepicker(){
            $( ".ui-datepicker-header", dp ).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all");
            $( ".ui-datepicker-prev, .ui-datepicker-next", dp ).attr("href", "#");
            $( ".ui-datepicker-prev", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true});
            $( ".ui-datepicker-next", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true});
            $( ".ui-datepicker-calendar th", dp ).addClass("ui-bar-c");
            $( ".ui-datepicker-calendar td", dp ).addClass("ui-body-c");
            $( ".ui-datepicker-calendar a", dp ).buttonMarkup({corners: false, shadow: false}); 
            $( ".ui-datepicker-calendar a.ui-state-active", dp ).addClass("ui-btn-active"); // selected date
            $( ".ui-datepicker-calendar a.ui-state-highlight", dp ).addClass("ui-btn-up-e"); // today"s date
            $( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){
                var el = $(this);
                // remove extra button markup - necessary for date value to be interpreted correctly
                el.html( el.find( ".ui-btn-text" ).text() ); 
            });
        };

        if(typeof options != 'string'){
            //update now
            updateDatepicker();

            // and on click
            $( dp ).click( updateDatepicker );
        }

        //return jqm obj 
        if(retValue){
            if(!retValue.jquery) return retValue;
        }
        return this;
    };

    //bind to pagecreate to automatically enhance date inputs   
    $( ".ui-page" ).live( "pagecreate", function(){     
        $( "input[type='date'], input:jqmData(type='date')", this ).each(function(){
            $(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) );
        }); 
    });
})( jQuery );

Answer 2

Проблема начинается с привязки даты:

$( "input[type='date'], input:jqmData(type='date')", this ).each(function(){
    $(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true);
});

Он связан не с самим элементом ввода, а с div, который добавляется за элементом ввода. Это означает, что вы должны вызывать методы api datepicker для div, а не для ввода. Вы можете сделать это по

• присвоение ему идентификатора
• ищет его по классу hasDatepicker (который добавляется автоматически при инициализации DatePicker
• с сохранением ссылки на него, поскольку конструктор .datepicker () возвращает созданный им экземпляр

Это даст вам правильный поиск, но - как указал DarthJDG - недостаточно. Я изменил код аналогичным образом, но без условия вокруг вызова updateDatepicker. Этот вызов также необходим при изменении календаря (например, setDate), что приводит к его регенерации в DOM. Поэтому, если вы пропустите это, ваш календарь не будет выглядеть мобильно.

(function ($, undefined) {

    //cache previous datepicker ui method
    var prevDp = $.fn.datepicker;

    //rewrite datepicker
    $.fn.datepicker = function (options) {

        var dp = this;

        //call cached datepicker plugin
        var retValue = prevDp.apply(this, arguments);

        //extend with some dom manipulation to update the markup for jQM
        //call immediately
        function updateDatepicker() {
            $(".ui-datepicker-header", dp).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all");
            $(".ui-datepicker-prev, .ui-datepicker-next", dp).attr("href", "#");
            $(".ui-datepicker-prev", dp).buttonMarkup({ iconpos: "notext", icon: "arrow-l", shadow: true, corners: true });
            $(".ui-datepicker-next", dp).buttonMarkup({ iconpos: "notext", icon: "arrow-r", shadow: true, corners: true });
            $(".ui-datepicker-calendar th", dp).addClass("ui-bar-c");
            $(".ui-datepicker-calendar td", dp).addClass("ui-body-c");
            $(".ui-datepicker-calendar a", dp).buttonMarkup({ corners: false, shadow: false });
            $(".ui-datepicker-calendar a.ui-state-active", dp).addClass("ui-btn-active"); // selected date
            $(".ui-datepicker-calendar a.ui-state-highlight", dp).addClass("ui-btn-up-e"); // today"s date
            $(".ui-datepicker-calendar .ui-btn", dp).each(function () {
                var el = $(this);
                // remove extra button markup - necessary for date value to be interpreted correctly
                // only do this if needed, sometimes clicks are received that don't require update
                // e.g. clicking in the datepicker region but not on a button.
                // e.g. clicking on a disabled date (from next month)
                var uiBtnText = el.find(".ui-btn-text");
                if (uiBtnText.length)
                    el.html(uiBtnText.text());
            });
        };

        //update after each operation
        updateDatepicker();

        // and on click
        $(dp).click(updateDatepicker);

        //return jqm obj 
        if (retValue) {
            if (!retValue.jquery) return retValue;
        }
        return this;
    };

})(jQuery);

Еще одно полезное изменение - дополнительная проверка при удалении содержимого кнопки

$(".ui-datepicker-calendar .ui-btn", dp).each(function () {
    var el = $(this);
    // remove extra button markup - necessary for date value to be interpreted correctly
    // only do this if needed, sometimes clicks are received that don't require update
    // e.g. clicking in the datepicker region but not on a button.
    // e.g. clicking on a disabled date (from next month)
    var uiBtnText = el.find(".ui-btn-text");
    if (uiBtnText.length)
        el.html(uiBtnText.text());
});

Иногда я получал события кликов, которые не меняли календарь (щелкнув правой кнопкой мыши рядом с ним, прикоснувшись к отключенной дате следующего месяца, ...). что сделало все кнопки пустыми.

Answer 3

У меня была та же проблема сегодня:)

Я понятия не имею, какой объект возвращает getdate, вероятно, как и взломанный объект даты.Проще всего просто использовать уже сохраненные переменные в объекте datepicker.

function onSelect(dateStr,dpObject)
{
    var month = dpObject.selectedMonth
    var day = dpObject.selectedDay;
    var year = dpObject.selectedYear;
    alert(year + ":" + month  + ":" + day);


};

Answer 4

@ mplungjan

На этом сайте нет элемента с идентификатором 'datePicker' http://jquerymobile.com/test/experiments/ui-datepicker/ Идентификатор = дата.

Итак, ошибка, которую вы получаете, верна.Тем не менее, метод, кажется, возвращает только значение ввода, поэтому вместо этого

$('#date').datepicker("getDate")

вы просто можете получить это

$('#date').val()