Кендо UI Выбор даты + AngularJS. При инициализации указатель даты пуст

0

Вот мой код:

http://dojo.telerik.com/@CarloCruz/IjEZa

При начальной загрузке датапикер пуст.

Если вы удалите ng-model из шаблона директивы, то datepicker будет работать так, как должен, с начальным значением, но изменение параметра datepicker не приведет к загрязнению формы.

Как установить начальное значение и вызвать триггер угловой формы?

Теги:
datepicker
kendo-ui

1 ответ

1
Лучший ответ

Вероятно, потому что директивы обернуты (ваш пользовательский обертывает telerik, который обертывает jquery). Просто измените его вручную следующим образом:

 <!DOCTYPE html>
 <html>
 <head>
     <base href="http://demos.telerik.com/kendo-ui/dropdownlist/angular">
     <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
     <title></title>
     <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css" />
     <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.blueopal.min.css" />

  <script src="//kendo.cdn.telerik.com/2015.3.930/js/jquery.min.js"></script>
  <script src="//kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
  <script src="//kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
 </head>
 <body>
 <div id="example" ng-app="KendoDemos">
 <div class="demo-section k-content" ng-controller="MyCtrl">            
  <div ng-form="testform">
    {{testform.$dirty}}
    {{dateAttach}}<br />
    <my-datepicker form="testform" ng-model="dateAttach" required></my-datepicker>
  </div>   
 </div>
 </div>

 <script>
   angular.module("KendoDemos", ["kendo.directives"])
       .controller("MyCtrl", function($scope) {
          $scope.dateAttach = new Date(1444015467000);
       }).controller('DatePickerCtrl', [
        '$scope', function($scope) {
            $scope.$watch('date', function(oldVal, newVal) {
              if(oldVal != newVal){
                $scope.form.$dirty = true;
              }
            });              
        }
    ]).directive('myDatepicker', [
        function() {
            return {
                restrict: 'E',
              scope: {
                date: '=ngModel',
                form: '='
              },
            controller: 'DatePickerCtrl',
                template: '{{date}}<br /><input kendo-date-picker="datePicker" k-ng-model="date" k-ng-delay="date"/>'
            };
         }            
    ])

  • 0
    Спасибо за этот ответ @diana, но ваше решение не приводит к тому, что форма становится грязной при смене выбора даты.
  • 0
    @CarloCruz извините, моя ошибка, просто пропустил тот факт, что вам нужна грязная форма, проверьте версию редактирования для решения.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню