मैंने एक हास्यास्पद समय बिताया है कि मैं एक नई साइट के कई पन्नों के लिए इस समस्या का पता लगाने की कोशिश कर रहा हूं जो मैं विकसित कर रहा हूं और काम करने के लिए कुछ भी नहीं लग रहा था (ऊपर लागू किए गए विभिन्न समाधानों में से कोई भी शामिल है, जिसे मैंने लागू किया है। मुझे लगता है कि jQuery अभी बदल गया है। चीजों का पर्याप्त होने के बाद से उन्हें सुझाव दिया गया था कि समाधान किसी भी तरह से काम नहीं करते हैं। मुझे नहीं पता। ईमानदारी से, मुझे समझ नहीं आता कि इसे कॉन्फ़िगर करने के लिए jQuery के ui में कुछ सरल क्यों लागू नहीं किया गया है, जैसा कि ऐसा लगता है कैलेंडर के साथ एक काफी बड़ा मुद्दा हमेशा किसी न किसी स्थिति पर पॉप अप होता है जो उस इनपुट से पृष्ठ से काफी नीचे होता है जिससे यह जुड़ा हुआ है।
किसी भी तरह, मैं एक अंत समाधान चाहता था जो सामान्य रूप से पर्याप्त था कि मैं इसे कहीं भी उपयोग कर सकता हूं और यह काम करेगा। मुझे लगता है कि अंत में एक निष्कर्ष आया है कि ऊपर कुछ अधिक जटिल और jQuery-कोड-विशिष्ट उत्तरों से बचा जाता है:
jsFiddle: http://jsfiddle.net/mu27tLen/
HTML:
<input type="text" class="datePicker" />
जे एस:
positionDatePicker= function(cssToAdd) {
/* Remove previous positioner */
var oldScript= document.getElementById('datePickerPosition');
if(oldScript) oldScript.parentNode.removeChild(oldScript);
/* Create new positioner */
var newStyle= document.createElement("style");
newStyle.type= 'text/css';
newStyle.setAttribute('id', 'datePickerPostion');
if(newStyle.styleSheet) newStyle.styleSheet.cssText= cssToAdd;
else newStyle.appendChild(document.createTextNode(cssToAdd));
document.getElementsByTagName("head")[0].appendChild(newStyle);
}
jQuery(document).ready(function() {
/* Initialize date picker elements */
var dateInputs= jQuery('input.datePicker');
dateInputs.datepicker();
dateInputs.datepicker('option', {
'dateFormat' : 'mm/dd/yy',
'beforeShow' : function(input, inst) {
var bodyRect= document.body.getBoundingClientRect();
var rect= input.getBoundingClientRect();
positionDatePicker('.page #ui-datepicker-div{z-index:100 !important;top:' + (rect.top - bodyRect.top + input.offsetHeight + 2) + 'px !important;}');
}
}).datepicker('setDate', new Date());
});
अनिवार्य रूप से मैं हर डेटपिकर "शो" इवेंट (पिछले एक को हटाता हूं, यदि मौजूद हो) से पहले सिर पर एक नया स्टाइल टैग संलग्न करता हूं। चीजों को करने का यह तरीका विकास के दौरान जिन मुद्दों को लेकर चला था, उनमें से अधिकांश के आसपास हो जाता है।
क्रोम, फ़ायरफ़ॉक्स, सफारी और IE> 8 पर परीक्षण किया गया (जैसा कि IE8 jsFiddle के साथ अच्छी तरह से काम नहीं करता है और मैं देखभाल करने के लिए अपने उत्साह को खो रहा हूं
मुझे पता है कि यह jQuery और जावास्क्रिप्ट संदर्भों का एक मिश्रण है, लेकिन इस बिंदु पर मैं अभी इसे jQuery में परिवर्तित करने में प्रयास नहीं करना चाहता। सरल होगा, मुझे पता है। मैं अभी इस चीज के साथ हूं। आशा है कि कोई और इस समाधान से लाभान्वित हो सकता है।