Question

大家好我已经编写了一个工作正常的脚本，但我需要的是我想强调文本框中可用的所有日期，这里是工作小提琴。当我选择前一周时，应该突出显示这些范围下的日期，并且当我手动点击任何日期时它们会突出显示。

此外，我需要从星期一而不是星期日开始这一天，我厌倦了设置firstDay: 1，但选择没有按预期工作。

https://jsfiddle.net/DorababuMeka/6xzrqcpq/

Answer 1

我添加了一个功能来突出显示包含所提供文本框中的开始日期的周：

highlightWeek()只是使用日历选择器并迭代每个tr和td，并将当前a标记中的日期值与开始日期中的日期进行比较文本框。功能仅在prev()和next()上调用，但可以根据您的需要进行调整。祝你好运。

function prev() {
  // alert("previous clicked");
  var dt = new Date($('#weekStartDate').val());
  dt.setDate(dt.getDate() - 7); // subtract 7 days
  $('#weekStartDate').val($.date(dt));

  var enddt = new Date($('#weekEndDate').val());
  enddt.setDate(enddt.getDate() - 7); // subtract 7 days
  $('#weekEndDate').val($.date(enddt));

  highlightWeek();
}

function next() {
  //alert("next clicked");
  var dt = new Date($('#weekStartDate').val());
  dt.setDate(dt.getDate() + 7); // add 7 days
  $('#weekStartDate').val($.date(dt));

  var enddt = new Date($('#weekEndDate').val());
  enddt.setDate(enddt.getDate() + 7); // add 7 days
  $('#weekEndDate').val($.date(enddt));

  highlightWeek();
}

function highlightWeek() {
    var clkDt = new Date($('#weekStartDate').val());
  var clickDay = clkDt.getDate(); //this is the value we want to select in cal  
  $('.ui-datepicker-calendar > tbody > tr').each(function(){
    $(this).children('td').each(function(){
        var dy = $(this).first('a');
      if(dy.text() == clickDay){
        dy.click();
      }      
    });     
  });
}

Answer 2

我假设您已经在“周” /“日期选择器”上选择了一周之后，已经知道如何获取“开始日期”（startDate）和“结束日期”（endingDate）。这是一种更简单的方法：

JS

beforeShowDay:function(date) {
    // Save [startDate] and [endDate] variable at @onSelect
    let start = new Date(Date.parse(startDate));
    let end = new Date(Date.parse(endDate));
    if (date >= start && date <= end) {
         cssClass = 'ui-datepicker-current-day';
    }
    // Add cssClass to days within selected week range
    return [true, cssClass];
}

CSS

#ui-datepicker-div .ui-datepicker-current-day a { 
    border: 1px solid white ; background: springgreen; font-weight: bold; color: white; 
}

根据所选日期在jquery datepicker中突出显示整个星期日期

2 个答案:

JS

CSS