如何将三个不同的 Jquery Ui Datepickers 添加到单页

Question

我需要将三个不同的 Jquery Ui 日期选择器放在一个页面上。第一个日期选择器是普通的“选择一天”日期选择器，第二个允许用户选择每周的日期范围，最后一个允许用户按月/年选择日期。

我可以让所有三个日期选择器单独工作，但我不能让它们都在同一页面上工作。正确的是，所有三个选择器只会让我在它们都在同一页面上时按周选择日期。

我尝试过 if/else 语句、show hide 语句以及我能想到的大约一千种其他方法，但似乎没有任何效果。任何帮助将不胜感激！

这是我的日期选择器的代码：

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

Answer 1

我运行了以下代码：

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

这似乎按预期工作。