Geek asks and answers

$ ("# datePicker"). datepicker ("getDate"). getMonth is not a function

An attempt to help him work with a link to a specific month

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

I tried this

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

  • The default date is not the first of June.
  • I have a visible calendar and the other is onclick.
  • I get

Error: $ ("# Datepicker"). DatePicker ("GetDate"). GetMonth is not a function Source file: http://fiddle.jshell.net/mplungjan/FQLjS/2/show/
Line: 59

What are the problems?

Pay attention to the added resources of mobile jQuery and mobile data picker

+3
source share
4 answers

jquery.ui.datepicker.mobile.js, , .

:

//return jqm obj 
return this;

, , , jQuery datepicker. .

, , , 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 );
+8

datepicker:

$( "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());
});

, ( , ...). .

+4

:)

It has no idea which object getdate returns, probably as the object of the hacked date said. The easiest way is to use already saved variables in the datepicker object.

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


};
+2
source

@mplungjan

There is no item on this site with id 'datePicker' http://jquerymobile.com/test/experiments/ui-datepicker/ Identifier = date.

So the error you get is correct. However, the method returns only the input value, so instead

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

you can just have it

$('#date').val()
0
source

More articles:


All Articles