选择多周 jquery ui 日期选择器

8yoxcaq7 于 2022-11-22 发布在 jQuery

关注(0)|答案(1)|浏览(168)

我有这个jsfiddle代码，这是一个星期的选择工作

https://jsfiddle.net/gmo81azy/

我试图选择一个范围的周，就像我应该能够选择一个2周或3周的日期显示，日历确实显示日期，以掩盖周
我怎么能修复它，我尝试了很多，但我错过了一些东西
JS代码

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

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

    function updateWeekStartEnd() {
        var date = $weekPicker.datepicker('getDate') || new Date();
        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
    }

    updateWeekStartEnd();

    function updateDateText(inst) {
        var dateFormat = inst != 'start' &&  inst.settings.dateFormat ? inst.settings.dateFormat : $.datepicker._defaults.dateFormat;
        
        console.log( dateFormat)
        $('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
        $('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
    }

    //updateDateText('start');

    $weekPicker.datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function (dateText, inst) {
            updateWeekStartEnd();
            updateDateText(inst);
            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();
        }
    });

    selectCurrentWeek();

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

});

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

jquery

来源：https://stackoverflow.com/questions/74383318/select-multiple-weeks-jquery-ui-datepicker

1条答案

按热度按时间

vcirk6k61#

请考虑以下示例：https://jsfiddle.net/Twisty/63mwc2tb/

JavaScript语言

$(function() {

  var startDate;
  var endDate;
  var $wp = $('.week-picker');
  var dateFormat = "mm/dd/yy";

  function getWeekStartEnd(start, end) {
    if (start == undefined) {
      start = new Date();
    }
    if (end == undefined) {
      end = new Date(start);
    }
    start.setDate(start.getDate() - start.getDay());
    end.setDate(end.getDate() - end.getDay() + 6);
    $("#start").val($.datepicker.formatDate(dateFormat, start));
    $("#end").val($.datepicker.formatDate(dateFormat, end));
    startDate = start;
    endDate = end;
  }

  function selectWeek() {
    $wp.find(".selected a").addClass('ui-state-active');
  }

  getWeekStartEnd();

  $wp.datepicker({
    dateFormat: dateFormat,
    showOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    selectOtherMonths: true,
    beforeShowDay: function(d) {
      var dayClass = "";
      if (d >= startDate && d <= endDate) {
        dayClass += "ui-datepicker-current-day selected";
      }
      return [true, dayClass];
    },
    onSelect: function(dt, inst) {
      if ($(this).data("selected")) {
        endDate = $.datepicker.parseDate(dateFormat, dt);
        $(this).data("selected", false);
        getWeekStartEnd(startDate, endDate);
      } else {
        startDate = $.datepicker.parseDate(dateFormat, dt);
        $(this).data("selected", true);
        getWeekStartEnd(startDate);
      }
      setTimeout(function() {
        selectWeek();
      }, 1);
    }
  }).data("selected", false);

  selectWeek();

  $(".ui-datepicker-calendar tr", $wp).on({
    mouseover: function() {
      $("a", this).addClass('ui-state-hover');
    },
    mouseout: function() {
      $("a", this).removeClass('ui-state-hover');
    }
  });
});

它使用一个数据属性作为一个标志来查看用户第一次和第二次点击的时间。

赞(0）回复(0）举报 2022-11-22

我来回答

选择多周 jquery ui 日期选择器

1条答案

相关问题

热门标签

最新问答

选择 多 周 jquery ui 日期 选择 器

1条答案

相关问题

热门标签

最新问答

选择多周 jquery ui 日期选择器