jquery datepicker सीएसएस को पहलेShowDay

Question

के साथ संशोधित करें, मैं beforeShowDay का उपयोग कर रहा हूं और मेरे कैलेंडर में विशेष दिन specialDay कक्षा असाइन की है; यह ठीक काम करता है, हालांकि मुझे समझने में परेशानी हो रही है कि कक्षा को कैसे शैलीबद्ध करें और थीम रोलर से सीएसएस सामान्य रूप से कैसे काम कर रहा है। मैंने कोशिश की है:

td .specialDate { 
    background: #33CC66; 
} 

लेकिन इसका कैलेंडर के स्वरूप पर कोई प्रभाव नहीं पड़ता है। कोई विचार?

Answer 1

जब भी मैं JQuery UI सामग्री का उपयोग कर रहा हूं, तो मैं विशेष तत्वों पर लागू होने वाली किसी भी शैलियों को देखने के लिए Firebug का उपयोग करता हूं, इससे आपको आसानी से यह पता चल जाएगा कि आपको कौन सी सीएसएस तत्वों को खेलने की आवश्यकता है।

Answer 2

मुझे एक ही समस्या थी, सौभाग्य से मुझे जवाब मिला। जब आप एक दिन अक्षम करते हैं ("झूठी" पर सेट) पृष्ठभूमि रंग बदलने के लिए एक वर्ग (".specialDate") असाइन करने के लिए मान्य है, लेकिन दिनांक सक्षम नहीं है, क्योंकि हमारे पास एक और स्टाइल एंकर ("ए") है जो "टीडी" एंकर को आवंटित कक्षा को ओवरराइड करता है।

इसलिए, यदि आपका तिथि का चयन करें और शैलियों को बदलना चाहते हैं के लिए सक्षम है, तो आप विरासत में मिला है "एक" लंगर संपादित करने के लिए, है इस तरह:

.specialDate a { background: #33CC66 !important; } 

यह बहुत महत्वपूर्ण है कि आप "जोड़ने है महत्वपूर्ण "(यदि आप पुनरावृत्ति को माफ कर देंगे) संकेत अन्य सेटिंग्स को ओवरराइड करने के लिए।

आशा है कि इससे मदद मिल सकती है!

Answer 3

.specialDate span {background-color:#ff0000!important;} 

आप पारदर्शिता प्रभाव

.specialDate {filter:Alpha(Opacity=100)!important; opacity: 1!important} 

Answer 4

निष्क्रिय करने के लिए इस तरह से अपनी सीएसएस शैली बनाएं चाहते हैं:

<style type="text/css"> 
    td.specialDay, table.ui-datepicker-calendar tbody td.specialDay a { 
    background: none !important; 
    background-color: #fffac2 !important; 
    color: #006633; 
    } 
</style> 

फिर beforeShowDay विकल्प का उपयोग करने के लिए कैलेंडर अपनी शैली जोड़ें।

$('#datepicker').datepicker('option', 'beforeShowDay', highlightDays); 


// ------------------------------------------------------------------ 
// highlightDays 
// ------------------------------------------------------------------ 
function highlightDays(date) { 
    for (var i = 0; i < dates.length; i++) { 
     if (SOME CONDITION TO DETERMIN SPECIAL DAY) { 
      return [true, 'specialDay']; 
     } 
    } 
    return [true, '']; 
} 

Answer 5

यहां कुछ ऐसा है जो वर्तमान दिनांक या संबंधित टेक्स्ट बॉक्स से तारीख को हाइलाइट करेगा।

शैली:

.dateHighlight a { background: #58585a !important; } 

स्क्रिप्ट:

var pickerDate; 
$("#pickerId").datepicker({ 
    // get the date to be highlighted; use today if no date 
    beforeShow: function() { 
     pickerDate = $("#pickerId").datepicker("getDate"); 
     if (pickerDate == null) pickerDate = new Date((new Date()).setHours(0, 0, 0, 0)); 
    }, 
    // add css class to the date 
    beforeShowDay: function(date) { 
     if (date.getTime() == pickerDate.getTime()) { 
      return [true, 'dateHighlight', ''] 
     } 
     return [true] 
    } 
}); 

Answer 6

ui कैलेंडर एक विषय है, तो आप specialDate विशेषता के लिए background-image अक्षम करना होगा:

.specialDate a { 
    background-image: none !important; 
    background: #33CC66 !important; 
} 

Answer 7

का उपयोग करना क्लिक पर आप आवश्यक सभी सीएसएस कर सकते हैं:

var checkin = $('.dpd1').datepicker() 
.on('click', function (ev) { 
     $('.datepicker').css("z-index", "999999999"); 
}).data('datepicker');