2014-05-12 11 views
5

Önyükleme sırasında bir tarihe sınıf eklerken zor bir zaman geçiriyorum. İşte randevu. enter image description hereÖnyükleme tarihçisinde çoklu/belirli bir güne sınıf ekleme?

enter image description here

Ya ben belirtilen tarih küçük mavi nokta konur elde çalışıyorum. Tarihe bir ders ekmeyi düşünüyorum. Bunu nasıl yapmalıyım?

+0

Hangi önyükleme çatalı kullanıyorsunuz? Eklenti bağlantısını ekleyebilir misiniz? – Praveen

+0

Üstte bir çevre oluşturmalısınız: 3px; Sol: 3px; konum: mutlak; Her gün –

+0

@ Praveen, onu depomuza indirdim. Kullanmakta olduğum bootstrap çatalı hakkında hiçbir fikrim yok. – Imat

cevap

26

datepicker bağlı olarak böyle bir şey yapabilirsiniz kullanıyor: tarih seçicilerin çoğu

bir beforeShowDay seçeneği vardır. Değiştirmek istediğiniz güne eklemek için bir sınıf ayarlayabilirsiniz. http://eternicode.github.io/bootstrap-datepicker

Bunun nasıl bir örnek kullanarak bu örnek im için

burada bulunabilir: jsFiddle

Sen bir diziye/işaretini vurgulamak istediğiniz tarihleri ​​koymak isteyecektir:

var active_dates = ["23/5/2014","21/5/2014"];

sonra gösterilmeden geçerli güne karşı tarihlerini kontrol ve daha sonra bir sınıfı uygulamak için beforeShowDay seçeneğini kullanın.

<input type="text" id="datepicker" />

$("#datepicker").datepicker({ 
    format: "dd/mm/yyyy", 
    autoclose: true, 
    todayHighlight: true, 
    beforeShowDay: function(date){ 
     var d = date; 
     var curr_date = d.getDate(); 
     var curr_month = d.getMonth() + 1; //Months are zero based 
     var curr_year = d.getFullYear(); 
     var formattedDate = curr_date + "/" + curr_month + "/" + curr_year 

     if ($.inArray(formattedDate, active_dates) != -1){ 
      return { 
       classes: 'activeClass' 
      }; 
     } 
     return; 
    } 

}); activeClass CSS herhangi bir şekilde olabilir, `

. Örneğimde arka plan rengini yeni değiştirdim. Örneğinizde bir görüntüyü dengeleyebilir ve güne uygulayabilirsiniz.

.activeClass{ 
    background: #F00; 
    } 
+0

Teşekkür ederim! Bu çok yardımcı olur. – Imat

+1

Bunu bir tarih aralığı ile yapmak mümkün mü? Yani '24-04-2015'' için' 20-04-2015' vurgulayın, bu yüzden toplamda 5 gün yapardı. – haakym

+0

Teşekkürler! Bu gerçekten çok yardımcı olur! –