如何使用ngmodel在datetimepicker中设置默认日期? [英] How to set default date in datetimepicker with ngmodel?

问题描述

我创建了这个有角度的指令，该指令包装了一个jQuery插件datetimepicker.

如何获取控制器中定义的默认日期以在控件中显示为默认日期?

http://jsfiddle.net/edwardtanguay/ef1o3c95/5

我已经尝试过使用ngModel.$viewValue进行多种变体，但是无法将yyyy-mm-dd文本简单地显示在控件中.

<div ng-controller="mainController">

    <div class="form-group">
        <div class='input-group date' timepicker ng-model="date1">
            <input type='text' class="form-control" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <div>{{date1 | date:'yyyy-MM-dd HH:mm'}}</div>  
    </div>

    <div class="form-group">
        <div class='input-group date' timepicker ng-model="date2">
            <input type='text' class="form-control" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <div>{{date2 | date:'yyyy-MM-dd HH:mm'}}</div>
    </div>

</div>

---

angular.module('myApp', [])
.controller('mainController', function($scope) {
    $scope.date1 = '2015-09-01 00:00';
    $scope.date2 = '2015-09-30 23:59';
})
.directive('timepicker', [

  function() {
    var link;
    link = function(scope, element, attr, ngModel) {
        console.log(ngModel);
        element = $(element);
        element.datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            defaultDate: ngModel.$viewValue
        });
        element.on('dp.change', function(event) {
            scope.$apply(function() {
                ngModel.$setViewValue(event.date._d);
            });
        });
    };

    return {
      restrict: 'A',
      link: link,
      require: 'ngModel'
    };
  }
])

解决方案

我认为您可以在此处使用isolated scope指令，并将ngModel指令值公开给timepicker指令范围，如下所示.

return {
  restrict: 'A',
  scope: {
    date: '=ngModel'
  },
  link: link
};

---

element.datetimepicker({
   format: 'YYYY-MM-DD HH:mm',
   defaultDate: scope.date
});

在这里，每个指令实例都具有唯一的scope，并且该范围将ngModel指令值共享为scope.date.不需要require属性.

这是 DEMO

这是指令 DOC ，有关详细信息，请参见Isolating the Scope of a Directive部分.

这是一个很好的文章.

---

请注意，您也可以像下面那样使用共享作用域指令.

element.datetimepicker({
   format: 'YYYY-MM-DD HH:mm',
   defaultDate: scope[attr.ngModel]
});

这是 DEMO

I've created this angular directive that wraps a jQuery plugin datetimepicker.

How can I get the default dates defined in the controller to display as the default date in the controls?

http://jsfiddle.net/edwardtanguay/ef1o3c95/5

I've tried a number of variations with ngModel.$viewValue but can't get the yyyy-mm-dd text to simply display in the control.

<div ng-controller="mainController">

    <div class="form-group">
        <div class='input-group date' timepicker ng-model="date1">
            <input type='text' class="form-control" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <div>{{date1 | date:'yyyy-MM-dd HH:mm'}}</div>  
    </div>

    <div class="form-group">
        <div class='input-group date' timepicker ng-model="date2">
            <input type='text' class="form-control" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <div>{{date2 | date:'yyyy-MM-dd HH:mm'}}</div>
    </div>

</div>

---

angular.module('myApp', [])
.controller('mainController', function($scope) {
    $scope.date1 = '2015-09-01 00:00';
    $scope.date2 = '2015-09-30 23:59';
})
.directive('timepicker', [

  function() {
    var link;
    link = function(scope, element, attr, ngModel) {
        console.log(ngModel);
        element = $(element);
        element.datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            defaultDate: ngModel.$viewValue
        });
        element.on('dp.change', function(event) {
            scope.$apply(function() {
                ngModel.$setViewValue(event.date._d);
            });
        });
    };

    return {
      restrict: 'A',
      link: link,
      require: 'ngModel'
    };
  }
])

解决方案

I think you can use isolated scope directive here, and expose the ngModel directive value to the timepicker directive scope as below.

return {
  restrict: 'A',
  scope: {
    date: '=ngModel'
  },
  link: link
};

---

element.datetimepicker({
   format: 'YYYY-MM-DD HH:mm',
   defaultDate: scope.date
});

here each and every directive instance it has unique scope and that scope is sharing the ngModel directive value as scope.date. and no need of require property.

here is the DEMO

here is the Directive DOC and see the Isolating the Scope of a Directive section for more info.

here is a good article.

---

And note that you can also use the shared scope directive as like your one as below.

element.datetimepicker({
   format: 'YYYY-MM-DD HH:mm',
   defaultDate: scope[attr.ngModel]
});

here is the DEMO

这篇关于如何使用ngmodel在datetimepicker中设置默认日期?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！