Как добавить три разных инструмента выбора Jquery Ui на одну страницу - PullRequest
Новая
       11

Как добавить три разных инструмента выбора Jquery Ui на одну страницу

0 голосов
/ 21 декабря 2018

У меня есть три разных инструмента выбора Jquery Ui, которые мне нужно разместить на одной странице.Первое средство выбора даты является обычным средством выбора даты «выбор дня», второе позволит пользователям выбирать диапазон дат за неделю, а последнее позволит пользователю выбрать дату по месяцам / годам.

Я могу заставить всех трех сборщиков дат работать по отдельности, но не могу заставить их всех работать на одной странице.По праву все три сборщика позволят мне выбирать даты по неделям, когда они все на одной странице.

Я пробовал операторы if / else, показывать скрытые выражения и еще около тысячи других вещей, о которых я мог подумать, и, похоже, ничего не работает.Любая помощь будет оценена!

Вот код для моих сборщиков даты: 

 //datepicker for day
   $('#daypicker').datepicker();

 //datepicker for week

            $(function () {
                var startDate,
                    endDate,
                    selectCurrentWeek = function () {
                        window.setTimeout(function () {
                            $('#weekpicker').datepicker('widget').find('.ui-datepicker-current-day a').addClass('ui-state-active')
                        }, 1);
                    };
                $('#weekpicker').datepicker({
                    "showOtherMonths": true,
                    "selectOtherMonths": true,
                    "onSelect": function (dateText, inst) {
                        var date = $(this).datepicker('getDate'),
                            dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
                        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
                        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
                        $('#weekpicker').val($.datepicker.formatDate(dateFormat, startDate, inst.settings) + ' - ' + $.datepicker.formatDate(dateFormat, endDate, inst.settings));
                        selectCurrentWeek();
                    },
                    "beforeShow": function () {
                        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();
                    }
                }).datepicker('widget').addClass('ui-weekpicker');
                $('.ui-weekpicker').on('mousemove', 'tr', function () {
                    $(this).find('td a').addClass('ui-state-hover');
                });
                $('.ui-weekpicker').on('mouseleave', 'tr', function () {
                    $(this).find('td a').removeClass('ui-state-hover');
                });
            });


 //datepicker for month/year

            $( "#monthpicker" ).datepicker({
                dateFormat: "mm/yy",
                changeMonth: true,
                changeYear: true
                });

А вот HTML: 

 <div class="day">
    <label for="daypicker">Month</label>
    <input  class="datepicker" type="text" id="daypicker">
  </div>

 <div class="week">
    <label for="weekpicker">Month</label>
    <input  class="datepicker" type="text" id="weekpicker">
  </div>

  <div class="month">
    <label for="monthpicker">Month</label>
    <input  class="datepicker" type="text" id="monthpicker">
  </div>

1 Ответ

0 голосов
/ 21 декабря 2018

Я запустил следующий код: 

$(function() {

  var startDate = new Date(),
    endDate = new Date(),
    selectCurrentWeek = function() {
      window.setTimeout(function() {
        $('#weekpicker').datepicker('widget').find('.ui-datepicker-current-day a').addClass('ui-state-active')
      }, 1);
    };

  //datepicker for day
  $('#daypicker').datepicker();

  //datepicker for week  
  $('#weekpicker').datepicker({
    "showOtherMonths": true,
    "selectOtherMonths": true,
    "onSelect": function(dateText, inst) {
      var date = $(this).datepicker('getDate'),
        dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
      startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
      endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
      $('#weekpicker').val($.datepicker.formatDate(dateFormat, startDate, inst.settings) + ' - ' + $.datepicker.formatDate(dateFormat, endDate, inst.settings));
      selectCurrentWeek();
    },
    "beforeShow": function() {
      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();
    }
  }).datepicker('widget').addClass('ui-weekpicker');

  $('.ui-weekpicker').on('mousemove', 'tr', function() {
    $(this).find('td a').addClass('ui-state-hover');
  });

  $('.ui-weekpicker').on('mouseleave', 'tr', function() {
    $(this).find('td a').removeClass('ui-state-hover');
  });

  //datepicker for month/year
  $("#monthpicker").datepicker({
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true
  });
});
.wrapper label {
  display: inline-block;
  width: 60px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>

<div class="day wrapper">
  <label for="daypicker">Day</label>
  <input class="datepicker" type="text" id="daypicker">
</div>

<div class="week wrapper">
  <label for="weekpicker">Week</label>
  <input class="datepicker" type="text" id="weekpicker">
</div>

<div class="month wrapper">
  <label for="monthpicker">Month</label>
  <input class="datepicker" type="text" id="monthpicker">
</div>

Кажется, что работает как ожидалось.

...