He estado usando el calendario/selector de fechas jQuery UI con gran éxito en los últimos meses. Me han dado un nuevo requisito para permitir que se seleccione una semana (dom - sáb) en lugar de un solo día.Cómo usar jQuery UI Calendario/Fecha PIcker por semana en lugar de por día?
¿Alguien ha logrado esto antes?
Inline selector de semana usando jQuery UI DataPicker (requiere 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>
ejecutarlo en jsFiddle http://jsfiddle.net/manishma/AVZJh/light/
Aquí hay otra manera de hacerlo. -Exhibición de la semana con showWeek. - Defina un beforeShow para adjuntar un controlador de eventos utilizando live() para que la fila de la semana esté resaltada (incluido el número de la semana). - Separe el controlador de eventos con die() onclose. Esto es particularmente útil cuando usa datapickers normales en cualquier parte de su código.
$(".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");
}
});
Esta es una gran solución y también funciona en línea. Solo que agregaría una pequeña modificación; cambie '$ (". ui-datepicker-calendar tr ")' a '$ (". ui-datepicker-calendar tbody tr ")' (agregando 'tbody' en dos lugares). De esta manera, la 'Wk' en el encabezado de la tabla no saltará al resaltar. @Stijn Van Loo también puede estar interesado. – Sablefoste
que han modificado las jQueryUI-1.10.2.js en la línea 8123:
(no recuerdo donde he visto este)
case 'W':
output += this.iso8601Week(new Date(date.getFullYear(), date.getMonth(), date.getDate()));
break;
Posteriormente, se podría seleccionar la semana con W en formato de fecha ==> dateFormat: 'yy-W'
$("#your_datepicker").datepicker ({ firstDay: 1, showWeek: true, showOtherMonths: true, dateFormat: 'yy-W'});
Si tiene una versión anterior de jqueryui, busque "@" (sE arquee las comillas también) en el archivo y agregue estas 3 líneas.
Si bien esta solución puede funcionar, el parche ad-hoc de las bibliotecas de terceros no es una buena idea, ya que garantiza que su código de consumidor se romperá si/cuando la biblioteca se actualice. – amphetamachine
Tienes toda la razón. ;) Pero sabes, a veces, ¡quieres romper las reglas! ANARQUÍA !!! – kmas
He creado un plugin jQuery basado en la respuesta aceptada. Consíguelo en https://github.com/Prezent/jquery-weekpicker oa través de Bower. Ejemplo de uso:
$('#selector').weekpicker({
startField: '#date-start',
endField: '#date-end'
});
que utiliza algunos de los ejemplos anteriores, pero tomó un enfoque diferente porque tengo que apoyar a la selección de una semana, pero la semana podría comenzar en cualquier día de la semana y tiene que cambiar en función de una variable. Configuré clases para agrupar cada td con una clase de semana, de modo que puedo resaltar fácilmente una semana que se solapa con un tr. En este ejemplo, datepickerStartWeekDay puede ser de 0 a 6, lo que representa una semana que comienza de domingo a sábado.
Aquí está mi código:
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;
}
Hice este si alguien sigue interesado: Week Picker Converter.
Es un convertidor de campo pequeño que convierte texto u oculto en el selector de semana. Si alguien lo está utilizando para imprimir una tabla (base de datos), este es utilizable también con el siguiente patrón en una consulta SQL seleccionar:
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
Se necesitan las siguientes dependencias:
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>
Esto es grande, pero sólo funciona para la visualización en línea del planificador de evento (que se adjunta a div o intervalo). ¿Alguna sugerencia de cómo modificar esto cuando esté conectado al campo de texto normal? –
Realizado por Robert Gedelian: http://jsfiddle.net/MqD2n/ –
Pregunta rápida ... cuál es el fecha y hora de inicio correctas si establezco 'firstDay: 3' –