Hiện tại, trình tạo ngày tháng chỉ tạo 1 phần tử trên mỗi trang mà tất cả các đầu vào 'datepicker' chia sẻ, do đó tại sao câu trả lời cho câu hỏi được liên kết không hoạt động. Sự kiện beforeShow không cho phép chỉnh sửa phần tử datepicker với .addClass() hoặc .css() (vì cấu trúc phần tử được làm mới từ tập lệnh datepicker khi nó hiển thị.)
Để giải quyết vấn đề này, tôi thấy trọng tâm sự kiện cho phần tử đầu vào xuất hiện để chạy mã sau khi trình hiển thị ngày tháng được hiển thị. Đó là một giải pháp đơn giản cho một vấn đề khó chịu.
Đây là mã của tôi:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.month-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
$('.date-picker').datepicker();
$('.month-picker').focus(function() {
$('.ui-datepicker-calendar').addClass('hideDates');
});
});
</script>
<style>
.hideDates {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date:</label>
<input name="startDate" id="startDate" class="date-picker" />
<label for="endMonth">End Month:</label>
<input name="endMonth" id="endMonth" class="month-picker" />
</body>
</html>
Nguồn
2010-11-17 15:27:22
Xin chào Cảm ơn bạn đã trả lời loại, có thể giải thích thêm về điều đó, được rồi tôi sao chép một tệp .js khác gọi là monthpicker.js từ jquery.ui.datetimepicker.js, vì vậy bước tiếp theo sẽ giải thích cho bạn là "có riêng nó Bộ chọn CSS và tệp CSS "? – Darren
@ Darren - Bạn cần phải chọn qua mã và xem cách tập lệnh chỉ định bộ chọn/id cho các mục mà nó tạo và thay đổi chúng để sử dụng 'monthpicker' thay vì 'datepicker' chẳng hạn. Sau đó, bạn cần sao chép tệp CSS và thực hiện các thay đổi phù hợp tại đó. – Paddy
Vâng, chỉ cần tự hỏi liệu tôi có thể sử dụng thừa kế css để chỉ cần chọn lớp .ui-datepicker-lịch mà thuộc về datepicker duy nhất của tôi trong ? – Darren