你可以大膽jquery ui datepicker字段？

Question

我想知道是否有可能在jquery ui datepicker中大膽某些日期單元格。我希望用戶知道他們是某些日期的事件，以便他們點擊它，並向他們顯示所有列出的事件。

感謝

Answer 1

可以使用beforeShowDay函數返回將被連接到當天類名。

beforeShowDay: function(date) { 
    // Check logic 
    return [true, "boldedClass"]; 
} 

Answer 2

現在需要做到這一點我的自我！感謝布蘭登在功能上的領導。爲了擴展它，我寫了這個。它會大膽的多個日期，但我並不驚人的JavaScript，所以它是相當'快速和骯髒'。如果你有不同的日期，你需要改變數組/邏輯。毫無疑問，比較這種可怕的字符串比較的日期有很多更好的方法。

// Datepicker 
$('#datepicker').datepicker({ 
    inline: true, 
    dateFormat: 'dd-mm-yy', 
    beforeShowDay: bolddates     
}); 

function bolddates(date){ 

    var xboldthese=new Array("1-1-2012","2-1-2012","10-1-2012"); 
    var xday = date.getDate(); 
    var xmonth = date.getMonth()+1; //jan is 0 
    var xyear = date.getFullYear(); 
    var xfulldate = xday + "-" + xmonth + "-" + xyear; 
    var xcssflg = ""; 
     for (var i=0; i<xboldthese.length; i++){ 
      if(xfulldate == xboldthese[i]){ 
       xcssflg = "bolddate"; 
      }else{ 
       //maybe some other css class 
      } 
     } 
     return [true, xcssflg]; 
} 

要回答您的其他問題，只需在CSS選擇器中添加a後面的內容即可。

.bolddate a{ 
    font-weight:bold !important; 
    color:#FF0000 !important; 
} 

我還在編寫代碼時，他們點擊其中的一個。

Answer 3

好的，這裏是我的另一個答案修改了一下，當你選擇日期時也做點擊事件。該事件由//觸發器代碼標記。我的一個將日期傳遞給一個php文件，該文件輸出更新div的html，你可能是任何東西。

再次爲窮人編程辯解，我只是需要這個工作。我敢肯定，它可以做得更好，效率更高。

$(function(){ 

      $('#datepicker').datepicker({ 
       inline: true, 
       dateFormat: 'd-m-yy', 
       beforeShowDay: bolddates, 
       onSelect: processdate   
      }); 

      function getdates(){ 
       return Array("1-1-2012","2-1-2012","10-1-2012","12-2-2012"); //build this however, could be a remote call 
      } 

      function parsedate(date){ 
       return date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();   
      } 

      function bolddates(date){ 
       var xboldthese=getdates(); 
       var xfulldate=parsedate(date); 
       var xcssflg = ""; 

        for (var i=0; i<xboldthese.length; i++){ 
         if(xfulldate == xboldthese[i]){ 
          xcssflg = "bolddate"; 
         }else{ 
          //maybe some other css class 
         } 
        } 
        return [true, xcssflg]; 
      } 

      function processdate(date){ 
       var xprocessthese=getdates(); 
       //note, date passed to this function is in dateFormat: option format 

        for (var i=0; i<xprocessthese.length; i++){ 
         if(date == xprocessthese[i]){ 
          //Trigger code 
          $.get('/functions/homedata.php?mode=4&date=' + date, function(data) { 
           $("#ev-eventsholder").fadeOut(1000, function(){ 
            $('#ev-eventsholder').html(data); 
           }).fadeIn(1000); });       
          } 
          //------------ 
        }    
      } 

     }); 

而簡單的CSS：

  .bolddate a{ 
      font-weight:bold !important; 
      color:#FF0000 !important; 
     }