jquery ui डेटपिकर सेल में टेक्स्ट जोड़ने का कौन सा तरीका?

Question

मुझे कुछ तिथियों के लिए विशिष्ट मूल्य प्रदान करने के लिए, अधिक सटीक होने के लिए, Jquery UI datepicker पर कुछ तिथियों पर कस्टम टेक्स्ट दिखाएं। मेरा विचार था कि शोडडे से पहले इस तरह के तिथियों के शीर्षक में विशिष्ट मूल्य संलग्न करने के लिए और फिर, प्रत्येक टीडी को जांचने और सेल में शीर्षक का टेक्स्ट रखने के लिए पहले दिखाएं। उदाहरण:

var m, d, y, checkDate, specificPrice = '';  
var specificPrices = {"2013-3-8":"300 EUR", "2013-2-26":"263 EUR"} 

$('#my-datepicker').datepicker({ 
    beforeShowDay:  function checkAvailable(date) { 
    m = date.getMonth(); 
    d = date.getDate(); 
    y = date.getFullYear(); 
    checkDate = y + '-' + (m+1) + '-' + d; 
    if(specificPrices[checkDate]){ 
     specificPrice = specificPrices[checkDate]; 
    }else{ 
     specificPrice = ''; 
    } 
    return [true, "", specificPrice]; 
}, 
    beforeShow: function(elem, inst){ 
     $('table.ui-datepicker-calendar tbody td', inst.dpDiv).each(function(){ 
      var calendarPrice = $(this).attr('title'); 
      if(calendarPrice != undefined){ 
       $(this).find('a').append('<span class="calendar-price">' + calendarPrice + '<span>'); 
      } 
     });   
    } 
}); 

यह पहला कैलेंडर पर कीमतों प्रस्तुत करना (पहले माह/वर्ष बदल रहे हैं) प्रस्तुत करना होगा और इनलाइन कैलेंडर के लिए ही।

मुझे इनलाइन कैलेंडर और किसी भी महीने/वर्ष के परिवर्तन पर दिखाए जाने की कीमतों की आवश्यकता है।

मैंने कुछ अन्य प्रकारों की कोशिश की, और चेंजमोन्थियर पर उपयोग करने की कोशिश की, लेकिन अब तक कोई सफलता नहीं मिली है।

ध्यान के लिए धन्यवाद, आपके विचारों का स्वागत है।

Answer 1

मैं इसी परिदृश्य में आया और सोचा कि मैं एक इनलाइन डेटपिकर के लिए अपना समाधान पोस्ट करूंगा लेकिन पॉपअप डेटपिकर के लिए भी काम करना चाहिए।

सबसे पहले, आप डेटपिकर प्लगइन द्वारा बनाई गई तालिका कक्षों की सामग्री को संशोधित नहीं कर सकते हैं। ऐसा करने से इसकी मूल कार्यक्षमता तोड़ जाएगी क्योंकि यह चयनित दिनांक स्ट्रिंग उत्पन्न करने के लिए सेल सामग्री को पढ़ती है। इसलिए, सामग्री शुद्ध सीएसएस का उपयोग करके जोड़ा जाना चाहिए।

अपने datepicker

$('#DatePicker').datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    minDate: 0, 
    //The calendar is recreated OnSelect for inline calendar 
    onSelect: function (date, dp) { 
     updateDatePickerCells(); 
    }, 
    onChangeMonthYear: function(month, year, dp) { 
     updateDatePickerCells(); 
    }, 
    beforeShow: function(elem, dp) { //This is for non-inline datepicker 
     updateDatePickerCells(); 
    } 
}); 
updateDatePickerCells(); 

बनाएं, जबकि पहले से ही बनाए गए का ट्रैक रखने, सेल सामग्री

function updateDatePickerCells(dp) { 
    /* Wait until current callstack is finished so the datepicker 
     is fully rendered before attempting to modify contents */ 
    setTimeout(function() { 
     //Fill this with the data you want to insert (I use and AJAX request). Key is day of month 
     //NOTE* watch out for CSS special characters in the value 
     var cellContents = {1: '20', 15: '60', 28: '100'}; 

     //Select disabled days (span) for proper indexing but apply the rule only to enabled days(a) 
     $('.ui-datepicker td > *').each(function (idx, elem) { 
      var value = cellContents[idx + 1] || 0; 

      /* dynamically create a css rule to add the contents with the :after       
       selector so we don't break the datepicker functionality */ 
      var className = 'datepicker-content-' + value; 

      if(value == 0) 
       addCSSRule('.ui-datepicker td a.' + className + ':after {content: "\\a0";}'); //  
      else 
       addCSSRule('.ui-datepicker td a.' + className + ':after {content: "' + value + '";}'); 

      $(this).addClass(className); 
     }); 
    }, 0); 
} 

सम्मिलित करने के लिए मक्खी पर नए CSS नियम बनाने के लिए एक विधि जोड़ें विधि बनाएँ।

var dynamicCSSRules = []; 
function addCSSRule(rule) { 
    if ($.inArray(rule, dynamicCSSRules) == -1) { 
     $('head').append('<style>' + rule + '</style>'); 
     dynamicCSSRules.push(rule); 
    } 
} 

और अंत में, नए सेल सामग्री के लिए कुछ डिफ़ॉल्ट सीएसएस

.ui-datepicker td a:after 
{ 
    content: ""; 
    display: block; 
    text-align: center; 
    color: Blue; 
    font-size: small; 
    font-weight: bold; 
} 

यह बुनियादी सामग्री के लिए काम करता है, लेकिन आप '$ 20.95' की तरह कुछ के साथ फैंसी प्राप्त करना चाहते हैं, तो (सीएसएस विशेष वर्ण हैं) , आप className चर बनाने के लिए सामग्री के md5 हैश का उपयोग कर सकते हैं।

संपादित JSFiddle @ युग के JSFiddle से संशोधित और अधिक जटिल सामग्री के लिए अद्वितीय वर्ग के नाम का एक MD5 हैश शामिल करने के लिए।

Answer 2

@ प्रेस्टन के उत्तर और this post पर आधारित, मेरे पास एक अच्छा सरल समाधान है जिसे <style> टैग हेडर में जोड़ने की आवश्यकता नहीं है।

मेरे समाधान अद्यतन करता प्रेस्टन के रूप में इस तरह:

संशोधित updateDatePickerCells समारोह:

function updateDatePickerCells(dp) { 
    /* Wait until current callstack is finished so the datepicker 
     is fully rendered before attempting to modify contents */ 
    setTimeout(function() { 
     //Fill this with the data you want to insert (I use and AJAX request). Key is day of month 
     //NOTE* watch out for CSS special characters in the value 
     var cellContents = {1: '20', 15: '60', 28: '100'}; 

     //Select disabled days (span) for proper indexing but apply the rule only to enabled days(a) 
     $('.ui-datepicker td > *').each(function (idx, elem) { 
      var value = cellContents[idx + 1] || 0; 

      /***** MAGIC! *****/ 

      $(this).attr('data-content', value); 

      // and that's it! (oh, so easy) 
     }); 
    }, 0); 
} 

इस समाधान के साथ, आप addCSSRule समारोह बिल्कुल जरूरत नहीं है।

संशोधित सीएसएस:

/* to target all date cells */ 
.ui-datepicker td > *:after { 
    content: attr(data-content); /***** MAGIC! *****/ 

    /* add your other styles here */ 
} 

/* to target only allowed date cells */ 
.ui-datepicker td > a:after { 
} 

/* to target only disabled date cells */ 
.ui-datepicker td > span:after { 
} 

datepicker वस्तु

साथ शुरु कर रहा है आप updateDatePickerCells समारोह में datepicker वस्तु की जरूरत है, यहाँ एक तरह से प्रारंभ समय में इसे पाने के लिए है। (this post के आधार पर)

var calendarElem = $('#DatePicker').datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    minDate: 0, 
    //The calendar is recreated OnSelect for inline calendar 
    onSelect: function (date, dp) { 
     updateDatePickerCells(dp); 
    }, 
    onChangeMonthYear: function(month, year, dp) { 
     updateDatePickerCells(dp); 
    }, 
    beforeShow: function(elem, dp) { //This is for non-inline datepicker 
     updateDatePickerCells(dp); 
    } 
}); 

var datepicker = $.datepicker._getInst(calendarElem[0]); 
updateDatePickerCells(datepicker);