Могу ли я выделить целую неделю в стандартном наборе данных JQuery UI?

Могу ли я выделить целую неделю в стандартном наборе данных JQuery UI?

Я знаю, что этот пост довольно старый, но я просто нашел этот код на другом сайте и подумал, что это может помочь.

Исходный код – из этого сообщения :

         


-

>

Я написал для этого решение, которое подчеркивает неделю. Он по-прежнему будет выбирать выбранную дату, но это хорошо для моих целей. #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'); }); } }); } по $('#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'); }); } }); } . $('#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'); }); } }); } по $('#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'); }); } }); } . $('#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'); }); } }); } 

Вот статья, в которой есть пример того, как выбрать целую неделю с помощью datepicker.

 $(function() { $('.date-pick').datePicker({selectWeek:true,closeOnSelect:false}); }); 

Ответ AntFalco велик, однако это не сработает, если вам нужно делать то, что я сделал. Мне нужен был способ выбрать неделю и первый день недели заполнить поле ввода, щелчок по которому генерировал дату. Вот код, который я использовал для этого:

              

Это также имеет побочный эффект от работы с несколькими входными значениями. Этот fragment кода, безусловно, наиболее полезен, если вам нужен какой-то селектор «неделя». Очень мало кода, поэтому сделать небольшие изменения для тестирования довольно просто. Кроме того, он отлично работает с функциями minDate / maxDate.

Вы можете следить за предложениями в этом обсуждении, чтобы достичь своей функции выбора недели: http://code.google.com/p/jquery-datepicker/issues/detail?id=13

К сожалению, похоже, что jQuery datepicker не может справиться с выбором всей недели. Он должен быть настроен под заказ.

Это невероятно поздно, но я искал одно и то же решение и мог найти ссылку на эти типы ответов (т. Е. Для другого выбора даты). В моем случае я использую его встроенный, так вот как работает этот код. Если вы хотите, чтобы он всплывал с выделенной неделю, вам придется изменить. Вот что работает:

 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; } 

В сценарии выделяется неделя, начинающаяся с выбранной даты.

Оформить рабочий пример здесь: http://jsfiddle.net/frictionless/W5GMg/

Логика:

beforeShowDay : запускается для каждой даты в отображаемом календаре. Он вызывается во время отображения календаря и когда выбрана конкретная дата.

onSelect : функция фиксирует выбранную неделю, начиная с выбранногоDay, и beforeShowDay отображает выбранную неделю

Вот fragment, который работает с 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()); } } }); }); 

EDIT: Ответ на трение отличен, за исключением того, что вопрос заключается в том, как выбрать всю неделю (а не через 6 дней после того, как на нее нажимают). Было рекомендовано скопировать мой патч здесь.

Это упрощенная версия того, что я использую на своем сайте. Обратите внимание, что сборщик недели привязан к тегу , чтобы показать первый и последний дни недели. Это требует кнопки триггера, которая ссылается на /images/schedule.png.

Изменение по мере необходимости:

       

Я хотел сделать то же самое, но также хотел, чтобы поле ввода отображало выбранный диапазон недель – вот что я в итоге сделал (в основном используйте altField для хранения выбранной даты, но отображаем отформатированный диапазон недель в поле ввода, заменяется фактической датой с использованием datepicker beforeShow 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] 

Я создал плагин jQuery, основанный на верхнем ответе. Получите его на https://github.com/Prezent/jquery-weekpicker или через Bower. Пример использования:

 $('#selector').weekpicker({ startField: '#date-start', endField: '#date-end' }); 

Вы можете проверить ответ на указанную ниже ссылку

Как использовать 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'); }); 

});

Не работает с несколькими сборщиками / последним 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 }) ); });