2013-08-02 32 views
5

के साथ क्लिक करने योग्य बूटस्ट्रैप-डेटपिकर आइकन मैं कोणीय का उपयोग कर रहा हूं और मैं कैलेंडर आइकन में क्लिक करने के बाद अपना बूटस्ट्रैप-डेटपिकर दिखाना चाहता हूं।
अब यह इस तरह है:कोणीय निर्देश

<div class="input-append date datepicker"> 
    <input type="text" b-datepicker ng-model="date"/> 
    <span class="add-on" ><i class="icon-calendar"></i></span> 
</div> 


b-datepicker कहाँ कस्टम निर्देश है। टेक्स्ट फ़ील्ड में क्लिक करें डेटपिकर दिखाता है, लेकिन आइकन क्लिक काम नहीं करता है।
यहाँ सूत्रों: http://jsfiddle.net/cPVDn/

मेरा लक्ष्य इस तरह हो रहा है:
http://jsfiddle.net/6QnMB/

मैं किसी भी मदद की सराहना करते हैं

अद्यतन:
http://jsfiddle.net/cPVDn/53/

:
यहाँ समाधान है
+0

जवाब के रूप में अपने संपादित पोस्ट करें:

directive('bDatepicker', function() { return { restrict: 'A', link: function (scope, el, attr) { el.datepicker({}); var component = el.siblings('[data-toggle="datepicker"]'); if (component.length) { component.on('click', function() { el.trigger('focus'); }); } } }; }) 

यहाँ समाधान के साथ पूर्ण टुकड़ा है –

उत्तर

1

मैं अलग जवाब के रूप में समाधान पोस्टिंग कर रहा हूँ।

बनाने के आइकन पर क्लिक करें के बजाय काम:

directive('bDatepicker', function() { 
return { 
    restrict: 'A', 
    link: function (scope, el, attr) { 
     el.datepicker(); 
    } 
    }; 
}) 

एक तरह कुछ इस्तेमाल कर सकते हैं: http://jsfiddle.net/cPVDn/53/

1

एंगुलरस्ट्रैप से अच्छी प्लगइन देखें जो आपकी समस्या का समाधान करेगी: link

डेमो जे एस

.config(function($datepickerProvider) { 
    angular.extend($datepickerProvider.defaults, { 
    dateFormat: 'dd/MM/yyyy', 
    startWeek: 1 
    }); 
}) 

एचटीएमएल

<input type="text" 
    class="form-control" 
    ng-model="selectedDateAsNumber" 
    data-date-format="yyyy-MM-dd" 
    data-date-type="number" 
    data-min-date="02/10/86" 
    data-max-date="today" 
    data-autoclose="1" 
    name="date2" 
    bs-datepicker> 

देखें Plunker


और यह नियंत्रक में

<div class="input-append date datepicker"> 
    <input type="text" is-open="opened" datepicker-popup ng-model="date"/> 
    <span class="add-on" ng-click="openAction($e)" ><i class="icon-calendar"></i></span> 
</div> 

और फिर: है उनके main page

+0

मैंने अपनी परियोजना में कोणीय-बूटस्ट्रैप का उपयोग किया है और मैं इन दोनों को मिश्रण नहीं करना चाहता, लेकिन आपके सुझाव के बाद मैंने देखा है स्रोतों में और समाधान के साथ आया था। धन्यवाद! – michal

+0

यह उत्तर सबसे अच्छा नहीं है। प्रश्न के उत्तर में उत्तर वास्तविक वास्तविक उत्तर है। यह बस एक निर्देश का उपयोग करता है। मुझे लगता है कि इस पृष्ठ में यह समाधान होना अच्छा होगा। – dxvargas

+0

@hiphip right, उन्होंने 10 महीने बाद संपादन पोस्ट किया।लेकिन फिर भी वह 'बूटस्ट्रैप-डेटपिकर' प्लगइन –

0
bootstrap documentation में

उदाहरण में वे कुछ इस तरह यह करना

$scope.openAction = function ($event) { 

    $event.preventDefault(); 
    $event.stopPropagation(); 

    $scope.opened = !$scope.opened; 
} 
संबंधित मुद्दे