anschließen datetimepicker zu angularjs

Muss ich erstellen, die ein Eingabefeld mit Datum und Uhrzeit mit der Winkel - + bootstrap.
Ich fand diese datetime picker sieht es genau ich brauche, - Datum und Uhrzeit in einem Feld, und blockieren Benutzer falsch Editionen.
Ich writed eine Richtlinie, datepickers gestartet, aber es ändert den Blick und das Modell nicht ändert... ich habe auch versucht, onSelect, aber nichts passiert, auch

<div class="container container-fluid" ng-controller="Ctrl1">
2+2={{2+2}}, var1={{var1}}
    <form class="form-horizontal" novalidate name="form" ng-submit="submit()">
    <div class="well">
        <div id="date" class="input-append" datetimez ng_model="var1">
            <input data-format="MM/dd/yyyy HH:mm:ss PP" type="text" id="input1" name="input1" ng_model="var1"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
        </div>
    </div>
</form>

</div>

var project = angular.module('project',['ui.bootstrap']);

project.directive('datetimez', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
            $(function(){
                element.datetimepicker({
                    dateFormat:'dd/MM/yyyy hh:mm:ss',
                    language: 'pt-BR',
                    onSelect:function (date) {
                        //alert('zz');
                        ngModelCtrl.$setViewValue(date);
                        scope.$apply();
                    }
                });
            });
        }
    };
});

project.controller('Ctrl1', ['$scope', '$rootScope',  function(scope, rootScope){

    scope.var1="123";

}]);

Wie es zu lösen ist? - Verbindung?

Kannst du dein Beispiel in Geige?
irgendwie ist es nicht in jsfiddle(
ich verstehe nicht, wie sich zu bewegen es zu jsfiddle, ill versuchen, hinzufügen von max code gibt es
jsfiddle.net/sLmyz kopierte ich den gesamten code enthalten, die alle Dateien, die bu-Datum-dialog nicht angezeigt wird ( hier ist der screenshot der beiden Dateien img5.imageshack.us/img5/8231/9xbp.png
und der Bildschirm der Aktion Datum im input geändert, aber var1 Stahl Alter Wert img62.imageshack.us/img62/3882/5enm.png

InformationsquelleAutor Sol | 2013-10-20

angularjs twitter-bootstrap

11

So, die Probleme sind:
1. ändern ng_modelpro ng-model im div id=date element;
2. entfernen ng_model von der input element und implementieren ngModelCtrl.$render - Funktion, um im Rendern-Modell änderungen am element
3. wie pro die Komponente docs:
Das einzige Ereignis ausgesetzt ist, 'Datum', die enthüllen 'Datum' und 'localDate" Eigenschaften auf das event-Objekt

So müssen Sie behandeln das change-Ereignis noch andere Möglichkeiten, Aussehen:
```
element.datetimepicker({
  dateFormat:'dd/MM/yyyy hh:mm:ss',
    language: 'pt-BR'
  }).on('changeDate', function(e) {
    ngModelCtrl.$setViewValue(e.date);
    scope.$apply();
  });
```
Hier ist ein arbeiten Plnkr.

Einige zusätzliche Tipps:
1. wie schon gesagt, entfernen Sie die interne ng-model und implementieren ngModelCtrl.$render an-Griff Modell-änderungen
2. verwenden Sie die template - Eigenschaft, um die Kapseln die internen Elemente der Komponente
Ein ziemlich einfaches Beispiel für die Verwendung von $render:
```
var picker = element.data('datetimepicker');

ngModelCtrl.$render = function() {
  if (ngModelCtrl.$modelValue) {
    picker.setLocalDate(ngModelCtrl.$modelValue);
  } else {
    picker.setLocalDate(null);
  }
}
```
Danke! "und implementieren ngModelCtrl.$Rendern Sie mit dem Modell änderungen" was meinst du? Bedeutet "ngModelCtrl.$setViewValue(e.Datum);" nicht genug? Eigentlich ich verstehe nicht die Art und Weise neuer Wert kommt an Eingang ( wir setted neuen Wert div(div-wer hat die Richtlinie datetimez') keine Eingabe, so wie funktioniert die Datum-Wert sprang auf input? Es ist, weil der class="input-append"? es ist bootstrap, die dieses tun, Wert bewegen?
Beantworten sowohl Ihre Fragen, verwenden Sie $setViewValue aktualisieren des Modells nach einer änderung in der Ansicht. Und Sie verwenden $render um die Ansicht zu aktualisieren, wenn eine änderung im Modell. Werfen Sie einen Blick in hier. Ein kleines Beispiel, um die Antwort.
Soeben ein Beispiel dafür, wie die Umsetzung der ngModelCtrl.$render Funktion.
ok, ich verstehe, dass wir setted ViewValue für DIV-element, aber wie dieser Wert kommt der input?? Eingang hat keine ngModel atribute... verbunden sind Sie irgendwie per css - id="input1" und class="input-append"? und auch eine Frage, über data-format="MM/dd/yyyy HH:mm:ss PP" - Attribut des input. Wenn wir hardcoded dateFormat:'dd/MM/yyyy hh:mm:ss' aus derictive dann wird es ignoriert?

InformationsquelleAutor Caio Cunha
2

Späte Antwort, aber Sie könnte immer verwenden Sie diese ein

Bootstrap-ui/datetime-picker es nutzt die datepicker und timepicker von bootstrap-ui ohne mit jquery oder moment.js

InformationsquelleAutor Gillardo
1

CaioToOn Lösung ist ganz nett. Aber es scheint, dass es "offizielle" wrapper jetzt auf folgende Adresse:

https://gist.github.com/derfbn/73350e5f8eb92c3967d7

Sie sollten nie mit JQuery Eckige!
ja - ich wünschte, die Dinge waren so einfach...

InformationsquelleAutor kape123

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.