javascript - ejemplos - ¿Cómo usar jQuery UI Calendar/Date PIcker por semana en lugar de por día?

jquery datepicker events

Question

He estado usando el calendario de jQuery UI / selector de fecha 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.

¿Alguien ha logrado esto antes?

• destacando por semana en lugar de por día
• mostrar la fecha de inicio y la fecha de finalización en lugar de la fecha única en el cuadro de texto / etiquetas

Answer 1

Aquí hay otra manera de hacerlo. -Muestra 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");
}
});

Answer 2

Creé 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''
});

Answer 3

He modificado el jqueryui-1.10.2.js en la línea 8123:

(No recuerdo dónde he visto esto)

case ''W'':
output += this.iso8601Week(new Date(date.getFullYear(), date.getMonth(), date.getDate()));
break;

Luego puede seleccionar la semana con W en formato de fecha ==> dateFormat: ''aa-W''

$("#your_datepicker").datepicker ({ firstDay: 1, showWeek: true, showOtherMonths: true, dateFormat: ''yy-W''});

Si tiene una versión anterior de jqueryui, busque "@" (busque también las comillas) en el archivo y agregue estas 3 líneas.

Answer 4

Hice esto si alguien todavía está 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á usando para imprimir una tabla (desde la base de datos), también se puede usar con el siguiente patrón en una consulta SQL:

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

Answer 5

Necesita las siguientes dependencias:

1. jquery.js
2. jquery-ui.min.js
3. jquery-ui.css

 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>

Answer 6

Selector de semana en línea 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/

Answer 7

Usé algunos de los ejemplos anteriores pero adopté un enfoque diferente porque necesito apoyar la selección de una semana, pero la semana podría comenzar cualquier día de la semana y debe 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;
}