选择开始日期结束日期日期范围突出显示jquery ui datepicker答案

【问题标题】：select startdate enddate Date range highlight jquery ui datepicker选择开始日期结束日期日期范围突出显示jquery ui datepicker
【发布时间】：2016-04-18 10:53:56
【问题描述】：

我使用了以下代码，我不知道如何突出显示选定的日期，以及如何为选定的日期添加 css

这是我的代码。

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>

  $(function() {
    $( "#from" ).datepicker({               
      dateFormat: 'dd/mm/yy',
      numberOfMonths: 2,
      autoclose: true,
      minDate:0,

      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
        $( "#to" ).datepicker( "show" );
      }
    });
    $( "#to" ).datepicker({               
      dateFormat: 'dd/mm/yy',
      numberOfMonths: 2,
      minDate:0,
      autoclose: true,


    });

  });
</script>


</head>
<body>

  <label for="from">From</label>
  <input type="text" id="from" name="from" value="19/04/2016">
  <label for="to">to</label>
  <input type="text" id="to" name="to" value="29/04/2016">

我需要像下图这样的高光

请帮助我如何突出显示。谢谢

【问题讨论】：

If I reads this correctly, when a #from date and a #to date are selected, you want to highlight something.你到底想强调什么？
我想突出显示（addClass -> 背景颜色。）开始日期和结束日期之间的日期。请检查我附加的屏幕排序。谢谢

标签： jquery-ui jquery-ui-datepicker

【解决方案1】：

是的，我已经解决了这个问题，现在它可以工作了。

beforeShowDay: function(date){
var startDate = $('#reportFrom').val();
var endDate = $('#reportTo').val();
startDate = startDate.split('/');
endDate = endDate.split('/');
startDate = new Date(startDate[2], (startDate[1]-1), startDate[0]);
endDate = new Date(endDate[2], (endDate[1]-1), endDate[0]);

if ($.trim(startDate) != '' && $.trim(endDate) !='') {
  if(($.trim(startDate) == $.trim(date)) && ($.trim(endDate) == $.trim(date))) {
    return [true, 'dp-highlight dp-end-highlight dp-start-highlight'];
  }
  if($.trim(startDate) == $.trim(date)) {
    return [true, 'dp-highlight dp-start-highlight'];
  }
  if(date < endDate && date > startDate ) {
    return [true, 'dp-highlight'];
  }
  if($.trim(endDate) == $.trim(date)) {
    return [true, 'dp-highlight dp-end-highlight'];
  }

  return [true, ''];
}
}

【讨论】：