angularJS

Question

के भीतर बूटस्ट्रैप डेटाेटिमेकर परिवर्तन घटनाओं का पता लगाने के लिए मैं कोणीय में इस डेटाटाइम पिकर का उपयोग कर रहा हूं।

https://eonasdan.github.io/bootstrap-datetimepicker/

एक नियंत्रक के अंदर मेरे पास है:

$('#picker').datetimepicker(); 

मेरी HTML में मेरे पास है:

<div id="#picker" > 
     <input type='text' style="font-size:10pt;" class="rptv-input" placeholder="Start Time" ng-model='adate' ng-change="datechange()" /> 
     <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-calendar"></span> 
     </span> 
    </div>  

सब कुछ एक नियंत्रक "AppController" द्वारा किया जाता है। समस्या यह है कि, जब मैं क्लिक करके कैलेंडर पर दिनांक चुनता हूं, तो यह किसी भी "परिवर्तन" ईवेंट को ट्रिगर नहीं करता है (दूसरे शब्दों में, डेटchange को निकाल दिया नहीं जाता है)। अगर मैं एनजी-मॉडल "एडेट" पर घड़ी करता हूं, तो यह भी इसे ट्रिगर नहीं करता है। यदि मैं टेक्स्ट बॉक्स में टाइप करता हूं, तो दायरा परिवर्तनीय परिवर्तन।

यदि उपयोगकर्ता इसे बदलने के लिए चयनकर्ता की तारीख पर क्लिक करता है तो मैं टेक्स्ट बॉक्स पर परिवर्तनों का पता कैसे लगा सकता हूं?

Answer 1

यहां तर्क का जस्ट है, लेकिन मूल रूप से आपको एक निर्देश बनाने की आवश्यकता है जो बदले में डेटीमिपिकर बनाता है। फिर बूस्ट्राप्स change() फ़ंक्शन के भीतर आपको $apply() करना होगा जो एक पाचन चक्र को ट्रिगर करता है और आपके मॉडल को अपडेट करता है।

boostrap 3 datetimepicker event documentation

angular.module('yourApp') 
.directive('datetimepicker', function() { 
    return { 
     restrict: 'A', 
     require : 'ngModel', 
     link : function (scope, element, attrs, ngModelCtrl) { 

      element.datetimepicker({ 
       change:function (date) { 

        // Triggers a digest to update your model 
        scope.$apply(function() { 
         ngModelCtrl.$setViewValue(date); 
        }); 

       } 
      }); 
     } 
    } 
}); 

उपयोग:

<input datetimepicker ng-model="adate" /> 

Answer 2

परिवर्तन घटना, बूटस्ट्रैप के भीतर शुरू हो रहा है इसलिए आपको change घटना इतनी तरह पकड़ने के लिए अपनी timepicker के लिए एक कस्टम निर्देश बनाने के लिए आवश्यकता हो सकती है :

.directive('yourDirective', function(){ 
         return{ 
          require: '?ngModel', 
          restrict: 'A', 
          link: function (scope,element,attrs, ngModel){ 
          if (!ngModel) return; 
          element.bind('change', function(e){ 
          //triggered event if change 
          }); 
          } 
         }; 
         }); 

Answer 3

मेरा निर्देश और कोणीय 1। 5 घटक

 .directive('externalUpdate', ['$parse', function($parse) { 
      return { 
       link: function(scope, element, attrs){ 
        var setterFunc = $parse(attrs.ngModel).assign; 
        var func = scope.$eval(attrs.externalUpdate); 
        func(element, function(value) { 
         scope.$apply(function() { 
          setterFunc(scope, value); 
         }); 
        }); 
       } 
      }; 
     }]) 
     .component('datebox', { 
      bindings: { 
       size: '@@?', 
       name: '@@', 
       text: '@@', 
       model: '=', 
       classes: '@@?', 
       disabled: '=?', 
       time: '<?' 
      }, 
      controller: function() { 
       if (!this.size) { 
        this.col1 = '6'; 
        this.col2 = '6'; 
       } else { 
        var size = parseInt(this.size); 
        this.col1 = size.toString(); 
        this.col2 = (12 - size).toString(); 
       } 
       this.updateInput = function(element, setter) { 
        element.on("dp.change", function() { setter(element.val()); }); 
       } 
      }, 
      template: String.raw` 
       <div class="form-group"> 
        <label ng-if="$ctrl.col1!='0'" for="{{::$ctrl.name}}" class="col-md-{{::$ctrl.col1}} control-label">{{::$ctrl.text}}</label> 
        <div class="col-md-{{::$ctrl.col2}}"> 
         <input type="text" id="{{::$ctrl.name}}" ng-disabled="$ctrl.disabled" 
          class="form-control input-sm {{::$ctrl.classes}}" 
          ng-class="[{datepicker: $ctrl.time!=true},{datetimepicker: $ctrl.time==true}]" 
          ng-model="$ctrl.model" external-update="$ctrl.updateInput"> 
        </div> 
       </div>` 
     }) 
     .component('daterangebox', { 
      bindings: { 
       size: '@@?', 
       name: '@@', 
       text: '@@', 
       model: '=', 
       classes: '@@?', 
       disabled: '=?', 
       time: '<?' 
      }, 
      controller: function() { 
       if (!this.model || typeof this.model !== 'object') { 
        this.model = {}; 
       } 
       if (!this.size) { 
        this.col1 = '6'; 
        this.col2 = '6'; 
       } else { 
        var size = parseInt(this.size); 
        this.col1 = size.toString(); 
        this.col2 = (12 - size).toString(); 
       } 
       this.updateInput = function(element, setter) { 
        element.on("dp.change", function() { setter(element.val()); }); 
       } 
      }, 
      template: String.raw` 
       <div class="form-group"> 
        <label ng-if="$ctrl.col1!='0'" for="{{::$ctrl.name}}" class="col-md-{{::$ctrl.col1}} control-label">{{::$ctrl.text}}</label> 
        <div class="col-md-{{::$ctrl.col2}}"> 
         <div class="input-group"> 
          <input type="text" id="{{::$ctrl.name}}" ng-disabled="$ctrl.disabled" 
           class="form-control input-sm {{::$ctrl.classes}}" 
           ng-class="[{datepicker: $ctrl.time!=true},{datetimepicker: $ctrl.time==true}]" 
           ng-model="$ctrl.model.start" external-update="$ctrl.updateInput"> 
          <span class="input-group-addon input-sm">-</span> 
          <input type="text" ng-disabled="$ctrl.disabled" 
           class="form-control input-sm {{::$ctrl.classes}}" 
           ng-class="[{datepicker: $ctrl.time!=true},{datetimepicker: $ctrl.time==true}]" 
           ng-model="$ctrl.model.end" external-update="$ctrl.updateInput"> 
         </div> 
        </div> 
       </div>` 
     }) 

Answer 4

एक अन्य विकल्प होगा

HTML:

 <div class="input-group date" id="dateTimePicker"> 
      <input type="text" class="form-control" /> 
      <span class="input-group-addon" ng-click="setDateTime()"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 

नियंत्रक:

 $scope.setDateTime = function() { 

      $("#dateTimePicker").datetimepicker().on("dp.change", function (data) { 

       $scope.date = data.date._d; 

      }); 

     } 

Answer 5

एक और सरल विधि .. यह मेरे लिए काम किया,

एचटीएमएल

<input id="datepicker" type="text" class="form-control" data-ng-model="CurDate"/> 

jQuery कोड:

$("#datepicker").on("dp.change", function() { 
    $(this).trigger('change'); 
}); 

रखने फिक्स/वैकल्पिक हल के लिए अलग से के बारे में सोचा ...

वहाँ भी एक कोणीय आवरण (मैं हेवन 'है टी कोशिश की।) https://gist.github.com/eugenekgn/f00c4d764430642dca4b

Answer 6

आपके ऐप के लिए वैश्विक समाधान के लिए, मैं निश्चित रूप से ऊपर दिए गए उत्तरों में दिखाए गए कस्टम निर्देशों का समर्थन करता हूं। लेकिन एक-ऑफ के लिए:

वर्तमान Bootstrap documentation के अनुसार, संलग्न ईवेंट हैंडलर को changeDate ईवेंट की तलाश करने की आवश्यकता है।

HTML मार्कअप: उदाहरण देखें

<input class="date-picker" type="text" ng-model="$ctrl.model.date" /> 

कोणीय 1.5.9 नियंत्रक:

(function() { 

    'use strict' 

    var MyTestController = function() { 

     var vm = this; 

     vm.model = { 
      date: undefined 
     }; 

     (function initilize() { 
      $('.date-picker').datepicker({ 
       autoclose: true, 
       forceParse: false 
      }).on('changeDate', function (e) { 
       console.log('date was changed to: ' + e.date); 
      }); 
     })(); 
    }; 

    angular.module('myApp').component('myTest', { 
     controller: [MyTestController], 
     templateUrl: 'app/modules/my-test/view.html' 
    }); 
})(); 

Answer 7

मैं हाल ही में एक ही मुद्दा (रहा था का उपयोग कर AngularJS भीतर DateTimePicker परिवर्तन घटना का पता लगाने https://eonasdan.github.io/bootstrap-datetimepicker/) और वास्तव में मेरे लिए क्या काम किया गया था @Mark Pieszak का एक ही विचार था, लेकिन कुछ मामूली परिवर्तनों के साथ (मुझे लगता है कि प्लगिंग संस्करण की वजह से)। आप pluging के संस्करण 4 का उपयोग कर रहे हैं, तो आप श्रोता पर और dp.change घटना उपयोग करने के लिए परिवर्तन घटना

app.directive('datetimepicker', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, element, attrs, ngModelCtrl) { 

      element.datetimepicker({ 
       defaultDate: new Date(), 
       maxDate: moment().endOf('d'), 
       locale: 'es', 
       format: 'DD/MM/YYYY', 
       widgetPositioning: { horizontal: 'right', vertical: 'bottom' } 

      }).on('dp.change', function (date) { 
       scope.$apply(function() { 
        ngModelCtrl.$setViewValue(date.date !== false ? date : null); 
       }); 
      }); 
     } 
    } 
}); 

प्राप्त करने की आवश्यकता और उपयोग में ही है।

<input datetimepicker name="yourInputName" id="yourInputName" type='text' class="form-control" ng-model="yourModelProperty" ng-required="yourRequiredExpression" ng-disabled="yourDisabledExpression" /> 

अभिव्यक्ति मैं ngModelCtrl। $ SetViewValue() पैरामीटर के रूप में उपयोग किया जाता था, क्योंकि जब मैं केवल तिथि पैरामीटर पारित कर दिया इनपुट मान्य हो रही थी तब भी जब मैं इसे खाली छोड़ दिया है।