Можно ли выделить целую неделю в стандартном наборе дат JQuery UI?
Могу ли я выделить целую неделю в стандартном наборе данных JQuery UI?
Ответ 1
Я знаю, что этот пост довольно старый, но я просто нашел этот код на другом сайте и подумал, что это может помочь.
Исходный код - от этот пост:
<!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
Ответ 2
Здесь статья, в которой показан пример того, как выбрать целую неделю с помощью datepicker.
$(function()
{
$('.date-pick').datePicker({selectWeek:true,closeOnSelect:false});
});
Ответ 3
Я написал решение, которое выделяет неделю. Он по-прежнему будет выбирать выбранную дату, но это хорошо для моих целей. #week - это поле ввода, в которое привязан датпикер.
$('#week').datepicker({
beforeShowDay: $.datepicker.noWeekends,
duration : 0,
onChangeMonthYear: function() { setTimeout("applyWeeklyHighlight()", 100); },
beforeShow: function() { setTimeout("applyWeeklyHighlight()", 100); }
}).keyup(function() { setTimeout("applyWeeklyHighlight()", 100); });
function applyWeeklyHighlight()
{
$('.ui-datepicker-calendar tr').each(function() {
if($(this).parent().get(0).tagName == 'TBODY')
{
$(this).mouseover(function() {
$(this).find('a').css({'background':'#ffffcc','border':'1px solid #dddddd'});
$(this).find('a').removeClass('ui-state-default');
$(this).css('background', '#ffffcc');
});
$(this).mouseout(function() {
$(this).css('background', '#ffffff');
$(this).find('a').css('background','');
$(this).find('a').addClass('ui-state-default');
});
}
});
}
Ответ 4
Ответ AntFalco велик, однако это не сработает, если вам нужно делать то, что я сделал. Мне нужен был способ выбрать неделю и первый день недели заполнить поле ввода, щелчок по которому генерировал дату. Вот код, который я использовал для этого:
<!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.9.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('#ui-datepicker-div').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.datepicker').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;
$(this).attr("value",$.datepicker.formatDate( dateFormat, startDate, 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();
}
});
$('#ui-datepicker-div .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('#ui-datepicker-div .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
</head>
<body>
<input type="text" id="from_date" name="from_date" class="datepicker" />
<input type="text" id="to_date" name="to_date" class="datepicker" />
</body>
</html>
Это также имеет побочный эффект работы для нескольких входных значений. Этот фрагмент кода, безусловно, наиболее полезен, если вам нужен какой-то селектор "неделя". Очень мало кода, поэтому сделать небольшие изменения для тестирования довольно просто. Кроме того, он отлично работает с функциями minDate/maxDate.
Ответ 5
Вы можете следить за предложениями в этом обсуждении для достижения своей функции выбора недели: http://code.google.com/p/jquery-datepicker/issues/detail?id=13
К сожалению, похоже, что jQuery datepicker не может справиться с выбором всей недели. Он должен быть настроен под заказ.
Ответ 6
Это невероятно поздно, но я искал одно и то же решение и мог найти ссылку только на эти типы ответов (т.е. для другого выбора даты). В моем случае я использую его встроенный, чтобы как работает этот код. Если вы хотите, чтобы он всплывал с выделенной неделю, вам придется изменить. Вот что работает:
var selectedWeek;//remember which week the user selected here
$("#inlineDIVdatepicker").datepicker({
firstDay:1,
showOtherMonths:true,
onSelect: function(dateText){
selectedWeek = $.datepicker.iso8601Week(new Date(dateText));
} ,
//set the class 'week-highlight' for the whole week
beforeShowDay: function(d){
if (!selectedWeek) { return [true,''];}
if (selectedWeek == $.datepicker.iso8601Week(d)){
return [true,'week-highlight'];
}
return [true,''];
}
});
Затем определите некоторый CSS (я действительно не сделал эту часть самостоятельно, так что это уродливо):
#inlineDIVdatepicker .week-highlight a {
background:none;
background-color:yellow;
}
Ответ 7
script выделяет неделю, начиная с выбранной даты.
Оформить рабочий пример здесь: http://jsfiddle.net/frictionless/W5GMg/
Логика:
beforeShowDay: выполняется для каждой даты в отображаемом календаре. Он вызывается во время отображения календаря и когда выбрана конкретная дата.
onВыберите: функция фиксирует выбранную неделю, начиная с выбранногоDay и beforeShowDay отображает выбранную неделю
Вот фрагмент, который работает с JQuery 1.5.1 и JQuery UI 1.8.1
$(function () {
var _dates=new Array();
$('#datepicker').datepicker({
beforeShowDay:function(_date){
if($.inArray(_date.getTime(),_dates)>=0)
return [true,"highlighted-week","Week Range"];
return[true,"",""];
},
onSelect:function(_selectedDate){
var _date=new Date(_selectedDate);
_dates=new Array();
for(i=0;i<7;i++){
var tempDate=new Date(_date.getTime());
tempDate.setDate(tempDate.getDate()+i);
_dates.push(tempDate.getTime());
}
}
});
});
Ответ 8
РЕДАКТИРОВАТЬ: Беспроблемный ответ велик, за исключением того, что вопрос заключается в том, как выбрать целую неделю (а не через 6 дней после того, как на нее нажимают). Было рекомендовано скопировать мой патч здесь.
Это упрощенная версия того, что я использую на своем сайте. Обратите внимание, что сборщик недели привязан к <span> чтобы показать первый и последний дни недели. Это требует кнопки триггера, которая ссылается на /images/schedule.png.
Измените при необходимости:
<style type="text/css">
.highlighted-week a.ui-state-default{
background: #FFFFFF;
border: 1px solid #AAAAAA;
color: #212121;
font-weight: normal
}
</style>
<!-- include jquery and jquery-ui here -->
<script type="text/javascript">
// This $(function()) block could be moved to another file. It what I did.
$(function() {
var internal = 0;
if (typeof SVG == 'undefined') SVG = {};
if (typeof SVG.Weekpicker == 'undefined') SVG.Weekpicker = {};
SVG.Weekpicker.GetWeek = function(_selectedDate) {
var week = new Array();
/* ***NOTE*** This is the only line required to "fix" Frictionless' code. */
_selectedDate.setDate(_selectedDate.getDate()-_selectedDate.getDay());
for (i = 0; i < 7; i++) {
var tempDate = new Date(_selectedDate.getTime());
tempDate.setDate(tempDate.getDate() + i);
week.push(tempDate.getTime());
}
return week;
};
SVG.Weekpicker.Init = function(selector) {
var elem = $(selector);
var insert = $('<input type="hidden" name="weekpicker'+(++internal)+'" value="'+elem.html()+'" />');
SVG.Weekpicker._dates = SVG.Weekpicker.GetWeek(new Date());
insert = insert.insertAfter(elem);
insert.datepicker({
beforeShowDay: function(_date) {
if ($.inArray(_date.getTime(), SVG.Weekpicker._dates) >= 0)
return [true, "highlighted-week", "Week Range"];
return [true, "", ""];
},
onSelect: function(_selectedDate) {
var _date = new Date(_selectedDate);
SVG.Weekpicker._dates = SVG.Weekpicker.GetWeek(_date);
var start = new Date(SVG.Weekpicker._dates[0]);
var end = new Date(SVG.Weekpicker._dates[6]);
$(elem).html(($.datepicker.formatDate('MM d, yy', start, '')+' — '+$.datepicker.formatDate('MM d, yy', end, ''))+' ');
},
showOn: "button",
buttonImage: "/images/schedule.png",
buttonImageOnly: false,
showAnim: "slideDown",
});
};
});
$(document).ready(function() {
// Attach a week picker to the weekpicker <span> tag.
SVG.Weekpicker.Init("#weekpicker");
}
</script>
<body>
<span id="weekpicker"></span>
</body>
Ответ 9
Я искал сделать то же самое, но также хотел, чтобы поле ввода отображало выбранный диапазон недель - вот что я в итоге сделал (в основном используйте altField для хранения выбранной даты, но отображаем отформатированный диапазон недель в поле ввода, которое заменяется фактической датой с использованием datepicker beforeOhow callback. Coffeescript ниже: gist можно найти здесь: https://gist.github.com/2048010
weekchooser = ->
$('#datepicker').datepicker({
dateFormat: "M d, yy",
altFormat: "M d, yy",
altField: "#actualdate",
selectWeek: true,
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true,
beforeShow: ->
$('#datepicker').val($('#actualdate').val())
onClose: (date) ->
reformatWeek(date)
this.blur()
}).click ->
currentDay = $('.ui-datepicker-current-day')
currentDay.siblings().find('a').addClass('ui-state-active')
calendarTR = $('.ui-datepicker .ui-datepicker-calendar tr');
calendarTR.live 'mousemove', (event) ->
$(this).find('td a').addClass('ui-state-hover');
calendarTR.live 'mouseleave', (event) ->
$(this).find('td a').removeClass('ui-state-hover');
reformatWeek = (dateText) ->
$('#datepicker').datepicker('refresh')
current = parseInt($('.ui-datepicker-current-day').find('a').html())
weekstart = parseInt($('.ui-datepicker-current-day').siblings().find('a').first().html())
weekend = parseInt($('.ui-datepicker-current-day').siblings().find('a').last().html())
pattern = ///
^([a-zA-Z]+)\s+([0-9]{1,2})(,.*)
///
[month, day, year] = dateText.match(pattern)[1..3]
date = if weekstart > current
first_month = relativeMonth(month, -1)
"#{first_month} #{weekstart} - #{month} #{weekend}#{year}"
else if weekend < current
last_month = relativeMonth(month, 1)
"#{month} #{weekstart} - #{last_month} #{weekend}#{year}"
else
"#{month} #{weekstart} - #{weekend}#{year}"
$('#datepicker').val( date )
relativeMonth = (month, c) ->
monthArray = $('#datepicker').datepicker('option', "monthNamesShort")
index = monthArray.indexOf(month)
if c > 0
return if index + c > monthArray.length - 1 then monthArray[0] else monthArray[index + c]
else
return if index + c < 0 then monthArray[monthArray.length - 1] else monthArray[index + c]
Ответ 10
Я создал плагин jQuery, основанный на верхнем ответе. Получите его https://github.com/Prezent/jquery-weekpicker или через Bower. Пример использования:
$('#selector').weekpicker({
startField: '#date-start',
endField: '#date-end'
});
Ответ 11
Вы можете проверить ответ на вопрос ниже
Как использовать jQuery UI Calendar/Date PIcker для недели, а не дня?
$(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'); });
});
Ответ 12
Не работает с несколькими сборщиками/последним jquery.ui. Попробуйте эту небольшую переписку:
jQuery(function() {
var startDate; // closure
var endDate;
var baseAttachHandler = jQuery.datepicker._attachHandlers;
jQuery.datepicker._attachHandlers = function(inst) {
baseAttachHandler.apply(this, [inst]);
var element_data = jQuery._data(inst.dpDiv.get(0));
var ori_handler_mouseover = element_data.events.mouseover[0].handler;
var ori_handler_mouseout = element_data.events.mouseout[0].handler;
// remove handlers
inst.dpDiv.undelegate("button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a", 'mouseover');
inst.dpDiv.undelegate("button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a", 'mouseout');
inst.dpDiv.undelegate("button, .ui-datepicker-prev, .ui-datepicker-next", 'mouseover');
inst.dpDiv.undelegate("button, .ui-datepicker-prev, .ui-datepicker-next", 'mouseout');
inst.dpDiv.find(".ui-datepicker-calendar tr").unbind('mouseover');
inst.dpDiv.find(".ui-datepicker-calendar tr").unbind('mouseout');
// attach proper ones
if (this._get(inst, "weekSelector")) {
inst.dpDiv.delegate("button, .ui-datepicker-prev, .ui-datepicker-next", 'mouseover', ori_handler_mouseover);
inst.dpDiv.delegate("button, .ui-datepicker-prev, .ui-datepicker-next", 'mouseout', ori_handler_mouseout);
inst.dpDiv.find(".ui-datepicker-calendar tr").bind('mouseover', function() {
jQuery(this).find('td a').addClass('ui-state-hover');
});
inst.dpDiv.find(".ui-datepicker-calendar tr").bind('mouseout', function() {
jQuery(this).find('td a').removeClass('ui-state-hover');
});
} else {
inst.dpDiv.delegate("button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a", 'mouseover', ori_handler_mouseover);
inst.dpDiv.delegate("button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a", 'mouseout', ori_handler_mouseout);
}
};
jQuery.datepicker.calcWeekBoundaries = function () {
var date = jQuery(this).datepicker('getDate');
if (date) {
var tmp = date.getDay();
if (tmp == 0) { // starting with monday, i'm italian ;-)
endDate = date;
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 6);
} else {
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - tmp + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - tmp + 7);
}
}
};
jQuery("#yourcontrol").datepicker(
jQuery.extend({}, jQuery.datepicker.regional["yourlanguage"], {
showOtherMonths: true
, selectOtherMonths: true
, changeMonth: true
, changeYear: true
, onSelect: function(dateText, inst) {
if (jQuery.datepicker._get(inst, "weekSelector")) {
jQuery.datepicker.calcWeekBoundaries.apply(this, []);
jQuery(this).datepicker('setDate', startDate);
}
inst.input.trigger("change");
}
, beforeShowDay: function(date) {
var inst = jQuery.data(this, "datepicker");
var cssClass = '';
if (jQuery.datepicker._get(inst, "weekSelector") && date) {
if(date >= startDate && date <= endDate) {
cssClass = 'ui-state-active';
}
}
return [true, cssClass];
}
, beforeShow: function(input, inst) {
jQuery.datepicker.calcWeekBoundaries.apply(this, []);
}
, weekSelector: true // the magic is here
})
);
});