Как использовать jQuery UI Calendar/Date PIcker для недели, а не дня?

Я использую jQuery UI Calendar/Date Picker с большим успехом за последние пару месяцев. Мне было дано новое требование, чтобы можно было выбрать неделю (Sun - Sat), а не один день.

Кто-нибудь сделал это раньше?

выделение по неделям, а не день
показать дату начала и дату окончания, а не одну дату в текстовом поле/ярлыках

Ответы

Ответ 1

Встроенный выбор недели с использованием jQuery UI DataPicker (требуется 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>

запустите его на JsFiddle http://jsfiddle.net/manishma/AVZJh/light/

Ответ 2

Вот еще один способ пойти на это. -Открыть неделю с помощью showWeek. - Определите beforeShow для присоединения обработчика событий, используя live(), чтобы подсвечивалась строка недели (включая номер недели). - Отсоедините обработчик события с кнопкой die(). Это особенно удобно, если вы используете обычных дампикеров в другом месте вашего кода.

$( ".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");

    }
});

Ответ 3

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

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

Ответ 4

Вам понадобятся следующие зависимости:

jquery.js
JQuery-ui.min.js
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>

Ответ 5

Я изменил jqueryui-1.10.2.js в строке 8123:

(Я не помню, где я это видел)

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

Затем вы можете выбрать неделю с W в формате даты == > dateFormat: 'yy-W'

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

Если у вас есть предыдущая версия jqueryui, найдите "@" (ищите кавычки) в файле и добавьте эти 3 строки.

Ответ 6

Я использовал некоторые из приведенных выше примеров, но использовал другой подход, потому что мне нужно поддерживать выбор недели, но неделя может начинаться в любой день недели и должна изменяться в зависимости от переменной. Я настраивал классы для группировки каждого td с недельным классом, поэтому я могу легко выделить неделю, которая перекрывает tr. В этом примере datepickerStartWeekDay может быть от 0 до 6, представляя неделю, начиная с воскресенья по субботу.

Вот мой код:

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

Ответ 7

Я сделал это, если кому-то все еще интересно: Week Picker Converter.

Является небольшим преобразователем поля, который преобразует текст или скрывается в блок выбора недели. Если кто-либо использует его для печати таблицы (из базы данных), это также можно использовать со следующим шаблоном в SQL Query:

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

Ответ 8

$(function () {
  var date = $('#FromDate').datepicker('getDate');
  date.setMonth(date.getMonth() + 1);
  var year = date.getFullYear(); //get year
  var month = date.getMonth();
  var date1 = date.getDate();
  $("#ToDate").datepicker("setDate", date);

  $("#ToDate").datepicker({
    //In Datepicker set the Calendar display start with Monday

    firstDay: $('#FromDate').datepicker('getDate'),
    //stepMonths: 0 ,
    //month: date.getMonth(), 
    showOtherMonths: true,
    selectOtherMonths: true,
    startDate: new Date(month, date1, year), //set it here
    endDate: new Date(month, '31', year + 1),
    beforeShowDay: function (date) {
      //var monday = new Date("June 1, 2013 00:00:00"); Used it for testing

      //Get today date
      var monday = $('#FromDate').datepicker('getDate');

      //Set the time of today date to 00:00:00
      monday.setHours(0, 0, 0, 0);

      //alert(monday.getDay() + ' : ' + monday.getDate() + ' : ' + (monday.getDay() || 7) + ' : ' + monday); Used it for testing

      /*
      Below Line sets the Date to Monday (Start of that Week)
      (monday.getDay() || 7) returns the value of getDay()
      ie., [ 1 - Mon, 2 - Tue, 3 - Wed, 4 - Thu, 5 - Fri, 6 - Sat ]
      except for Sunday where it returns 7.
      The return value is used to calculate the Date of that Week Monday
      */

      monday.setDate(monday.getDate() + 1 - (monday.getDay() || 7));

      //Set the Date to Monday
      var sunday = new Date(monday);

      //Now add 6 to Monday to get the Date of Sunday (End of that Week)
      sunday.setDate(monday.getDate() + 6);
      //Now return the enabled and disabled dates to datepicker
      return [(date >= monday && date <= sunday), ''];
    },

  });

  //Set the date format to dd/mm/yy ie., 30/10/1989
  $("#ToDate").datepicker("option", "dateFormat", "mm/dd/yy");
});