UIBootstrap и Angularjs DatePicker табуляции и прямой ввод

Question

Мы работаем на SPA с использованием Angularjs и Breeze на основе шаблона HotTowel

У нас есть несколько datePickers на странице, которые дают нам следующие проблемы:

• Когда пользователь вводит вкладку datepicker, датапикер открывается, но не закрывается, когда пользователь переходит к следующему элементу управления. Поскольку datepickers укладываются в один столбец ui, это приводит к тому, что раскрывающийся список охватывает поля ниже. Единственный способ их очистки - выбрать дату или щелкнуть в другом месте в форме

• Пользователь не может ввести дату во входную область при редактировании существующей записи, привязанной к модели данных. Если они выделяют дату и пытаются ввести ее, она удаляет существующую дату и не позволит пользователю вводить новую. Если они нажмут на X, чтобы очистить поле ввода, они не могут ввести новую дату. Если они позиционируют свой курсор в конце дня, и забой, дата исчезает и календарь выбора установлен в январе 1902.

По сути, это хорошо, если пользователи готовы подобрать мышь и нажмите дату в сборщике и никогда не пытайтесь ввести дату. Это нереально для нашего сообщества пользователей.

Вот 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> 

Мы используем двухстороннее связывание с нг-моделью.

Любая помощь будет оценена по достоинству.

Благодаря

Answer 1

Если бы та же проблема, и я нашел проблемный код: это линия 4786 в 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; 
} 

Проблема заключается в том, что грязная шашка углов главного делает просто так === в конце он перезаписывает значение представления, потому что это не то же самое, что и в модели (потому что ветер пропускает обновление). если вы опустите часть после || вы можете вводить значения обычно, хотя я столкнулся с другим набором проблем.

Это несоответствие между угловым способом просмотра данных и бриза. Надеюсь, Уорд видит это. Я подниму билет. Не уверен, что было бы хорошим местом для его обработки, но я думаю, что ветерок был бы одним (потому что угловые отлично работают с pojos). Я бы обновил ссылку без побочных эффектов самого обновления.

Answer 2

Мне нужен репродукция для работы, если вы хотите, чтобы я посмотрел на это. Что-то в плункере было бы неплохо.

Я не думаю, что мы сможем изменить наш тест собственности. Мы поехали к этой большой проблеме по уважительной причине. Угловое не имеет понятия DataType, поэтому он не может делать то, что мы делаем.

Но мы должны быть в состоянии прийти к подходящему решению, возможно, с использованием Angular. Например, вы можете написать тривиальную директиву для этого. Возможно, вы сможете справиться с существующим Ng; Я смутно помню, что вы можете указать парсер привязки, который может дублировать логику ветерок. Я слишком долго смотрел на это, но я думаю, что он там.

Answer 3

Я столкнулся с той же проблемой и решил ее, создав переменную placeholder с локальным охватом в модели представления для привязки к сборщику даты.

<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" /> 

Это позволяет задавать поведение датпикера.

Я тогда установить значение бризом сущности этой локальной переменной непосредственно перед сохранением изменений:

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

Это не идеально, но это приемлемый способ решения проблемы, которую вы описываете.