2009-12-08 27 views
13

Tôi đã có mã này:JQuery UI datepicker không hoạt động khi bị ràng buộc vào một lớp

<html> 
<head> 
    <link type="text/css" href="css/blitzer/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> 
    <script type="text/javascript"> 
$(function() { 
    $('.hasDatepicker').datepicker(); 
}); 
</script> 
</head> 
<body> 
<p>date: <input type="text" name="data" class="hasDatepicker" /></p> 
<input type="submit" value="send" /> 
</div> 
</body> 
</html> 

Khi tôi bấm vào lĩnh vực đầu vào, không có gì xảy ra. Các datepicker được khởi tạo mặc dù, khi tôi kiểm tra DOM trong Firebug, tôi nhận được id="dp1260260566059" thêm vào phần tử <input> của tôi.

Sau khi thay đổi htmljs sử dụng id thuộc tính thay vì class, do đó, có điều này trong mã của tôi:

$(function() { 
    $('#hasDatepicker').datepicker(); 
}); 

<p>date: <input type="text" name="data" id="hasDatepicker" /></p> 

Tất cả mọi thứ hoạt động OK.

Không thể đặt ngày tháng từ giao diện người dùng JQuery cho tất cả các thành phần của một số lớp?

Trả lời

26

Vui lòng kiểm tra xem công cụ datepicker có hoạt động không nếu bạn thay đổi tên lớp của trường nhập từ 'hasDatePicker' thành một thứ khác. Lý do là, khi thêm datepicker đến lĩnh vực đầu vào bằng cách sử dụng mã bên dưới:

$(function() { 
    $('#date').datepicker(); 
}); 

nó bổ sung thêm tên lớp "hasDatePicker" vào lĩnh vực đầu vào. (mà bạn sử dụng)

+0

Wow. Cảm ơn rất nhiều. Điều này là gây phiền nhiễu, gây ra va chạm tên theo cách này và không thể tìm ra những gì sai :) – kender

+0

@sv_in Cảm ơn! Là một vấn đề rất bực bội. –

+0

@ sv_in tên lớp "hasDatePicker" đã khiến tôi phải vật lộn trong hơn một giờ. Câu trả lời của bạn chỉ xóa vấn đề của tôi. vậy +1 – Vinay

2

Không sử dụng hasDatepicker làm tên lớp của người chọn ngày của bạn. Sử dụng tên khác, như date_picker.

JQuery thêm lớp hasDatepicker vào yếu tố mà datepicker() được gọi. Nếu phần tử đã có lớp hasDatepicker, thì hàm datepicker() không làm gì cả. Vì vậy, chỉ cần sử dụng một tên lớp khác nhau.

Các vấn đề liên quan