Tôi đã sử dụng Lịch giao diện người dùng jQuery/Bộ chọn ngày với thành công lớn trong vài tháng qua. Tôi đã được yêu cầu mới cho phép một tuần được chọn (Sun - Sat) thay vì một ngày.Làm thế nào để sử dụng Lịch jQuery UI/Ngày PIcker cho tuần thay vì ngày?
Có ai đã thực hiện điều này trước đây không?
Inline tuần chọn sử dụng jQuery UI DataPicker (yêu cầu jQuery UI 1.8+):
<!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.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function() {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker({
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
$('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
</head>
<body>
<div class="week-picker"></div>
<br /><br />
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
</body>
</html>
chạy nó trên JsFiddle http://jsfiddle.net/manishma/AVZJh/light/
Đây là một cách khác để thực hiện nó. -Hiển thị tuần với showWeek. - Xác định trước beforeShow để đính kèm trình xử lý sự kiện bằng cách sử dụng live() để hàng tuần được đánh dấu (bao gồm số tuần). - Tách trình xử lý sự kiện bằng die() onclose. Điều này đặc biệt hữu ích khi bạn đang sử dụng trình tạo ngày bình thường ở nơi khác trong mã của bạn.
$(".week-picker").datepicker({
dateFormat: "yy-mm-dd",
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
showWeek: true,
beforeShow: function(dateText, inst) {
// for week highighting
$(".ui-datepicker-calendar tr").live("mousemove", function() {
$(this).find("td a").addClass("ui-state-hover");
$(this).find(".ui-datepicker-week-col").addClass("ui-state-hover");
});
$(".ui-datepicker-calendar tr").live("mouseleave", function() {
$(this).find("td a").removeClass("ui-state-hover");
$(this).find(".ui-datepicker-week-col").removeClass("ui-state-hover");
});
},
onClose: function(dateText, inst) {
var wk = $.datepicker.iso8601Week(new Date(dateText));
if (parseInt(wk) < 10) {
wk = "0" + wk;
}
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
if (isNaN(wk)) {
$(this).val("");
} else {
$(this).val(year + ";" + wk);
}
// disable live listeners so they dont impact other instances
$(".ui-datepicker-calendar tr").die("mousemove");
$(".ui-datepicker-calendar tr").die("mouseleave");
}
});
Đây là một giải pháp tuyệt vời và cũng hoạt động nội tuyến. Chỉ, tôi sẽ thêm một sửa đổi nhỏ; thay đổi '$ (". ui-datepicker-calendar tr ")' thành '$ (". ui-datepicker-calendar tbody tr ")' (thêm 'tbody' vào hai vị trí). Bằng cách này, 'Wk' trong tiêu đề của bảng sẽ không nhảy khi tô sáng. @ Stijn Văn Loo có thể được quan tâm quá. – Sablefoste
tôi đã sửa đổi jQueryUI-1.10.2.js tại dòng 8123:
(tôi không nhớ nơi tôi đã thấy điều này)
case 'W':
output += this.iso8601Week(new Date(date.getFullYear(), date.getMonth(), date.getDate()));
break;
Sau đó, bạn có thể chọn trong tuần với W ở định dạng ngày ==> dateFormat: 'yy-W'
$("#your_datepicker").datepicker ({ firstDay: 1, showWeek: true, showOtherMonths: true, dateFormat: 'yy-W'});
Nếu bạn có phiên bản trước của jqueryui, tìm kiếm "@" (se cũng có dấu ngoặc kép trong tệp và thêm 3 dòng này.
Trong khi giải pháp này có thể hoạt động, việc vá đặc biệt các thư viện của bên thứ ba không phải là một ý tưởng hay vì nó đảm bảo mã người tiêu dùng của bạn sẽ bị hỏng nếu/khi thư viện được nâng cấp. – amphetamachine
Bạn hoàn toàn đúng. ;) Nhưng bạn biết đấy, đôi khi, bạn muốn phá vỡ các quy tắc! ANARCHY !!! – kmas
Tôi đã tạo một plugin jQuery dựa trên câu trả lời được chấp nhận. Nhận nó tại https://github.com/Prezent/jquery-weekpicker hoặc thông qua Bower. Ví dụ sử dụng:
$('#selector').weekpicker({
startField: '#date-start',
endField: '#date-end'
});
tôi đã sử dụng một số các ví dụ trên nhưng sử dụng phương pháp khác nhau bởi vì tôi cần để hỗ trợ việc lựa chọn một tuần nhưng tuần này có thể bắt đầu vào bất kỳ ngày nào trong tuần và cần phải thay đổi dựa trên một biến. Tôi thiết lập các lớp học để nhóm mỗi td với một lớp học tuần vì vậy tôi có thể dễ dàng đánh dấu một tuần chồng lên nhau một tr. Trong ví dụ này, datepickerStartWeekDay có thể từ 0 đến 6 đại diện cho một tuần bắt đầu từ Chủ Nhật đến Thứ Bảy.
Đây là mã của tôi:
var $elem = $("input.my-date-picker");
var weekCounter = 1;
var datepickerStartWeekDay = 1;
options = {
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
onClose: function (dateText, inst) {
weekCounter = 1;
},
onSelect: function(dateText, inst) {
if (datepickerStartWeekDay != null) {
var elem = $(this);
var date = elem.datepicker('getDate');
var curDayNum = date.getDay();
var offset;
if (curDayNum > datepickerStartWeekDay) {
offset = -(curDayNum - datepickerStartWeekDay);
}
else {
offset = -(7 - (datepickerStartWeekDay - curDayNum));
}
var wkStartDate = new Date(date.addDays(offset));
elem.val(wkStartDate);
}
},
beforeShowDay: function(date) {
var retClass;
// datepickerStartWeekDay: 0 = Sunday.. 6 = Saturday
// Set up weeks based on the start day with classes.
// week1, week2, week3, etc based on the start day of the week
if (datepickerStartWeekDay != null) {
if (date.getDay() == datepickerStartWeekDay) {
weekCounter += 1;
}
retClass = [true, 'week' + weekCounter];
}
else {
retClass = [true, ''];
}
return retClass;
},
onChangeMonthYear: function(year, month, inst) {
weekCounter = 1;
}
};
$elem.datepicker(options);
// Event to list for mouseover for week selection
$(".ui-datepicker-calendar td").live('mouseover', function (ev) {
var targetElem = $(ev.currentTarget);
targetElem.closest("tbody").find(".ui-week-hover").removeClass("ui-week-hover");
for (var i = 0; i < 8; i++) {
if (targetElem.hasClass("week" + i)) {
targetElem.closest("tbody").find(".week" + i).addClass("ui-week-hover");
continue;
}
}
});`
// CSS
.ui-week-hover a {
background-color: #eef6f9 !important;
}
Tôi làm điều này nếu có ai vẫn còn quan tâm: Week Picker Converter.
Là bộ chuyển đổi trường nhỏ chuyển đổi văn bản hoặc ẩn thành bộ chọn tuần. Nếu bất cứ ai đang sử dụng nó để in một bảng (từ cơ sở dữ liệu) này là có thể sử dụng cũng như với các mẫu sau trên một truy vấn SQL chọn:
select
'<span class="displayWeek">'
|| week_field
|| '</span><input type="hidden" value="week_field" id="id_field" />'
|| '<i class="fa fa-calendar showCalendar" aria-hidden="true"
style="cursor:pointer;margin-left: 10px;"
onclick="javascript:showWeekCalendar(this, additionalFunction);"></i>'
as "WeekPicker"
from dual
Bạn cần phụ thuộc sau:
var startDate;
var endDate;
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
$('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
$(this).val($.datepicker.formatDate(dateFormat, startDate, inst.settings) + " - " + $.datepicker.formatDate(dateFormat, endDate, inst.settings));
}
});.ui-datepicker-calendar tr:hover {
background-color:#808080;
}<!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.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" class="date-picker" />
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
</body>
</html>
Điều này thật tuyệt vời nhưng chỉ hoạt động cho hiển thị nội tuyến của datepicker (được đính kèm với div hoặc span). Bất kỳ đề xuất làm thế nào để sửa đổi này khi ttached vào trường văn bản thông thường? –
Được tạo bởi Robert Gedelian: http://jsfiddle.net/MqD2n/ –
Câu hỏi nhanh ... startDate và endDate thích hợp là gì nếu tôi đặt 'firstDay: 3' –