单击文本框显示选定的周数 - Jquery

Question

我试图在点击文本框时显示此日历，并在文本框中显示所选的一周，我被问到如何调用week-picker函数，这里是my jsfiddle。

＆＃13;

＆＃13;

$(function() {
  var startDate;
  var endDate;

  var selectCurrentWeek = function() {
    window.setTimeout(function() {
      $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
    }, 1);
  }

  $('.week-picker').datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    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();
    }
  });

  $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() {
    $(this).find('td a').addClass('ui-state-hover');
  });
  $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() {
    $(this).find('td a').removeClass('ui-state-hover');
  });
});

＆＃13;

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>

<div class="week-picker"></div>
<br /><br />
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>

＆＃13;

＆＃13;

＆＃13;

Answer 1

此解决方案显示了工作功能，但仍需要一些修复才能使其完美

$(function() {
  var datePickePickerElement = $('<span class="dpwrapper"></span');

  var startDate;
  var endDate;

  var selectCurrentWeek = function() {
    window.setTimeout(function() {
      $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
    }, 1);
  }

  var datePickerParams = {
    autoclose: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    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;

      var
        // Formatted start and end date
        startDateFormatted = $.datepicker.formatDate(dateFormat, startDate, inst.settings),
        endDateFormatted = $.datepicker.formatDate(dateFormat, endDate, inst.settings),

        // Date in week formatted styled
        weekDates = (startDateFormatted + ' - ' + endDateFormatted),

        // Reference to date picker control
        datePickerControl = $('#' + inst.id);

      $('#startDate').text(startDateFormatted);
      $('#endDate').text(endDateFormatted);


      // Get related input ( textbox ) control and set date
      datePickerControl.prev('input').val(weekDates);

      // Destroy date picker
      datePickerControl.datepicker('destroy');

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

  $('.week-picker').click(function() {
    // Source element on clicked
    var el = $(this);
    showDatePicker(el);
  })

  $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() {
    $(this).find('td a').addClass('ui-state-hover');
  });
  $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() {
    $(this).find('td a').removeClass('ui-state-hover');
  });

  function showDatePicker(elTextBox) {

    // Place date picker control just after the textbox
    datePickePickerElement.insertAfter(elTextBox)
      .datepicker(datePickerParams)
      .datepicker('show');
  }
});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>

<p>Date: <input type="text" class="week-picker"></p>
<p>Date: <input type="text" class="week-picker"></p>
<!--<div class="week-picker"></div> -->
<br /><br />
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>