Столбец номера недели DatePicker, на который можно нажимать при выборе недели - PullRequest
Новая
       1

Столбец номера недели DatePicker, на который можно нажимать при выборе недели

0 голосов
/ 06 ноября 2018

У меня есть средство выбора даты Jquery, где я выбираю целое, чтобы передать значение номера недели другому элементу управления. Теперь я могу выбрать любой день недели в порядке, и он работает как задумано. Теперь я хотел бы добавить возможность выбрать номер недели в столбце (синий столбец), а также выбрать и передать номер недели, как и остальная часть строки в строке. По умолчанию при наведении курсора на столбец номера недели его нельзя отменить, а курсор - указатель.

Это мой текущий код скрипта 

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

}

Это меняет курсор только при наведении курсора на столбец номера недели. Как мне расширить это так, чтобы столбец стал кликабельным, как и остальная часть недели?

Week Selector

Более четкое объяснение: На изображении, если выбрать неделю 40, я бы хотел, чтобы в ячейке с надписью 40 также можно было щелкнуть, чтобы выбрать строку недели. В настоящее время только ячейки (строки) с днем ​​(в период с понедельника по воскресенье) доступны для выбора номера недели. Столбец или ячейки под Wk не отображаются, они просто предназначены для отображения, и событие щелчка не происходит, если щелкнуть первый синий столбец. Я хотел бы включить этот столбец (синие ячейки) как часть события «нажмите, чтобы выбрать номер недели».

1 Ответ

0 голосов
/ 07 ноября 2018

Попробуйте вот так ... 

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...