Test if element already has jQuery datepicker

问题

I have a form with many input elements. Some are date fields with a jQuery UI datepicker alraedy attached:

$("#someElement").mask("9?9/99/9999").datepicker({showOn: 'button', buttonText:'Click here to show calendar', duration: 'fast', buttonImageOnly: true, buttonImage: /images/calicon.gif' });

Then I have a key command bound to this function:

function openCalendar() {
    var selection = document.activeElement;

    // { Need to test here if datepicker has already been initialized 
        $(selection).datepicker("show");
    // }
}

This works great for elements which already have the datepicker on them. However any other fields will throw a javascript error. I'm wondering the best way to test to see if datepicker has already been initialized on that field.

回答1:

Wow can't believe I missed this one. Line 108 of ui.datepicker.js:

/* Class name added to elements to indicate already configured with a date picker. */
markerClassName: 'hasDatepicker',

So I just need to test for hasClass('hasDatepicker'). This seems like the most straightforward way. Furthermore, this statement checks whether the datepicker is currently opened (for anyone who is interested):

if ($("#ui-datepicker-div").is(":visible") && $("#ui-datepicker-div").html() != "") {
    // datepicker is open. you need the second condition because it starts off as visible but empty
}

回答2:

1) If the code throws an error when trying to open the datepicker, you can put the code into try..catch

2) You can set some data to the input field when initializing the datepicker

$("#someElement").data("datepicker-initialized", true);

3) You can use the data stored by datepicker plugin

if($("#someElement").data("datepicker") != null){
   // datepicker initialized
}

if($.data($('#someElement').get(0), 'datepicker')){
   // datepicker initialized
}

4) datepicker internally uses a function _getInst

if($.datepicker._getInst($('#someElement')[0]) != null){}

the method does almost the same as example 3.

Couldn't find any better solution.

回答3:

One basic solution is to set an attribute at time of the datepicker attachment and then test for that:

$("#someElement").mask("9?9/99/9999")
.datepicker({showOn: 'button', buttonText:'Click here to show calendar', duration: 'fast', buttonImageOnly: true, buttonImage: /images/calicon.gif' })
.attr("data-calendar", "true");

Then you could do:

if ($(selection).attr("data-calendar") == "true")
    $(selection).datepicker("show");

Is there a more direct way?

回答4:

I got another case. My script is copying last table elements including datepicker.

The jquery will not working because the copied element has mark that it "hasDatepicker".

To activate datepicker in new element, remove that class name and the initiate it, like this.

 $("#yournewelementid").attr("class","your-class-name"); 
 $("#yournewelementid").datepicker();

回答5:

If section is your dom element for datepicker, check if already initialized and if not initialize it first as datepicker (you could add properties) and then show it!

    // If already initialized        
    if ( typeof selection !== 'undefined' && selection.length > 0)
         $(selection).datepicker('show');
    // otherwise initialize first and show
    else 
         $(selection).datepicker().datepicker('show');

回答6:

This was my solution :)

if(typeof jQuery.fn.datepicker !== "undefined")

来源：https://stackoverflow.com/questions/2579389/test-if-element-already-has-jquery-datepicker

标签

javascript

jquery

jquery-ui

datepicker