Question

我有一个Jquery datepicker，我在其中选择整个对象，以将周数值传递给另一个控件。现在，我可以选择一周中的任何一天，它可以按预期运行。现在，我想添加的是还能够选择列星期数（蓝色列），并且仍然可以像星期几的其余部分一样选择并传递星期数。默认情况下，当您将鼠标悬停在星期数列上时，它的不可动摇且光标是指针。

这是我当前的脚本代码

$('#dateStart').datepicker({
            dateFormat: "yy-mm-dd",
            changeMonth: true,
            changeYear: true,
            showMonthAfterYear: true,
            showWeek: true,
            maxDate: "0d",
            firstDay: 1,
            yearRange: "-60:+0",
            clickInput: true,
            onSelect: function (dateText, inst) {
                $('#weekNumber').val($.datepicker.iso8601Week(new Date(dateText)));                    
            }
        });

然后在CSS中添加

td.ui-datepicker-week-col {
cursor: pointer;
cursor: hand;

}

仅当将鼠标悬停在星期数列上时，才更改光标。如何扩展此范围，以使该列实际上像一周中的其余行一样可点击？

更清晰的解释：从图片中，如果选择第40周，我希望显示40的单元格也可以单击以选择周行。当前，只有带有日期（从星期一到星期日）的单元格（行）可以单击以选择星期数。 Wk下的列或单元格不是，它们仅用于显示，如果您单击蓝色的第一列，则不会发生click事件。我想将该列（蓝色单元格）作为“单击以选择星期数”事件的一部分。

Answer 1

尝试一下...

$(function() {
   var startDate;
   var endDate;

   var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.datepicker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
             
        }, 1);
    }
    
   $('.datepicker').datepicker( {
        showOtherMonths: true,
        selectOtherMonths: true,
        autoclose: false,
        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();
        }       
         });
      });

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>

     <div class="datepicker"></div>
    <br /><br />
    <label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
 
</body>

在选择星期时可以单击“ DatePicker周数”列

1 个答案: