Question

我在过去几个月里一直在使用jQuery UI Calendar / Date Picker取得了巨大的成功。我有一个新的要求，允许选择一周（周日 - 周六），而不是一天。

有没有人完成过这个？

按周而不是白天突出显示
显示开始日期和结束日期，而不是文本框/标签中的单个日期

Answer 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/

上运行它

Answer 2

这是另一种方式。 - 用showWeek显示一周。 - 使用live（）定义beforeShow以附加事件处理程序，以便突出显示周行（包括周数）。 - 使用die（）onclose分离事件处理程序。当您在代码中的其他位置使用普通的日期选择器时，这尤其方便。

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

我根据接受的答案创建了一个jQuery插件。在https://github.com/Prezent/jquery-weekpicker或通过Bower获取。用法示例：

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

Answer 4

您需要以下依赖项：

的jquery.js
的jquery-ui.min.js
的jquery-ui.css

＆＃13;

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

＆＃13;

.ui-datepicker-calendar tr:hover { 
    background-color:#808080;
}

＆＃13;

<!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>

＆＃13;

Answer 5

我在第8123行修改了jqueryui-1.10.2.js：

（我不记得我在哪看过这个）

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

然后您可以选择W日期格式的周==＆gt; dateFormat：＆＃39; yy-W＆＃39;

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

如果您有以前版本的jqueryui，请搜索＆＃34; @＆＃34; （在文件中也搜索引号）并添加这3行。

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

Answer 7

如果有人仍然感兴趣，我就这样做了：Week Picker Converter。

是一个小型字段转换器，可将文本或隐藏转换为周选择器。如果有人使用它来打印表（来自数据库），那么在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 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's date
      var monday = $('#FromDate').datepicker('getDate');

      //Set the time of today's 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's 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");
});

如何使用jQuery UI Calendar / Date PIcker一周而不是一天？

8 个答案: