Kiểm tra xem phần tử đã có bộ đếm date jQuery chưa

Question

Tôi có một biểu mẫu có nhiều yếu tố đầu vào. Một số trường ngày với một datepicker jQuery UI alraedy kèm theo:

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

Sau đó, tôi có một lệnh quan trọng liên kết với chức năng này:

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

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

này hoạt động tuyệt vời cho các yếu tố đó đã có datepicker trên chúng. Tuy nhiên, bất kỳ trường nào khác sẽ ném một lỗi javascript. Tôi đang tự hỏi cách tốt nhất để kiểm tra xem liệu datepicker đã được khởi tạo trên trường đó chưa.

Answer 1

Chà không thể tin rằng tôi đã bỏ lỡ điều này. Dòng 108 của ui.datepicker.js:

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

Vì vậy, tôi chỉ cần kiểm tra hasClass('hasDatepicker'). Điều này có vẻ là cách đơn giản nhất. Hơn nữa, tuyên bố này kiểm tra xem máy ghi ngày giờ có được mở hay không (đối với bất kỳ ai quan tâm):

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 
} 

Answer 2

Một giải pháp cơ bản là để thiết lập một thuộc tính tại thời điểm sử dụng tập tin đính kèm datepicker và sau đó kiểm tra cho rằng:

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

Sau đó, bạn có thể làm:

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

Có cách trực tiếp hơn?

Answer 3

1) Nếu mã ném một lỗi khi cố gắng mở datepicker, bạn có thể đặt mã vào try..catch

2) Bạn có thể thiết lập một số dữ liệu vào lĩnh vực đầu vào khi khởi datepicker

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

3) Bạn có thể sử dụng dữ liệu được lưu trữ bởi datepicker Plugin

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

hoặc

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

4) datepicker nội bộ sử dụng một hàm _getInst

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

phương pháp nào gần giống như ví dụ 3.

Không thể tìm thấy bất kỳ giải pháp tốt hơn.

Answer 4

Tôi có một trường hợp khác. Tập lệnh của tôi đang sao chép các phần tử bảng cuối cùng bao gồm cả datepicker.

Jquery sẽ không hoạt động vì phần tử được sao chép đã đánh dấu là "hasDatepicker".

Để kích hoạt datepicker trong phần tử mới, hãy xóa tên lớp đó và khởi tạo nó, như thế này.

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

Answer 5

Đây là giải pháp của tôi :)

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