DatePicker Week number column to be clickable on selecting week

问题

I have a Jquery datepicker where I am selecting the whole, to pass the week number value to another control. Now I can select any day of the week fine and it functions as intended. Now what I would like to add is to be able to also select the column week number (blue column) and also have that still select and pass the week number like the rest of the row week. By default when you hover over the week number column, its unshockable and cursor is a pointer.

This is my current script code

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

In CSS, I then added

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

}

This only changes the cursor when you hover over the week number column. How do I extend this so that the column is actually clickable like the rest of the week row?

Clearer explanation: From the image, if selecting week 40, I would like the cell that says 40 also clickable to select week row. Currently only the cells (rows) with the day (under Mon to Sun) are clickable to select week number. The column or cells under Wk are not, they are just currently for display and click event doesn't occur if you click on the blue first column. I would like to include that column (the blue cells) as part of the "click to select week number" event.

回答1:

Try this way...

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

来源：https://stackoverflow.com/questions/53176802/datepicker-week-number-column-to-be-clickable-on-selecting-week

标签

jquery

datepicker