कैसे div बजाय एक इनपुट फ़ील्ड

Question

मैं इस पृष्ठ पर jQueryUI datepicker के साथ काम कर रहा हूँ की कॉल करने के लिए/एक लेबल के लिए एक jQuery datepicker बाँध या - http://jqueryui.com/demos/datepicker/

मैं कैसे बजाय एक लेबल पर यह कहते हैं एक इनपुट की खेत? क्या यह संभव है?

Answer 1

मैंने कोड को नहीं देखा है, लेकिन मुझे संदेह है कि यह मानता है कि यह <input type="text"> तत्व से जुड़ा हुआ है।

तो मान लीजिए कि आपके पास वह तत्व होना चाहिए।

आप <input> छिपा सकते हैं और अपने लेबल ईवेंट से इसकी विधियों के लिए कॉल के माध्यम से डेटपिकर से बातचीत कर सकते हैं।

$(labelselector).click(function() { 
    $(inputselector).datepicker('show'); 
}); 

Answer 2

क्या आप इसे बांधने की कोशिश कर रहे हैं ताकि यह क्लिक पर दिखाया जा सके ताकि परिणाम लेबल या डिव को पॉप्युलेट कर सकें? आप इसे एक छिपे हुए टेक्स्ट बॉक्स में बांध सकते हैं और फिर उस वांछित प्रभाव को उस छिपे हुए क्षेत्र के परिवर्तन() ईवेंट में बाध्य कर सकते हैं।

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

      $("#alternate").click(function() { 
       $("#datepicker").focus(); 
      }); 

     $("#datepicker").change(function() { 
      $("#alternate").html($("#datepicker").val()); 
     }); 
    }); 

<input id="datepicker" style="display:none" /><label id="alternate">change me</label> 

यह फ़ायर्फ़ॉक्स में मेरे लिए ठीक काम किया 3.5

Answer 3

पुन: स्थिति समस्या:

यह Datepicker तरह लग रहा है अपनी स्थिति को पूरी तरह से, तत्व यह लक्ष्य बनाता की भरपाई के आधार पर तय करता है। दुर्भाग्य से, प्रदर्शित करें: किसी भी तत्व के पास ऑफसेट नहीं है।

दो सुझाव दिया तरीके:

1) datepicker की अपनी पद्धति का उपयोग करके स्थिति निर्धारित करें और अपनी पसंद का एक वस्तु की ऑफसेट।

offset = $('myinput').parent('label').offset(); 
$('#date-picker').dpSetOffset(offset.left, offset.top); 

2 अस्पष्टता की तरह अपने इनपुट, हो सकता है कुछ छुपा का एक अलग पद्धति का प्रयास करें):: 0 की तरह कुछ की कोशिश करो (और इसके आईई बराबर, फिल्टर: अल्फा (अस्पष्टता = एक्स))। शैलियों की एक गुच्छा स्थापित करने जा सकता है इनपुट क्षेत्र कम करने के लिए, की तरह की कोशिश करने का एक और बात:

.my_input { 
    border: 0; 
    line-height: 0; 
    font-size: 0; 
    height: 0; 
    overflow: hidden; 
} 

इनपुट वास्तव में दृश्यमान पृष्ठ है, जो उस पर मौजूद करने की जरूरत से इसे हटाने के बिना संभव के रूप में अदृश्य के रूप में पास हो जाओ डेटपिकर से स्थिति प्राप्त करने के लिए।

Answer 4

पुन: स्थिति समस्या

मुझे एक साफ ui पाने के लिए ऊपर दिए गए सुझावों काम नहीं किया। जब लोग लेबल पर क्लिक करते हैं, तो मेरा डेटपिकर नियंत्रण सक्रिय होता है, और मैं नहीं चाहता था कि टेक्स्टबॉक्स बिल्कुल दिखाया गया हो (उपरोक्त सीएसएस प्रयास बंद था, लेकिन फिर भी टेक्स्टबॉक्स को अन्य मुद्दों के बीच फोकस मिला)।

मेरे लिए समाधान टेक्स्टबॉक्स बनाना था कि डेटपिकर < इनपुट प्रकार = "छुपा" से जुड़ा हुआ है .... /> यह मेरे लिए सभी मुद्दों को हल करता है (मैंने छुपा इनपुट नियंत्रण पहले लेबल ताकि इनपुट नियंत्रण से ऑफसेट मेरे लेबल के लिए सही था)।

विशेष रूप से, प्रदर्शित करने के लिए एक सामान्य इनपुट नियंत्रण शैली सेट करना: कोई भी, या दृश्यता: छुपा, आदि काम नहीं किया।

इस समाधान का कारण डेटपिकर नियंत्रण के स्रोत में खंडों के कारण है जो केवल "प्रकार! =" छिपा हुआ कुछ निश्चित कार्य करता है।

Answer 5

डेटपिसकर इनपुट (टेक्स्टबॉक्स) तत्व पर प्रारंभ होता है, लेकिन this bug के अनुसार इसे छिपी हुई इनपुट पर प्रारंभ नहीं किया जा सका। मैं jQueryUI में एक सा स्रोत बदलने के साथ चाल पाया:

_findPos: function(obj) { 
    var inst = this._getInst(obj); 
    var isRTL = this._get(inst, 'isRTL'); 
    while (obj && (obj.type == 'hidden' || obj.nodeType != 1 || $.expr.filters.hidden(obj))) { 
     obj = obj[isRTL ? 'previousSibling' : 'nextSibling'] || obj.parentNode; 
    } 

बदलें यहाँ

obj = obj[isRTL ? 'previousSibling' : 'nextSibling']; 

Answer 6

था मैं एक पाठ मेरी ट्रिगर के रूप में कार्य करना चाहते थे। मैंने इसे display-inline div के अंदर इनपुट करके हल किया है जिसमें इनपुट opacity: 0, position: absolute + pointer-events: none का उपयोग करने के अंदर इनपुट को अदृश्य है।

मेरा उदाहरण यहां देखें: http://codepen.io/KATT/pen/XJbmVr