2017-02-14 5 views
1

Momentan arbeite ich an einem Datepicker für angularjs, die wie erwartet funktioniert. Aber wenn ich versuche, den Wert zum zweiten Mal vom Datepicker zu wählen, wird der Wert nicht geändert. Im Folgenden ist der Code-Snippet so weit ich versucht habe: -angularjs bootstrap datepicker Wert wird nicht geändert, wenn das zweite Mal ausgewählt wird

HTML

<div id="dvFromDate" class='input-group date' datetimepicker ng-model="FromDate"> 
            <input type="text" ng-model="FromDate" class="form-control" @*tooltips tooltip-template="dd/mm/yyyy"*@ required> 
            <span class="input-group-addon"> 
             <span class="glyphicon glyphicon-calendar"></span> 
            </span> 
           </div> 
           <script type="text/javascript"> 
            $(function() { 
             $('#dvFromDate').datetimepicker({ 
              format: 'DD/MM/YYYY' 
             }); 
            }); 

           </script> 

AngularJS

app.directive('datetimepicker', function() { 
    return { 
     require: '?ngModel', 
     restrict: 'A', 
     link: function (scope, element, attrs, ngModel) { 
      if (!ngModel) return; // do nothing if no ng-model 
      ngModel.$render = function() { 
       element.find('input').val(ngModel.$viewValue || ''); 
      }  

      element.on('dp.change', function() { 
       scope.$apply(read); 
      }); 

      read(); 

      function read() { 
       var value = element.find('input').val(); 
       ngModel.$setViewValue(value); 
      } 
     } 
    } 
}); 

ich auch die picker Wert setze zu leeren Zeichenfolge auf einer selectionchanged Ereignis von wählen Dropdown wie folgt aus: -

$scope.FromDate = ''; 
$scope.ToDate = ''; 

Nach dem Drop-Down-Wert leeren String Einstellung, wenn ich einen beliebigen Wert von Datumsauswahl wählen, Wert wird immer null. Jede Art von Hilfe wäre willkommen.

+0

können Sie eine Geige erstellen? – Sravan

+0

bitte fiddle erstellen –

+0

Bitte beachten Sie die Geige: - [Eckige BoostRap Datepicker] (https://plnkr.co/edit/o3UvmjFKqUhZWihh1f84?p=preview) –

Antwort

0

Wenn Sie an der Konsole in Ihrem plnkr betrachten, sehen Sie jquery nicht richtig geladen .......

dieses plnkr See. Es ist nicht perfekt, aber wird Ihnen einen Anfang geben!

https://plnkr.co/edit/oyBF62NkNS3sMwumxk7F?p=preview

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
$scope.model = {}; 
    $scope.model.FromDate1 = "5/5/2016"; 

}); 
app.directive('datetimepicker', function($timeout) { 
    return { 
    restrict: 'A', 
    scope: { }, 
    link: function (scope, element, attrs) { 
     angular.element(element).datepicker({ 
      format: 'DD/MM/YYYY', 
      onClose: function(dateText, inst){ 
      $timeout(function(){scope.$parent.model.FromDate1 = dateText}); 
      console.log(scope.$parent.model.FromDate1); 
      console.log(dateText); 
      } 
     }); 
    } 
    } 
}); 

HTML

<body ng-controller="MainCtrl"> 
    <h3>AngularJs Date Picker</h3> 
    <div class="col-xs-5"> 
     <div class="form-group"> 
     <label>From Date</label> 
      <input type="text" class="form-control" id="dp1" datetimepicker /> 
     </div> 
     <div>From Date<input type="text" ng-model="model.FromDate1"/></div> 
    </div> 
    </body> 
+0

Aktualisiert Plocker: [Aktualisiert Plotter] (https://plnr.r.co/edit/o3UvmjFKqUhZWihh1f84?p = Vorschau) 1. Wählen Sie ein Datum, Sie können den Wert im Eingabefeld sehen 2. Klicken Sie auf Reset-Taste 3. Wählen Sie erneut das selbe Datum aus, das Sie zuvor ausgewählt haben. Das Problem ist, dass Sie den Wert nicht sehen können. Im Folgenden finden Sie den aktualisierten Plotter –

+0

dp.Die Änderung wird nur ausgelöst, wenn Sie den Datumswert ändern. Wenn Sie das gleiche Datum auswählen, wird der in der Auswahl gespeicherte Wert nicht geändert. Sie sollten stattdessen das dp.hide-Ereignis verwenden. – garethb

+0

Das stimmt, du hast Recht. –

0

Auf der Bootstrap-datepicker.js Datei, ich habe Zeilen aus der folgenden Methode auf Kommentar:

notifyEvent = function (e) { 
      //if (e.type === 'dp.change' && ((e.date && e.date.isSame(e.oldDate)) || (!e.date && !e.oldDate))) { 
      // return; 
      //}    
      element.trigger(e); 
     }, 

und jetzt, wenn ich Wählen Sie das gleiche Datum erneut, Wertbindung funktioniert gut. Bitte sehen Sie den aktualisierten Plünderer: Working plunker

Verwandte Themen