twitter bootstrap बूटस्ट्रैप 3 के साथ काम करने के लिए मैं बूटस्ट्रैप-डेटपिकर कैसे प्राप्त करूं?




twitter-bootstrap twitter-bootstrap-3 (2)

मैं eternicode (एंड्रयू रोल्स) द्वारा बनाए गए bootstrap-datepicker eternicode के संस्करण का उपयोग करता हूं।

बूटस्ट्रैप 2 पर यह काम करता है, लेकिन अब यह बूटस्ट्रैप 3 लाइब्रेरी के साथ काम नहीं करता है।

Bootstrap 3 साथ काम करने के लिए मैं bootstrap-datepicker कैसे प्राप्त कर सकता हूं?

नोट: भंडार eternicode से एक संगठन खाते (uxsolutions) में स्थानांतरित हो गया।


किसी और के लिए जो इस में चलता है ...

इस प्लगइन का संस्करण 1.2.0 (इस पोस्ट के रूप में वर्तमान) बूटस्ट्रैप 3.0 के साथ दस्तावेज के रूप में सभी मामलों में काफी काम नहीं करता है, लेकिन यह मामूली कामकाज के साथ करता है।

विशेष रूप से, यदि आइकन के साथ इनपुट का उपयोग करते हैं, तो HTML मार्कअप निश्चित रूप से अलग है क्योंकि कक्षा के नाम बदल गए हैं:

<div class="input-group" data-datepicker="true">
    <input name="date" type="text" class="form-control" />
    <span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>

ऐसा इसलिए लगता है, आपको एक ऐसे चयनकर्ता का उपयोग करने की आवश्यकता है जो सीधे इनपुट तत्व को इंगित करे, कि मूल कंटेनर (जो डेमो पृष्ठ पर ऑटो जेनरेट किया गया HTML सुझाता है)।

$('*[data-datepicker="true"] input[type="text"]').datepicker({
    todayBtn: true,
    orientation: "top left",
    autoclose: true,
    todayHighlight: true
});

ऐसा करने के बाद आप शायद आइकन पर क्लिक / टैप करने के लिए श्रोता जोड़ना चाहेंगे ताकि क्लिक किए जाने पर टेक्स्ट इनपुट पर ध्यान केंद्रित किया जा सके (डिफ़ॉल्ट रूप से टीबी 2.x के साथ इस प्लगइन का उपयोग करते समय यह व्यवहार है)।

$(document).on('touch click', '*[data-datepicker="true"] .input-group-addon', function(e){
    $('input[type="text"]', $(this).parent()).focus();
});

एनबी: मैं सिर्फ डेटा-डेटपिकर बूलियन विशेषता का उपयोग करता हूं क्योंकि कक्षा का नाम 'डेटपिकर' प्लगइन द्वारा आरक्षित है और मैं स्टाइल तत्वों के लिए पहले ही 'डेट' का उपयोग करता हूं।


मैं स्टीफन पेट्रे के http://www.eyecon.ro/bootstrap-datepicker का भी उपयोग करता हूं और यह बिना किसी संशोधन के बूटस्ट्रैप 3 के साथ काम नहीं करता है। ध्यान दें कि http://eternicode.github.io/bootstrap-datepicker/ स्टीफन पेट्रे के कोड का एक कांटा है।

नए सीएसएस का उपयोग करने और बूटस्ट्रैप 3 में ग्रिड लेआउट बनाने के लिए आपको अपना मार्कअप (नमूना मार्कअप काम नहीं करेगा) को बदलना होगा। इसके अलावा, आपको वास्तविक बूटस्ट्रैप-डेटपिकर कार्यान्वयन में कुछ सीएसएस और जावास्क्रिप्ट को संशोधित करना होगा।

मेरा समाधान यहाँ है:

<div class="form-group row">
  <div class="col-xs-8">
    <label class="control-label">My Label</label>
    <div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
      <input class="form-control" type="text" readonly="" value="12-02-2012">
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
  </div>
</div>

176-177 लाइनों पर datepicker.css में सीएसएस परिवर्तन:

.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {

लाइन 34 पर datepicker-bootstrap.js में जावास्क्रिप्ट परिवर्तन:

this.component = this.element.is('.date') ? this.element.find('.input-group-addon') : false;

अद्यतन करें

http://eternicode.github.io/bootstrap-datepicker/ से नए कोड का उपयोग इस प्रकार हैं:

446-447 लाइनों पर datepicker.css में सीएसएस परिवर्तन:

.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {

लाइन 46 पर datepicker-bootstrap.js में जावास्क्रिप्ट परिवर्तन:

 this.component = this.element.is('.date') ? this.element.find('.input-group-addon, .btn') : false;

अंत में, डेटपिकर को सक्षम करने के लिए जावास्क्रिप्ट (कुछ विकल्पों के साथ):

 $(".input-group.date").datepicker({ autoclose: true, todayHighlight: true });

बूटस्ट्रैप 3.0 और JQuery 1.9.1 के साथ परीक्षण किया गया। ध्यान दें कि यह कांटा दूसरे की तुलना में बेहतर है क्योंकि यह अधिक सुविधा समृद्ध है, स्थानीयकरण समर्थन और ऑटो-पोजिशन को नियंत्रण स्थिति और विंडो आकार के आधार पर डेटपिकर है, जो पिकर को स्क्रीन से बाहर जाने से बचाता है जो पुराने के साथ समस्या थी संस्करण।





bootstrap-datepicker