बूटस्ट्रैप के लिए डेटपिकर कोणीय निर्देश

Question

नहीं दिखा रहा है मेरे कोणीय प्रोजेक्ट में मैं बूटस्ट्रैप datepicker के लिए कोणीय निर्देशों का उपयोग करने की कोशिश कर रहा हूं, लेकिन यह प्रदर्शित नहीं हो रहा है।

मैं अपने index.html में और में मेरी app.js मैं एक निर्भरता के रूप में ui.bootstrap डाल दिया <script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script> और <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> से जुड़ा हुआ है।

angular 
    .module('myApp', ['ui.bootstrap']) 

क्या कोई स्पष्ट है कि मुझे याद आ रही है?

मैं एक एनजी-दोहराने के भीतर एक एनजी स्विच भीतर uib-datepicker-popup उपयोग करने के लिए कोशिश कर रहा हूँ, लेकिन मैं नहीं दिख रहा है क्यों कि किसी भी समस्या का कारण होगा:

<div class="form-group" ng-repeat="field in vm.fields"> 
    <label for="{{ field.propertyName }}"> 
     <h5><span translate="{{ field.translate }}"></span> 
      <span class="form-control-required" ng-show="{{field.required}}">*</span> 
     </h5> 
    </label> 
    <div ng-switch="field.type" ng-class="{ 'input-group': field.type === 'date' }"> 
     <select ng-switch-when="gender" 
       name="{{ field.propertyName }}" id="{{ field.propertyName }}" 
       ng-model="vm.model[field.propertyName]" class="form-control" 
       ng-required="{{ field.required }}"> 
      <option value="m">Male</option> 
      <option value="f">Female</option> 
     </select> 
     <textarea ng-switch-when="textarea" 
        name="{{ field.propertyName }}" id="{{ field.propertyName }}" 
        class="form-control" ng-model="vm.model[field.propertyName]" 
        ng-required="{{ field.required }}"></textarea> 
     <input ng-switch-when="date" 
       type="date" uib-datepicker-popup="dd/MM/yyyy" 
       show-weeks="false" is-open="vm.datePickerOpen" 
       name="{{ field.propertyName }}" id="{{ field.propertyName }}" 
       class="form-control pull-left" ng-model="vm.model[field.propertyName]" 
       ng-required="{{ field.required }}"> 
     <span class="input-group-btn btn-" ng-if="field.type === 'date'"> 
      <button type="button" class="btn btn-primary" 
        ng-click="vm.openDatePicker($event)"> 
       <i class="glyphicon glyphicon-calendar"></i> 
      </button> 
     </span> 
     <input ng-switch-default="" 
       type="{{ field.type }}" name="{{ field.propertyName }}" id="{{ field.propertyName }}" 
       class="form-control pull-left" ng-model="vm.model[field.propertyName]" 
       ng-required="{{ field.required }}"> 
    </div> 
</div> 

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

vm.datePickerOpen = false; 

vm.openDatePicker = function($event) { 
    vm.datePickerOpen = true; 
}; 

Answer 1

स्पष्ट रूप से https://angular-ui.github.io/bootstrap/#/datepicker पर प्रलेखन एक नए संस्करण के लिए है। uib-datepicker-popup से datepicker-popup बदलकर यह काम किया।

इसके अलावा, मैं इस वजह से <input type="text" datepicker-popup> को <input type="date" datepicker-popup> बदलना पड़ा: Is there any way to change input type="date" format?

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

Answer 2

उन खोजों के लिए, मेरे पास एक ही समस्या थी, यह मेरी समस्या को ठीक कर दिया। जोड़ा AngularMoment to my module और इंजेक्शन "पल":

$scope.object.moment = moment(); 
$scope.object.date = $scope.object.moment.toDate(); 

तो:

<datepicker ng-model="object.date"></datepicker> 

Answer 3

ने वही समस्या था। खुदाई और कोशिश कर के 2 घंटे के बाद, मैं केवल नियंत्रक में मॉडल डेटा एक तिथि वस्तु बनाकर यह एक

<input type=text" uib-datepicker-popup="dd/MM/yyyy" ng-model="user.birthday" />

के साथ काम करने के लिए सक्षम था

इस

//after we fetch the model (user) data make the needed field a Date object 
user.birthday = new Date(user.birthday); 

की तरह