在jQuery UI日期選取器中突出顯示日期

如何使用beforeShowDay突出顯示jQuery UI日期選取器中的日子。我有以下日期陣列在jQuery UI日期選取器中突出顯示日期

Array 
(
    [0] => 2011-07-07 
    [1] => 2011-07-08 
    [2] => 2011-07-09 
    [3] => 2011-07-10 
    [4] => 2011-07-11 
    [5] => 2011-07-12 
    [6] => 2011-07-13 
)

來源

2011-07-28 Nisanth Kumar

那你想實現什麼呢？ –

我想突出顯示上述日期。 –

我解決了使用

var disabledDays = ["2011-7-21","2011-7-24","2011-7-27","2011-7-28"]; 
var date = new Date(); 
jQuery(document).ready(function() { 
    $("#dateselector").datepicker({ 
     dateFormat: 'yy-mm-dd', 
     beforeShowDay: function(date) { 
      var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); 
      for (i = 0; i < disabledDays.length; i++) { 
       if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) { 
        //return [false]; 
        return [true, 'ui-state-active', '']; 
       } 
      } 
      return [true]; 

     } 
    }); 
});

來源

2011-07-28 11:25:31

+1，需要其他選項：添加指向激活日期的鏈接以轉至事件描述，例如 –

如果比較之前獲取其值的日期並使用計數器i，則可以避免這些y，m和d變量：if .valueOf（）== disabledDays [i] .valueOf（））{... – Rober

@Nisanth：你的回答是做了一個不必要的循環。你不需要做'for（i = 0; i

http://jqueryui.com/demos/datepicker/#event-beforeShowDay

您在beforeShowDay與你有你的陣列中得到的日期比較日期參數，如果有匹配返回作爲定義數組上面的鏈接。

在從beforeShowDay返回的數組中，第二個元素用於設置將在日期中使用的類名，然後可以使用css爲該類設置樣式。

來源

2011-07-28 09:55:51 manubkk

看看文檔。

beforeShowDay該函數採用一個日期作爲參數，並必須返回[0]等於真/假指示該日期是否是可選擇的陣列，[1]等於CSS類別名稱（S）或''作爲默認演示文稿，[2]此日期的可選彈出式工具提示。在日期選擇器顯示之前每天都會調用它。

這意味着你需要創建一個將採取的日期並返回，其中值參數數組的函數：

布爾 - 表示如果日期可以選擇
串 - 名將被應用。查閱全文的日期
字符串的CSS類的 - 此日期

這裏可選的彈出提示是EXA mple：

var your_dates = [new Date(2011, 7, 7),new Date(2011, 7, 8)]; // just some dates. 

$('#whatever').datepicker({ 
    beforeShowDay: function(date) { 
     // check if date is in your array of dates 
     if($.inArray(date, your_dates)) { 
     // if it is return the following. 
     return [true, 'css-class-to-highlight', 'tooltip text']; 
     } else { 
     // default 
     return [true, '', '']; 
     } 
    } 
});

，現在你可以添加風格突出的日期

<style> 
    .css-class-to-highlight{ 
     background-color: #ff0; 
    } 
</style>

來源

2011-07-28 10:15:37

請問您可以演示一個小提琴嗎？ –

我不認爲你可以比較像JS中的日期。 '新日期（1）==新日期（1）爲假' – mxmissile

我試着你的代碼來突出顯示日期。但它不適用於動態數組。然而，它按照你描述的方式工作。有任何想法嗎？它突出了日曆上的所有日期。 – Superman

發現的最投票的答案不工作的問題。稍微更新一些代碼以使其工作。 $ .inArray（）主要搜索indexOf（）。我們也無法直接比較兩個日期的平等。參考：Compare two dates with JavaScript

function inArrayDates(needle, haystack){ 
    var found = 0; 
    for (var i=0, len=haystack.length;i<len;i++) { 
     if (haystack[i].getTime() == needle.getTime()) return i; 
      found++; 
     } 
    return -1; 
}

而且更新接受功能

if(inArrayDates(date, markDates) != -1) { 
      return [true, 'selected-highlight', 'tooltip here']; 
      } else { 
      return [true, '', '']; 
      }

來源

2016-01-31 16:38:02

日期在JS的對象Date的情況下，所以你不能正確檢查，如果日期是等於使用==或===。

簡單的解決方案：

var your_dates = [ 
    new Date(2017, 4, 25), 
    new Date(2017, 4, 23) 
]; 

$("#some_selector").datepicker({ 
    beforeShowDay: function(date) { 
     are_dates_equal = d => d.getTime() === date.getTime(); 
     if(your_dates.some(are_dates_equal)) { 
      return [true, 'ui-state-active', '']; 
     } 
     return [true, '', '']; 
    } 
})

來源

2017-05-25 13:37:30

在jQuery UI日期選取器中突出顯示日期

回答

相關問題