Question

尝试通过指向特定月份的链接来帮助实现此目标

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

我试过这个

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

默认日期不是6月的第一天
我有一个可见的日历和另一个onclick。
我

错误：   $（ “＃日期选择器”）。日期选择器（ “GETDATE”）。得到月   不是一个功能
  来源档案：http://fiddle.jshell.net/mplungjan/FQLjS/2/show/
  行：59

这里有什么问题？

请注意移动jquery和移动日期选择器

Answer 1

这个问题是由jquery.ui.datepicker.mobile.js造成的，无论你从中获得了什么，这显然是一个不完整的黑客攻击。

真正的问题在于这一行：

//return jqm obj 
return this;

这意味着无论你调用什么，它总会返回新的datepicker的被黑客攻击的jQuery对象。在您的情况下，它应该返回一个日期。

一个解决方案，再次只是一个hack，是保存原始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事件的绑定只应在构造datepicker时进行，因此需要进行额外的检查以查看第一个参数的类型是否为是不是字符串。

生成的代码看起来应该是这样的，我将其余部分留给最初的开发人员:)。

(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

问题始于datepicker的绑定：

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

它不是绑定到输入元素本身，而是绑定到输入元素后面的div。这意味着你应该在div上调用datepicker api方法而不是输入。你可以通过

来做到这一点

给它一个id
通过类'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

此网站http://jquerymobile.com/test/experiments/ui-datepicker/上没有ID为'datePicker'的元素 id = date。

所以你得到的错误是正确的。但是，该方法似乎只返回输入的值，而不是具有此

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

你可以拥有这个

$('#date').val()

$（“＃datePicker”）。datepicker（“getDate”）。getMonth不是函数

4 个答案: