jQuery UI datepicker

Question

में तिथियों के साथ अतिरिक्त टेक्स्ट प्रदर्शित करें मैं jQuery UI डेटपिकर का उपयोग कर रहा हूं और मैं तिथि के बगल में दिनांक कक्षों के अंदर अतिरिक्त टेक्स्ट प्रदर्शित करना चाहता हूं।

दुर्भाग्य से, .text() और .html() फ़ंक्शन का उपयोग तारीख कोशिकाओं से छेड़छाड़ datepicker कार्यक्षमता टूट जाता है: यह वांछित व्यवहार है। निम्नलिखित डेमो देखें और डेटपिकर का उपयोग करने का प्रयास करें। ध्यान दें कि जब आप कोई तिथि (i) का चयन कस्टम पाठ चला गया है (ii) बदलते महीने कैलेंडर और आप भूमि "अपरिभाषित NaN" महीने पर नष्ट कर देता है:

https://jsfiddle.net/salman/aLdx4L0y/

वहाँ एक समाधान है?

Answer 1

ठीक है, आप कर सकते हैं बंदर-पैच jQuery UI और जोखिम नए संस्करणों या आप datepicker करने के लिए कस्टम data-* विशेषताओं को जोड़ने और CSS pseudo elements का उपयोग कर उन्हें प्रदर्शित करने के लिए दस्तावेज कॉलबैक उपयोग कर सकते हैं के साथ कोड को तोड़ने:

$(function() { 
 
    $("#datepicker").datepicker({ 
 
    beforeShow: addCustomInformation, 
 
    //---^----------- if closed by default (when you're using <input>) 
 
    beforeShowDay: function(date) { 
 
     return [true, date.getDay() === 5 || date.getDay() === 6 ? "weekend" : "weekday"]; 
 
    }, 
 
    onChangeMonthYear: addCustomInformation, 
 
    onSelect: addCustomInformation 
 
    }); 
 
    addCustomInformation(); // if open by default (when you're using <div>) 
 
}); 
 

 
function addCustomInformation() { 
 
    setTimeout(function() { 
 
    $(".ui-datepicker-calendar td").filter(function() { 
 
     var date = $(this).text(); 
 
     return /\d/.test(date); 
 
    }).find("a").attr('data-custom', 110); // Add custom data here 
 
    }, 0) 
 
}

.ui-datepicker .weekend .ui-state-default { 
 
    background: #FEA; 
 
} 
 
.ui-datepicker-calendar td a[data-custom] { 
 
    position: relative; 
 
    padding-bottom: 10px; 
 
} 
 
.ui-datepicker-calendar td a[data-custom]::after { 
 
    /*STYLE THE CUSTOME DATA HERE*/ 
 
    content: '$' attr(data-custom); 
 
    display: block; 
 
    font-size: small; 
 
}

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
 
<link href="//code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> 
 
<input id="datepicker">

,210

यहाँ एक अद्यतन JSFiddle

---

साइड टिप्पणी है: मुझे यकीन है कि जो कार्यक्षमता आपके डेमो में तोड़ दिया है नहीं कर रहा हूँ, लेकिन इस समाधान के बाद से प्रलेखित कॉलबैक और सीएसएस उपयोग कर रहा है, मेरा मानना ​​है कि यह भविष्य में कुछ भी तोड़ने की संभावना कम है

beforeShowDay समारोह हमें प्रत्येक तिथि के लिए "शीर्षक" विशेषता निर्धारित करने की अनुमति देता है: बंदर

Answer 2

अपने जे एस में यह कोड जोड़ें ...

$('#DatePicker').datepicker({ 
changeMonth: true, 
changeYear: true, 
minDate: 0, 
onSelect: function (date, dp) { 
    updateDatePickerCells(); 
}, 
onChangeMonthYear: function(month, year, dp) { 
    updateDatePickerCells(); 
}, 
beforeShow: function(elem, dp) { 
    updateDatePickerCells(); 
}}); 
updateDatePickerCells(); 
function updateDatePickerCells(dp) { 

setTimeout(function() { 

    var cellContents = {1: '20', 15: '60', 28: '$99.99'}; 


    $('.ui-datepicker td > *').each(function (idx, elem) { 
     var value = '$125';//cellContents[idx + 1] || 0; 


     var className = 'datepicker-content-' + CryptoJS.MD5(value).toString(); 

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

डेमो लिंक ... http://jsfiddle.net/pratikgavas/e3uu9/131/

Answer 3

के बाद से jQuery यूआई datapicker सुंदर अखंड है यह सफाई से बढ़ाने के लिए मुश्किल है।

मैं अपने आंतरिक कार्यों में से एक बंदर-पैचिंग के साथ जाऊंगा, अर्थात् _generateHTML।

$.datepicker._generateHTML = (function() { 
 
    var realGenerateHtml = $.datepicker._generateHTML; 
 
    return function (instance) { 
 
     var html = realGenerateHtml.apply(this, arguments), $temp; 
 
     
 
     if (instance.input.is(".datepicker-price")) { 
 
      $temp = $("<table></table>").append(html); 
 
      $temp.find(".ui-datepicker-calendar td a").each(function() { 
 
       var yy = $(this).parent().data("year"), 
 
        mm = $(this).parent().data("month"), 
 
        dd = +$(this).text(); 
 

 
       $(this).append("<br><small class='price'>$100</small>"); 
 
      }); 
 
      html = $temp[0].innerHTML; 
 
     } 
 
     return html; 
 
    }; 
 
})(); 
 

 
$(function() { 
 
    $("#datepicker").datepicker(); 
 
});

.ui-datepicker .weekend .ui-state-default { 
 
    background: #FEA; 
 
} 
 
.price { 
 
    color: blue; 
 
}

<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> 
 

 
<div id="datepicker" class="datepicker-price"></div>

Answer 4

पैचिंग से वहाँ एक बहुत सरल समाधान the accepted answer पर आधारित है। हम सीएसएस छद्म तत्वों का उपयोग करके विशेषता प्रदर्शित कर सकते हैं।

$(function() { 
 
    var dayrates = [100, 150, 150, 150, 150, 250, 250]; 
 

 
    $("#datepicker").datepicker({ 
 
    beforeShowDay: function(date) { 
 
     var selectable = true; 
 
     var classname = ""; 
 
     var title = "\u20AC" + dayrates[date.getDay()]; 
 
     return [selectable, classname, title]; 
 
    } 
 
    }); 
 
});

@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css"); 
 

 
.ui-datepicker td span, 
 
.ui-datepicker td a { 
 
    padding-bottom: 1em; 
 
} 
 

 
.ui-datepicker td[title]::after { 
 
    content: attr(title); 
 
    display: block; 
 
    position: relative; 
 
    font-size: .8em; 
 
    height: 1.25em; 
 
    margin-top: -1.25em; 
 
    text-align: right; 
 
    padding-right: .25em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 
<div id="datepicker"></div>