2012-07-09 40 views
3

在我的網頁,我有日期的表(我的日期格式爲DD-MM-YYYY)如何使用jquery根據日期條件更改css?

<tr> 
    <td>05-03-2012</td> 
    <td name="expiration">09-07-2012</td> 
    <td>08-10-2012</td> 
<tr> 

我想是擺在紅色截止日期時,其值是>當前日期,使用Jquery。

所以,我想我會使用這樣的:

<script> 
//don't know how to retrieve the expiration date and check if it is after the 
//current date 

$('td[name=expiration]').css({"color":"red"}); 
</script> 
+0

我可以幫你,但我需要知道,如果你的約會甲永遠是MM-DD-YYYY – 2012-07-09 01:24:35

+0

好,謝謝!我的日期格式將始終爲dd-mm-yyyy,實際上我使用{{object.dateExpiration |日期(d-m-Y)}}來顯示此日期。 – Reveclair 2012-07-09 12:52:24

回答

3

更喜歡使用類,而不是一個名字讓你的選擇更高效:

<tr> 
    <td>05-03-2012</td> 
    <td class="expiration-date">09-07-2012</td> 
    <td>08-10-2012</td> 
</tr> 

var now = new Date; 
$('.expiration-date').text(function (i, v) { 
    if (now < new Date(v)) { 
     $(this).addClass('unexpired'); 
    } 
}); 

下面是一個的jsfiddle一個例子:http://jsfiddle.net/qRdNe/

+0

console.log(new Date(v));返回無效日期,這個代碼真的工作 – tsukimi 2012-07-09 01:59:32

+0

它工作得很好,如此修改小提琴演示:http://jsfiddle.net/qRdNe/6/ – Josh 2012-07-09 12:13:54

+0

有一個日期格式的問題,當我添加var date =新日期(v);警報(日期);我有一個提醒「無效的日期」。 (我的格式是dd-mm-yyy)。 – Reveclair 2012-07-09 13:44:00

2

這並不佔日期時間解析任何錯誤。

$('td[name=expiration]').each(function(){ 

    var innerText = $(this).text(); 
    var date = new Date(innerText); 
    var today = new Date();  

    if(date > today){ 
     //Set css here 
    } 
    else{ 
     //Set default here 
    } 

}); 
+2

來處理日期解析,使用這個答案,但添加以下行(函數的第一行上面,並更改變量「日期」的Date對象構造,如下所述: var str =內部文本分割(「 - 」);' var date = new Date(str [2],str [0],str [1],0,0,0,0);' – 2012-07-09 01:59:42

+0

沒有必要去這樣的長度來解析日期字符串。日期對象會做到這一點很適合你:http://jsfiddle.net/qRdNe/6/ – Josh 2012-07-09 12:14:42

+0

有一些字符串Date對象可以處理,如果直接傳遞,這是不是其中之一,如果你試圖用這些單元格中的一個單元格的文本初始化Date對象,那麼你會得到錯誤的日期。使用她的例子中的字符串,得到1969年12月31日。 – 2012-07-09 15:56:43

0

我已經基本組建了一個工作答案它來自這裏給出的不同位,但在需要時進行更正,一個月的日期從零開始。也許你不想接受這是正確的答案,我只是把它放在這裏,所以很容易參考。

$('.expiration').text(function(i,v){ 
    var datestr = v.split("-"); 
    d = new Date(datestr[2],datestr[0]-1,datestr[1],0,0,0,0); 
    var now = new Date();   
    if(console)console.log(d);   
    if(d>now) 
      { 
       $(this).css("color","red");    
      }     

}); 

http://jsfiddle.net/6zb5W/3/

+0

這個小提琴和我的相同版本號 – tsukimi 2012-07-10 01:42:14

+0

哎呦......試試這個:http://jsfiddle.net/qRdNe/6/ – Josh 2012-07-10 02:13:40

+0

在FF 12即時通訊使用它給出了一個無效的日期,即使日期是在現在它仍然突出顯示日期 – tsukimi 2012-07-10 02:31:59