在过去的几个月里，我一直在使用 jQuery UI 日历/日期选择器并取得了巨大的成功。我收到了一项新要求，允许选择一周（周日 - 周六）而不是一天。以前有人完成过这个吗？按周而不是按天突出显示在文本框/标签中显示开始日期和结束日期而不是单个日期原文由 RSolberg 发布，翻译遵循 CC BY-SA 4.0 许可协议

我已经根据接受的答案创建了一个 jQuery 插件。在 https://github.com/Prezent/jquery-weekpicker 或通过 Bower 获取它。用法示例： $('#selector').weekpicker({ startField: '#date-start', endField: '#date-end' }); 原文由 Sander Marechal 发布，翻译遵循 CC BY-SA 3.0 许可协议

如何将 jQuery UI 日历/日期选择器用于一周而不是一天？

在过去的几个月里，我一直在使用 jQuery UI 日历/日期选择器并取得了巨大的成功。我收到了一项新要求，允许选择一周（周日 - 周六）而不是一天。

以前有人完成过这个吗？

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

原文由 RSolberg 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 411

使用 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/

原文由 Igor Zelmanovich 发布，翻译遵循 CC BY-SA 3.0 许可协议

如何将 jQuery UI 日历/日期选择器用于一周而不是一天？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？

Stack Overflow 翻译