Używam jQuery Calendar/Date Picker z wielkim sukcesem w ciągu ostatnich kilku miesięcy. Dostałem nowy wymóg, aby umożliwić wybór tygodnia (niedz - sob) zamiast jednego dnia.Jak korzystać z kalendarza jQuery UI/Data PIcker na tydzień, a nie dzień?
Czy ktoś już to zrobił?
Inline tydzień kompletacji jQuery UI DataPicker (wymaga 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>
uruchomić go na JsFiddle http://jsfiddle.net/manishma/AVZJh/light/
Oto inny sposób na to. - Wyświetlaj tydzień z showWeek. - Zdefiniuj beforeshow, aby dołączyć obsługę zdarzeń za pomocą funkcji live(), aby podświetlić wiersz tygodnia (w tym numer tygodnia). - Odłącz procedurę obsługi za pomocą matrycy() onclose. Jest to szczególnie przydatne, gdy używasz zwykłych datepickerów w innym miejscu kodu.
$(".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");
}
});
To świetne rozwiązanie, działa również w trybie inline. Tylko, dodałbym jedną małą modyfikację; zmień '$ (". ui-datepicker-calendar tr ")' na '$ (". ui-datepicker-calendar tbody tr ")' (dodając 'tbody' w dwóch miejscach). W ten sposób "Wk" w nagłówku tabeli nie będzie podskakiwany podczas podświetlania. @Stijn Van Loo może być również zainteresowany. – Sablefoste
mam zmodyfikowała jQueryUI-1.10.2.js na linii 8123:
(nie pamiętam gdzie widziałem tego)
case 'W':
output += this.iso8601Week(new Date(date.getFullYear(), date.getMonth(), date.getDate()));
break;
Następnie można wybrać tydzień z w w formacie daty ==> dateformat: 'yy-w'
$("#your_datepicker").datepicker ({ firstDay: 1, showWeek: true, showOtherMonths: true, dateFormat: 'yy-W'});
Jeżeli masz zainstalowaną poprzednią wersję jQueryUI, wyszukiwania dla "@" (se arch również cytaty) w pliku i dodać te 3 linie.
Chociaż to rozwiązanie może działać, doraźne łatanie bibliotek innych firm nie jest dobrym pomysłem, ponieważ gwarantuje, że kod konsumenta ulegnie zniszczeniu, jeśli/kiedy biblioteka zostanie uaktualniona. – amphetamachine
Masz absolutną rację. ;) Ale wiesz, czasami chcesz łamać zasady! ANARCHY !!! – kmas
Utworzyłem wtyczkę jQuery opartą na zaakceptowanej odpowiedzi. Zdobądź go pod https://github.com/Prezent/jquery-weekpicker lub przez Bower. Przykład użycia:
$('#selector').weekpicker({
startField: '#date-start',
endField: '#date-end'
});
Kiedyś niektóre z powyższych przykładów, ale miała inne podejście, bo trzeba wspierać wybierając w tygodniu, ale w tygodniu można uruchomić w dowolnym dniu tygodnia i musi ulec zmianie na podstawie zmiennej. Założyłem klasy, aby pogrupować każdy td z klasą tygodniową, dzięki czemu mogę łatwo wyróżnić tydzień, który pokrywa się z tr. W tym przykładzie datepickerStartWeekDay może mieć wartość od 0 do 6, reprezentującą tydzień rozpoczynający się od niedzieli do soboty.
Oto mój kod:
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;
}
Zrobiłem to, czy ktoś jest nadal zainteresowany: Week Picker Converter.
Jest to mały przetwornik pola, który konwertuje tekst lub ukryty w selektorze tygodniowym. Jeśli ktoś używa go wydrukować tabelę (z bazy danych) jest użyteczny również z poniższego wzoru na zapytanie SQL wybrać:
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
potrzebne są następujące zależności:
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>
To jest dobre, ale działa tylko na rolkach wyświetlaniem datepicker (dołączony do div lub zakresu). Jakieś sugestie, jak zmodyfikować ten tekst do standardowego pola tekstowego? –
Wykonane przez Roberta Gedeliana: http://jsfiddle.net/MqD2n/ –
Szybkie pytanie ... co to jest właściwa data początkowa i końcowa, jeśli ustawię "firstDay: 3" –