我可以在标准Jquery UI日期选择器中突出显示整个星期吗?

时间：2022-11-29 23:39:52

Can I highlight an entire week in the standard Jquery UI date picker?

我可以在标准Jquery UI日期选择器中突出显示整个星期吗?

12 个解决方案

#1

27  

I know this post is quite old but I just found this code on another site and thought it might help.

我知道这篇文章已经很旧了，但是我刚刚在另一个网站上找到了这段代码，我认为它可能会有所帮助。

Source code - from this post :

源代码-从这篇文章:

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

3  

I wrote a solution to this, which highlights the week. It will still pick the date selected, but that is fine for my purposes. #week is the input box that has the datepicker attached.

我为此写了一个解决方案，突出了这一周。它仍然会选择选定的日期，但这对我的目的来说是可以的。#week是带有datepicker的输入框。

$('#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');
            });
        }

    });
}

#3

2  

Here's an article that has an example of how to select an entire week with the datepicker.

这里有一篇文章提供了如何使用datepicker选择整个星期的示例。

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

#4

2  

AntFalco's answer is great, however it doesn't work well if you need to do what I did. I needed a way to select a week and have the first day of the week populate into an input box, a click on which generated the datepicker. Here is the code I used to accomplish this:

安特法尔科的回答很好，但是如果你需要做我做过的事情，它就不能很好地工作。我需要一种方法来选择一个星期，并将一周的第一天填充到一个输入框中，单击该输入框将生成datepicker。下面是我用来实现这一目标的代码:

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

This also has the side effect of working for multiple input values as well. This chunk of code is by far the most useful if you need some sort of "week" selector. There is very little code so making small modifications to test is quite easy. Also, it works fine with minDate/maxDate functions.

这也会对多个输入值产生副作用。如果您需要某种“周”选择器，那么这段代码到目前为止是最有用的。代码非常少，所以对测试进行小的修改非常容易。此外，它还适用于minDate/maxDate函数。

#5

1  

You may be able to follow the suggestions in this discussion to achieve your week selection feature: http://code.google.com/p/jquery-datepicker/issues/detail?id=13

您可以按照本讨论中的建议来实现您的周选择特性:http://code.google.com/p/jquerydatepicker/detail? id=13。

Unfortunately, though, it looks like the jQuery datepicker can't handle picking an entire week. It'll need to be custom coded.

不幸的是，看起来jQuery datepicker不能处理整个星期的选择。它需要自定义编码。

#6

1  

This is incredibly late, but I was searching for the same solution and could only find reference to these types of answers (i.e. for a different date picker). In my case, I'm using it inline, so that's how this code works. If you want it to pop-up with a week highlighted, you would have to modify. Here is something that works:

这已经非常晚了，但是我一直在寻找相同的解决方案，只能找到这些类型的答案(例如，对于不同的日期选择器)。在我的例子中，我使用内联，这就是代码的工作方式。如果你想让它弹出一个突出显示的星期，你必须修改。以下是一些行之有效的方法:

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,''];
    }
});

Then define some CSS (I haven't really done this part myself, so this is ugly):

然后定义一些CSS(我自己还没有完成这部分，所以这部分很难看):

#inlineDIVdatepicker .week-highlight a {
  background:none;
  background-color:yellow;  
}

#7

1  

The script highlights a week starting from the selected date.

 Checkout a working example here: http://jsfiddle.net/frictionless/W5GMg/

剧本强调了从选定日期开始的一周。在这里签出一个工作示例:http://jsfiddle.net/tionless/w5gmg/

Logic:

逻辑:

beforeShowDay : is run for each date in the calendar displayed. It is called at the time of display of the calendar and when a particular date is selected.

前面的日期:为日历中显示的每个日期运行。它在日历显示时和选择特定日期时调用。

onSelect : function captures the selected week starting from the selectedDay and beforeShowDay renders the selected week

onSelect:函数捕获从selectedDay开始的所选周，并在此之前显示所选周

Here is a snippet which works with Jquery 1.5.1 and JQuery UI 1.8.1

下面是一个使用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

1  

EDIT: Frictionless's answer is great, except that the question was of how to select the entire week (not the 6 days following whatever is clicked on). It was recommended that I copy my patch here.

编辑:无摩擦的回答很好，除了问题是如何选择整个星期(而不是点击后的6天)。有人建议我在这里复制我的补丁。

This is a simplified version of what I am using on my site. Note that the week picker is pegged to a <span> tag in order to show the first and last days of the week. This necessitates a trigger button which references /images/schedule.png.

这是我在我的站点上使用的简化版本。注意，周选择器被绑定到标签，以显示一周的第一天和最后一天。这就需要一个触发器按钮来引用/图像/日程安排。png。

Change as required:

改变的要求:

<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's 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, '')+' &mdash; '+$.datepicker.formatDate('MM d, yy', end, ''))+'&nbsp;&nbsp;');
                },
                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

1  

I was looking to do the same thing but also wanted the input field to display the selected week range -- here's what I ended up doing (basically use the altField to store the selected date, but display a formatted week range in the input field that is replaced by the actual date using the datepicker beforeShow callback. Coffeescript is below; gist can be found here: https://gist.github.com/2048010

我正在做同样的事情,但也希望输入字段显示所选周范围——这是我最后做什么(基本上使用altField存储选中的日期,但显示格式化的周范围内的输入字段使用datepicker beforeShow取而代之的是实际日期回调。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

1  

I have created a jQuery plugin based on the top answer. Get it at https://github.com/Prezent/jquery-weekpicker or through Bower. Example usage:

我基于上面的答案创建了一个jQuery插件。在https://github.com/prezent/jqueryweekpicker或通过Bower获取它。使用示例:

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

#11

0  

You can check the answered question in the link below

你可以在下面的链接中找到答案

How to use jQuery UI Calendar/Date PIcker for week rather than day?

如何使用jQuery UI日历/日期选择器进行周而不是日?

$(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

0  

Is not working with multiple pickers / last jquery.ui. Try this little rewrite:

不使用多个选择器/ last 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
        })
    );
});

#1

27  

I know this post is quite old but I just found this code on another site and thought it might help.

我知道这篇文章已经很旧了，但是我刚刚在另一个网站上找到了这段代码，我认为它可能会有所帮助。

Source code - from this post :

源代码-从这篇文章:

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

3  

I wrote a solution to this, which highlights the week. It will still pick the date selected, but that is fine for my purposes. #week is the input box that has the datepicker attached.

我为此写了一个解决方案，突出了这一周。它仍然会选择选定的日期，但这对我的目的来说是可以的。#week是带有datepicker的输入框。

$('#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');
            });
        }

    });
}

#3

2  

Here's an article that has an example of how to select an entire week with the datepicker.

这里有一篇文章提供了如何使用datepicker选择整个星期的示例。

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

#4

2  

AntFalco's answer is great, however it doesn't work well if you need to do what I did. I needed a way to select a week and have the first day of the week populate into an input box, a click on which generated the datepicker. Here is the code I used to accomplish this:

安特法尔科的回答很好，但是如果你需要做我做过的事情，它就不能很好地工作。我需要一种方法来选择一个星期，并将一周的第一天填充到一个输入框中，单击该输入框将生成datepicker。下面是我用来实现这一目标的代码:

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

This also has the side effect of working for multiple input values as well. This chunk of code is by far the most useful if you need some sort of "week" selector. There is very little code so making small modifications to test is quite easy. Also, it works fine with minDate/maxDate functions.

这也会对多个输入值产生副作用。如果您需要某种“周”选择器，那么这段代码到目前为止是最有用的。代码非常少，所以对测试进行小的修改非常容易。此外，它还适用于minDate/maxDate函数。

#5

1  

You may be able to follow the suggestions in this discussion to achieve your week selection feature: http://code.google.com/p/jquery-datepicker/issues/detail?id=13

您可以按照本讨论中的建议来实现您的周选择特性:http://code.google.com/p/jquerydatepicker/detail? id=13。

Unfortunately, though, it looks like the jQuery datepicker can't handle picking an entire week. It'll need to be custom coded.

不幸的是，看起来jQuery datepicker不能处理整个星期的选择。它需要自定义编码。

#6

1  

This is incredibly late, but I was searching for the same solution and could only find reference to these types of answers (i.e. for a different date picker). In my case, I'm using it inline, so that's how this code works. If you want it to pop-up with a week highlighted, you would have to modify. Here is something that works:

这已经非常晚了，但是我一直在寻找相同的解决方案，只能找到这些类型的答案(例如，对于不同的日期选择器)。在我的例子中，我使用内联，这就是代码的工作方式。如果你想让它弹出一个突出显示的星期，你必须修改。以下是一些行之有效的方法:

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,''];
    }
});

Then define some CSS (I haven't really done this part myself, so this is ugly):

然后定义一些CSS(我自己还没有完成这部分，所以这部分很难看):

#inlineDIVdatepicker .week-highlight a {
  background:none;
  background-color:yellow;  
}

#7

1  

The script highlights a week starting from the selected date.

 Checkout a working example here: http://jsfiddle.net/frictionless/W5GMg/

剧本强调了从选定日期开始的一周。在这里签出一个工作示例:http://jsfiddle.net/tionless/w5gmg/

Logic:

逻辑:

beforeShowDay : is run for each date in the calendar displayed. It is called at the time of display of the calendar and when a particular date is selected.

前面的日期:为日历中显示的每个日期运行。它在日历显示时和选择特定日期时调用。

onSelect : function captures the selected week starting from the selectedDay and beforeShowDay renders the selected week

onSelect:函数捕获从selectedDay开始的所选周，并在此之前显示所选周

Here is a snippet which works with Jquery 1.5.1 and JQuery UI 1.8.1

下面是一个使用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

1  

EDIT: Frictionless's answer is great, except that the question was of how to select the entire week (not the 6 days following whatever is clicked on). It was recommended that I copy my patch here.

编辑:无摩擦的回答很好，除了问题是如何选择整个星期(而不是点击后的6天)。有人建议我在这里复制我的补丁。

This is a simplified version of what I am using on my site. Note that the week picker is pegged to a <span> tag in order to show the first and last days of the week. This necessitates a trigger button which references /images/schedule.png.

这是我在我的站点上使用的简化版本。注意，周选择器被绑定到标签，以显示一周的第一天和最后一天。这就需要一个触发器按钮来引用/图像/日程安排。png。

Change as required:

改变的要求:

<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's 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, '')+' &mdash; '+$.datepicker.formatDate('MM d, yy', end, ''))+'&nbsp;&nbsp;');
                },
                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

1  

I was looking to do the same thing but also wanted the input field to display the selected week range -- here's what I ended up doing (basically use the altField to store the selected date, but display a formatted week range in the input field that is replaced by the actual date using the datepicker beforeShow callback. Coffeescript is below; gist can be found here: https://gist.github.com/2048010

我正在做同样的事情,但也希望输入字段显示所选周范围——这是我最后做什么(基本上使用altField存储选中的日期,但显示格式化的周范围内的输入字段使用datepicker beforeShow取而代之的是实际日期回调。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

1  

I have created a jQuery plugin based on the top answer. Get it at https://github.com/Prezent/jquery-weekpicker or through Bower. Example usage:

我基于上面的答案创建了一个jQuery插件。在https://github.com/prezent/jqueryweekpicker或通过Bower获取它。使用示例:

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

#11

0  

You can check the answered question in the link below

你可以在下面的链接中找到答案

How to use jQuery UI Calendar/Date PIcker for week rather than day?

如何使用jQuery UI日历/日期选择器进行周而不是日?

$(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

0  

Is not working with multiple pickers / last jquery.ui. Try this little rewrite:

不使用多个选择器/ last 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
        })
    );
});
标签：

相关文章