2009-12-11 13 views
6

मेरे डेटपिकर पर ऑनसलेक्ट जोड़ने के बाद, टेक्स्ट चेंजेड ईवेंट अब इस नियंत्रण के लिए आग नहीं लगाता है।JQuery डेटपिकर ऑन चयन और टेक्स्ट चेंज समस्या

$(function() { 
    $("#<%=txtStartDate.ClientID %>").datepicker({ 
     minDate: 0, 
     dateFormat: 'dd-M-yy', 
     onSelect: function(dateText, inst) { 
      var theDate = new Date(Date.parse($(this).datepicker('getDate'))); 
      $("#<%=txtEndDate.ClientID %>").datepicker('option', 'minDate', theDate); 
     } 
    }); 

    $("#<%=txtEndDate.ClientID %>").datepicker({ 
     dateFormat: 'dd-M-yy' 
    }); 
}); 

<%-- etc ---- %> 

<asp:TextBox ID="txtStartDate" runat="server" AutoPostBack="true" OnTextChanged="txtStartDate_TextChanged"></asp:TextBox> 

मेरे अन्य datepicker (txtEndDate) TextChanged घटना आग तो केवल यह OnSelect txtStartDate नियंत्रण के लिए परिभाषित किया जा रहा करने के लिए रख सकते हैं करता है नीचे: मेरे कोड इस प्रकार है।

इस पर किसी भी मदद की सराहना करते हैं। चीयर्स!

उत्तर

6

jQuery के यूआई datepicker की एक छोटी सी जांच के बाद सूत्रों समाधान सिर्फ परिवर्तन ईवेंट सक्रिय किया जाता खुद

... 
onSelect: function(dateText, inst) { 
    var theDate = new Date(Date.parse($(this).datepicker('getDate'))); 
    $("#<%=txtEndDate.ClientID %>").datepicker('option', 'minDate', theDate); 
    if (inst.input) 
     inst.input.trigger('change'); 
} 
... 

इस का कारण यह jQuery के यूआई datepicker स्रोत में निम्नलिखित लाइनें हैं

if (onSelect) 
    // trigger custom callback 
    onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); 
else if (inst.input) 
    // fire the change event 
    inst.input.trigger('change'); 

आप देख सकते हैं jQuery के यूआई datepicker डिफ़ॉल्ट प्रति change ईवेंट को सक्रिय करता है, तो datepicker उदाहरण एक input क्षेत्र है, लेकिन यह आग नहीं करता है तो आप एक कस्टम onSelect हैंडलर निर्दिष्ट (जैसा कि तुमने किया था)।

आप तर्क दे सकते हैं कि असल में यह सही व्यवहार है क्योंकि यह आपको अधिकतम कॉन्फ़िगरेशन की गारंटी देता है। आप यह तय कर सकते हैं कि क्या आप change ईवेंट ऐसा करना चाहते हैं या नहीं।

लेकिन मैं मानता हूं कि यह व्यवहार शायद दस्तावेज किया जाना चाहिए।

2

तुम बस onSelect समारोह के अंत में

$('<%=txtStartDate.ClientID %>').trigger('change');

जोड़ सकते हैं। उदाहरण के अगले कार्य पर विचार करें: http://jsbin.com/oqunu/ या संपादित संस्करण http://jsbin.com/oqunu/edit

या ले जाने या TextChanged से शुरू हो रहा कार्यों के लिए तर्क और onSelect से छुटकारा पाने के। यहां की तरह: http://jsbin.com/iyajo; संस्करण http://jsbin.com/iyajo/edit

0

इसी तरह से, मैंने पाया कि यदि आप डेटपिकर को टेक्स्ट इनपुट फ़ील्ड में संलग्न करते हैं, और .selectMultiple निर्दिष्ट करते हैं, तो अजीब व्यवहार होता है। विशेष रूप से, जब आप पहले से चुने गए सेल पर क्लिक करते हैं (इसे अचयनित करने के लिए), यह झिलमिलाहट लेकिन चयनित रहता है। ऐसा इसलिए होता है क्योंकि पहले सेल को अचयनित किया जाता है, लेकिन फिर डेटपिकर 'परिवर्तन' ईवेंट फेंकता है। परिवर्तन घटना वर्तमान सेल को वापस चालू कर देती है क्योंकि कैलेंडर टेक्स्ट इनपुट से जुड़ा हुआ है!

यह समझ में आता है, एक तरह से: आपको शायद एक ही टेक्स्ट बॉक्स में एकाधिक चयन नहीं करना चाहिए। लेकिन व्यवहार अनियंत्रित है और पता लगाने के लिए कठिन है जबतक कि आप पहले से ही नहीं जानते कि डेटपिकर टेक्स्ट बॉक्स को कैसे समझता है।

संबंधित मुद्दे