如何突出顯示日期選取器中的選定日期

首先有一種不突出顯示當天的方法。其次，有沒有辦法突出特定的日子，如當天突出顯示的方式？如何突出顯示日期選取器中的選定日期

這裏是我的代碼有：

<!DOCTYPE html> 
<html> 
<head> 
<link type="text/css" href="css/calendar-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 


<script type="text/javascript"> 
var dates = [new Date(2011, 9 - 1, 19), 
      new Date(2011, 9 - 1, 20), 
      new Date(2011, 9 - 1, 20), 
      new Date(2011, 9 - 1, 21), 
      new Date(2011, 10 - 1, 31)]; 

$(function() { 

    $('#datepicker').datepicker({ 
     numberOfMonths: [1, 1], 
     beforeShowDay: highlightDays, 
    }); 


    $('#datepicker').click(function() { 
     // put your selected date into the data object 
     var data = $('#datepicker').val(); 

     $.get('getdata.php?date=' + data, function(data) { 
      $('#events').html(data).show('slow'); 
     }); 
    }); 

    function highlightDays(date) { 
     for (var i = 0; i < dates.length; i++) { 
      if (dates[i].getTime() == date.getTime()) { 
       return [true, 'highlight']; 
      } 
     } 
     return [true, '']; 
    } 
}); 
</script> 

<style> 
#highlight, .highlight { 
    background-color: #000000; 
} 
</style> 

</head> 
<body> 


<div id="datepicker" style="float:left;margin: 0 10px 0 0;font-size: 72.5%;"></div> 

<div id="events" style="float:left;font-size: 10pt;"> 
<p>Select a date on the calendar to see events.</p> 
</div> 

<div style="clear:both"></div> 
</body> 
</html>

來源

2011-09-21 user875293

首先是有沒有辦法不突出顯示當前的一天。

是的，您可以通過從anchor元素中刪除.ui-state-highlight和.ui-state-hover類來取消突出顯示。

其次有沒有辦法突出特定的日子，如當天突出顯示的方式？

是的，可以將用於突出顯示當天的類別添加到要突出顯示的日子，也可以用.ui-state-highlight的樣式覆蓋CSS。

對於第一種方法，這裏是一個示例代碼片段：

$('#datepicker').datepicker({ 
    numberOfMonths: [1, 1], 
    beforeShowDay: highlightDays 
}).click(function() { 
    // question 1 
    $('.ui-datepicker-today a', $(this).next()).removeClass('ui-state-highlight ui-state-hover'); 

    // question 2 
    $('.highlight a', $(this).next()).addClass('ui-state-highlight'); 
});

看到活動的第一種方法：http://jsfiddle.net/william/Aut9b。查看第二種方法：http://jsfiddle.net/william/Aut9b/1/。

來源

2011-09-21 23:39:25

我意識到這是幾年，但有沒有辦法做到這一點，如果一個文本框有一個AJAX日曆擴展器呢？我一直在尋找幾天，並在這裏發佈了一些問題，並試圖做到這一點。 – htm11h

使用jQuery UI日期選擇器的beforeShowDay選項來突出顯示日期選擇器中的選定日期。這裏的簡單代碼：

$(function() { 
    // An array of dates 
    var eventDates = {}; 
    eventDates[ new Date('08/07/2016')] = new Date('08/07/2016'); 
    eventDates[ new Date('08/12/2016')] = new Date('08/12/2016'); 
    eventDates[ new Date('08/18/2016')] = new Date('08/18/2016'); 

    // datepicker 
    $('#datepicker').datepicker({ 
     beforeShowDay: function(date) { 
      var highlight = eventDates[date]; 
      if(highlight) { 
       return [true, "event", 'Tooltip text']; 
      } else { 
       return [true, '', '']; 
      } 
     } 
    }); 
});

以上的JavaScript將選定日期添加event類。現在您需要定義選定日期的樣式。對於完整的指南，你可以檢查上面提到的源代碼鏈接。

來源

2016-09-12 12:09:14 JoyGuru

如何突出顯示日期選取器中的選定日期

回答

相關問題