UIBootstrap und AngularJS picker Tabbing und Direkteinstieg

Question

Wir sind auf einem SPA arbeiten mit AngularJS und Breeze auf der Grundlage der HotTowel Vorlage

Wir haben mehr Kalenderwerkzeug auf der Seite, die uns die folgenden Probleme geben:

• Wenn der Benutzer in einen Datumsauswahlpunkt eingreift, wird der Datumsauswahldialog geöffnet, jedoch nicht geschlossen, wenn der Benutzer zum nächsten Steuerelement wechselt. Da die Datepicker in der gleichen Spalte des ui gestapelt sind, bewirkt dies, dass das Dropdown die darunter liegenden Felder abdeckt. Sie können nur ein Datum auswählen oder auf eine andere Stelle im Formular klicken

• Der Benutzer kann beim Bearbeiten eines vorhandenen Datensatzes, der an das Datenmodell gebunden ist, kein Datum in den Eingabebereich eingeben. Wenn sie das Datum markieren und versuchen, es einzugeben, löscht es das vorhandene Datum und lässt dem Benutzer keinen neuen Schlüssel zu. Wenn sie auf das X klicken, um das Eingabefeld zu löschen, können sie kein neues Datum eingeben. Wenn sie am Ende des Datums ihre Cursor positionieren und Backspace, verschwindet das Datum und der Kalender-Picker ist auf Januar 1902.

Im Wesentlichen dieser in Ordnung, wenn die Benutzer bereit sind, eine Maus zu holen und klicken Sie auf ein Datum in der Auswahl und versuchen Sie nie, ein Datum einzugeben. Das ist für unsere Nutzergemeinschaft nicht realistisch. Hier

ist die html:

       <label for="ApplicationCompleteDate" data-ng-show="vm.mode === 'edit'"><strong>Application Complete Date:</strong></label> 
          <div class="input-append" data-ng-show="vm.mode === 'edit'"> 
           <span> 
            <input name="ApplicationCompleteDate" type="text" class="form-control input-medium" tabindex="16" placeholder="{{vm.format}}" 
              datepicker-popup="{{vm.format}}" close-text="Close" show-weeks='false' 
              is-open="vm.applicationCompleteDateOpened" 
              datepicker-options="vm.dateOptions" 
              data-ng-model="vm.formData.dateApplicationComplete" 
              data-ng-required="vm.applicationCompleteDateRequired" 
              data-ng-readonly="(!user.isInUserGroup && vm.mode === 'new') || (!user.isInCPUGroup && vm.mode === 'edit')" /> 
           </span> 
           <span class="add-on"> 
            <a href="#" data-ng-click="vm.applicationCompleteDateOpen($event)"><i class="icon-calendar"></i></a> 
           </span> 
          </div> 
          <label for="DecisionDatePicker" data-ng-show="vm.mode === 'edit'"><strong>Decision Date:</strong></label> 
          <div class="input-append" data-ng-show="vm.mode === 'edit'"> 
           <span> 
            <input name="DecisionDatePicker" id="ddpID" type="text" class="form-control input-medium" tabindex="14" placeholder="{{vm.format}}" 
              datepicker-popup="{{vm.format}}" close-text="Close" show-weeks='false' 
              is-open="vm.decisionDateOpened" 
              datepicker-options="vm.dateOptions" 
              data-ng-model="vm.formData.dateDecision" 
              data-ng-required="vm.decisionDateRequired" 
              data-ng-readonly="(!user.isInUserGroup && vm.mode === 'new') || (!user.isInCPUGroup && vm.mode === 'edit')" /> 
           </span>          
           <span class="add-on"> 
            <a href="#" data-ng-click="vm.decisionDateOpen($event)"><i class="icon-calendar"></i></a> 
           </span> 
          </div> 
          <label for="DateClosedPicker" data-ng-show="vm.mode === 'edit'"><strong>Closed Date:</strong></label> 
          <div class="input-append" data-ng-show="vm.mode === 'edit'"> 
           <span> 
            <input name="DateClosedPicker" type="text" class="form-control input-medium" tabindex="15" placeholder="{{vm.format}}" 
              datepicker-popup="{{vm.format}}" close-text="Close" show-weeks='false' 
              is-open="vm.dateClosedOpened" 
              datepicker-options="vm.dateOptions" 
              data-ng-model="vm.formData.dateClosed" 
              data-ng-required="false" 
              data-ng-readonly="(!user.isInUserGroup && vm.mode === 'new') || (!user.isInCPUGroup && vm.mode === 'edit')" /> 
           </span>          
           <span class="add-on"> 
            <a href="#" data-ng-click="vm.dateClosedOpen($event)"><i class="icon-calendar"></i></a> 
           </span> 
          </div> 

Wir sind mit Zwei-Wege-Bindung mit ng-Modell.

Jede Hilfe wäre willkommen.

Dank

Answer 1

hatte das gleiche Problem und ich fand den problematischen Code: es ist Linie 4786 in breeze.debug.js

// exit if no change - extra cruft is because dateTimes don't compare cleanly. 
if (newValue === oldValue || (dataType && dataType.isDate && newValue && oldValue && newValue.valueOf() === oldValue.valueOf())) { 
    return; 
} 

Problem ist, dass ist schmutzig checker winkelförmigen Stangen gerade tun === so Am Ende wird der Wert für die Ansicht überschrieben, weil er nicht mit dem Modell übereinstimmt (weil Breeze das Update überspringt). wenn Sie den Teil nach || weglassen Sie können Werte normal eingeben, obwohl ich dann in eine andere Reihe von Problemen lief.

Dies ist ein Missverhältnis zwischen der Art und Weise, wie der Winkel auf Daten und Brise schaut. Ich hoffe, Ward sieht das. Ich hole ein Ticket. Ich bin mir nicht sicher, was wäre ein guter Ort, um damit umzugehen, aber ich denke, Brise wäre die eine (weil eckig gut mit Pojos funktioniert). Ich würde die Referenz ohne die Nebenwirkungen des Updates selbst aktualisieren.

Answer 2

Ich brauche eine Repro, um zu arbeiten, wenn Sie wollen, dass ich das hier untersuche. Etwas in Plunker wäre nett.

Ich glaube nicht, dass wir unseren Eigenschaftstest ändern können. Wir haben aus einem guten Grund so viel Ärger gemacht. Angular hat keine Ahnung von DataType und kann daher nicht das tun, was wir tun.

Aber wir sollten in der Lage sein, zu einer geeigneten Lösung zu kommen, vielleicht mit Angular. Zum Beispiel könnten Sie eine triviale Anweisung dafür schreiben. Sie können möglicherweise mit vorhandenen Ng umgehen; Ich erinnere mich vage daran, dass Sie einen Bindungsparser angeben können, der die Brise-Logik duplizieren kann. Es ist zu lange her, dass ich mir das anschaue, aber ich denke, es ist da.

Answer 3

Ich stieß auf das gleiche Problem und löste es, indem ich eine lokal begrenzte Platzhaltervariable auf dem Ansichtsmodell für die Bindung an die Datumsauswahl erstellte.

<input type="text" 
    class="form-control" 
    datepicker-popup="M/d/yyyy" 
    is-open="vm.openedStartDate" 
    ng-model="vm.selectedStartDate" 
    close-text="Close" 
    show-button-bar="false" /> 

Dies ermöglicht das gewünschte Verhalten des Datepicker.

ich dann die Brise Entität Wert auf diese lokale Variable gesetzt, kurz bevor die Änderungen zu speichern:

task.StartDate = vm.selectedStartDate; 
task.EndDate = vm.selectedEndDate; 
datacontext.saveChanges(); 

Es ist nicht perfekt, aber es ist eine praktikable Abhilfe für das Problem, das Sie beschreiben.