【问题标题】:Initializing the date on a datetimepicker via the model通过模型在 datetimepicker 上初始化日期
【发布时间】:2015-03-10 19:05:53
【问题描述】:

我正在尝试使用角度日期时间选择器。问题是我正在从模型中加载数据,选择器似乎没有绑定值。

如果我只是手动将值设置为日期,它可以工作,但是当它从模型加载时,它不会将选择器设置为正确的值。

http://plnkr.co/edit/eeTQFo5jz4RYN6nSYxdZ?p=preview

我正在使用http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js datetimepicker 进行角度分析。

角度:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.date = '01/02/1983 01:02:03';
});


app.directive('datetimez', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
          element.datetimepicker({
            dateFormat:'dd/MM/yyyy',
            timeFormat: 'hh:mm:ss',
          }).on('changeDate', function(e) {
            ngModelCtrl.$setViewValue(e.date);
            scope.$apply();
          });
        }
    };
});

HTML:

<div class="container container-fluid" ng-controller="MainCtrl">
  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="dd/MM/yyyy hh:mm:ss" type="text" ng-value="date"></input>
      <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
    </div>
  </div>

【问题讨论】:

    标签: javascript angularjs angularjs-directive


    【解决方案1】:

    这是因为您使用的是字符串而不是日期对象:

    app.controller('MainCtrl', function($scope) {
      var date = new Date(1983, 1, 2, 1, 2);
      $scope.date = date;
    });
    

    http://plnkr.co/edit/5kzPOkOSKn2IVGh6w2R9?p=preview

    I recommend going with MomentJS for shorthand.

    【讨论】:

    • 那行不通。 plunker仍然坏了。此外,当我将值作为字符串直接传递给值标签时,它可以工作(意思是当它没有从模型中拉出它时)。我已经更新了 plunker 以显示字符串是如何直接工作的。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-03-30
    • 1970-01-01
    • 1970-01-01
    • 2021-07-19
    • 2019-11-02
    • 2017-10-23
    相关资源
    最近更新 更多