Question

我正在使用此 lugolabs.weekpicker 中的代码，并且对于所选周的第一个日期获取很容易实现，但是当我尝试在另一个输入框中获取一周的最后一个日期时，它不起作用。我为它创造了小提琴。这将是一个很大的帮助。

jQuery插件

(function($, undefined) {

  $.widget('lugolabs.weekpicker', {
    _weekOptions: {
      showOtherMonths:   true,
      selectOtherMonths: true
    },

    _create: function() {
      var self = this;
      this._dateFormat = this.options.dateFormat || $.datepicker._defaults.dateFormat;
      var date = this._initialDate();
      this._setWeek(date);
      var onSelect = this.options.onSelect;
      this._picker = $(this.element).datepicker($.extend(this.options, this._weekOptions, {
        onSelect: function(dateText, inst) {
          self._select(dateText, inst, onSelect);
        },
        beforeShowDay: function(date) {
          return self._showDay(date);
        },
        onChangeMonthYear: function(year, month, inst) {
          self._selectCurrentWeek();
        }
      }));
      $(document)
        .on('mousemove',  '.ui-datepicker-calendar tr', function() { $(this).find('td a').addClass('ui-state-hover'); })
        .on('mouseleave', '.ui-datepicker-calendar tr', function() { $(this).find('td a').removeClass('ui-state-hover'); });
      this._picker.datepicker('setDate', date);
    },

    _initialDate: function() {
      if (this.options.currentText) {
        return $.datepicker.parseDate(this._dateFormat, this.options.currentText);
      } else {
        return new Date;
      }
    },

    _select: function(dateText, inst, onSelect) {
      this._setWeek(this._picker.datepicker('getDate'));
      var startDateText = $.datepicker.formatDate(this._dateFormat, this._startDate, inst.settings);
      this._picker.val(startDateText);
      if (onSelect) onSelect(dateText, startDateText, this._startDate, this._endDate, inst);
    },

    _showDay: function(date) {
      var cssClass = date >= this._startDate && date <= this._endDate ? 'ui-datepicker-current-day' : '';
      return [true, cssClass];
    },

    _setWeek: function(date) {
      var year = date.getFullYear(),
        month = date.getMonth(),
        day   = date.getDate() - date.getDay();
      this._startDate = new Date(year, month, day);
      this._endDate   = new Date(year, month, day + 6);
    },

    _selectCurrentWeek: function() {
      $('.ui-datepicker-calendar')
        .find('.ui-datepicker-current-day a')
        .addClass('ui-state-active');
    }
  });

})(jQuery);

jQuery自定义代码

// weekly date picker
        $(function() {
          var dateText = '12/20/2015', display = $('#fromDate,#toDate');
          display.text(dateText);

          $('#fromDate').weekpicker({
            currentText: dateText,
            onSelect: function(dateText, startDateText, startDate, endDate, inst) {
              display.text(startDate);
            }
          });
          $('#toDate').weekpicker({
                currentText: dateText,
                onSelect: function(dateText, startDateText, startDate, endDate, inst) {
                  display.text(endDate);
                }
              });

        });

HTML代码

<label> from </label> <input type="text" id="fromDate" name="fromDate">   

<label>To </label> <input type="text" id="toDate" name="toDate">

Answer 1

我尝试对鳕鱼进行一些修改，现在它对我来说很好..

$(function() {
      var dateText = '12/20/2015', displayFrom = $('#fromDate');
    var displayTo = $('#toDate');
      displayFrom.text(dateText);
    displayTo.text(dateText);

      $('#fromDate').weekpicker({
        currentText: dateText,
        onSelect: function(dateText, startDateText, startDate, endDate, inst) {
          displayFrom.text(startDate);
        }
      });
      $('#toDate').weekpicker({
            currentText: dateText,
            onSelect: function(dateText, startDateText, startDate, endDate, inst) {
              displayTo.text(endDate);
            }
          });
    });

如何在自定义jquery ui Datepicker中返回所选周的最后一天

1 个答案: