Question

我使用以下代码我不知道如何突出显示所选日期，以及如何为所选日期添加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">

我需要像下图这样的亮点

请帮我突出。感谢

Answer 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, ''];
}
}

select startdate enddate日期范围突出显示jquery ui datepicker

1 个答案: