Angular UI Bootstrap Datum-Picker Kombiniert mit UI.Mask

Question

Ich benutze die eckige UI bootstrap popup date-picker, um eine Direktive zu erstellen, die es mir leicht erlaubt, den Datums-Picker bei Bedarf hinzuzufügen.

Wenn ich dies mit der uiMask Directive kombinieren, werden die Werte in der Eingabe verschlüsselt, wenn ich ein Datum auswählen.

Hier ist mein html:

<p class="input-group"> 
    <input type="text" class="form-control" 
      ui-mask="99/99/9999" 
      ng-model="ngModel" 
      ng-model="order.date" 
      datepicker-popup="MM/dd/yyyy" 
      is-open="opened" 
      datepicker-options="dateOptions" 
      date-disabled="disabled(date, mode)" 
      ng-required="true" 
      close-text="Close" /> 
    <span class="input-group-btn"> 
     <button type="button" class="btn btn-default" ng-click="open($event)"> 
      <i class="glyphicon glyphicon-calendar"></i> 
     </button> 
    </span> 
</p> 

Und meine JS:

/** 
* DATE PICKER 
*/ 
$scope.today = function() { 
    $scope.dt = new Date(); 
}; 
$scope.today(); 

$scope.clear = function() { 
    $scope.dt = null; 
}; 

// Disable weekend selection 
$scope.disabled = function (date, mode) { 
    return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6)); 
}; 

$scope.toggleMin = function() { 
    $scope.minDate = $scope.minDate ? null : new Date(); 
}; 
$scope.toggleMin(); 

$scope.open = function ($event) { 
    $event.preventDefault(); 
    $event.stopPropagation(); 

    $scope.opened = true; 
}; 

$scope.dateOptions = { 
    formatYear: 'yy', 
    startingDay: 1 
}; 

$scope.initDate = new Date('2016-15-20'); 
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
$scope.format = $scope.formats[0]; 

Ich möchte in der Lage sein, die ui-Maske Funktion zu nutzen, um die Eingabe einfacher Daten durch muss nicht die / s eingeben. Ist es möglich, diese zusammen nutzen zu können?

Answer 1

Der folgende Ausschnitt für mich gearbeitet:

.config(function ($provide) { 

    $provide.decorator('datepickerPopupDirective', function ($delegate) { 
    var directive = $delegate[0]; 
    var link = directive.link; 

    directive.compile = function() { 
     return function (scope, element, attrs) { 
     link.apply(this, arguments); 
     element.mask("99/99/9999"); 
     }; 
    }; 

    return $delegate; 
    }); 

}); 

Es schmückt einfach die Datumsauswahl-Richtlinie mit einer Maske von jquery.maskedinput.js vorgesehen. Habe Spaß!

---

UPDATE (13. Mai 2015)

A Plunker es zu illustrieren arbeiten: http://plnkr.co/edit/fTFNu9Mp2kX5X1D6AJOx?p=preview

Answer 2

Wenn ich versuche, Ihre Herausforderung, das erste, was zu reproduzieren, die in den Sinn kommt, ist:

new Date('2016-15-20'); 

kehrt

Invalid Date 

Vielleicht ein Ort ist für eine Lösung zu suchen beginnen. Welches Datum ist das? 15. Monat oder 20. Monat? Wie auch immer, das funktioniert nicht. Geben Sie ein gültiges Datum für $scope.initDate ein. Vielleicht hast du '2016-12-20' gemeint?

Können Sie vielleicht ein kleines Beispiel Ihrer Situation erstellen, das wir verwenden können, um mögliche Lösungen zu testen? Und was genau ist der 'verschlüsselte Eingang', von dem Sie sprechen? Geben Sie erneut ein Beispiel für das Problem und das gewünschte Ergebnis an.

Answer 3

Check out Fall 4 in diesem zupfen: https://plnkr.co/edit/0Vr5YRVREIT5EMu1m55z?p=preview

grundsätzlich hinzugefügt: hinzugefügt Modellansicht-Wert = "Wahr":

<input name="date4" id="date4" type="text" class="form-control" uib-datepicker-popup="dd/MM/yyyy" 
    ui-mask="99/99/9999" placeholder="DD/MM/YYYY" ng-model="date4" ng-required="true" 
    model-view-value="true" is-open="popup4.opened" datepicker-options="dateOptions" 
    show-button-bar="false"/> 
<span class="input-group-btn"> 
    <button type="button" class="btn btn-default" ng-click="open4()"><i class="fa fa-calendar fa-1"></i></button> 
</span>