日期时间范围指令字段未显示任何值

Question

我在 AngularJS 中创建了一个日期时间范围指令。我正在使用 dangrossman/bootstrap-daterangepicker 插件来获取日期时间范围日历。该指令工作正常，模型值正在更改，但视图未更新。

      element.data('daterangepicker').setStartDate(val.start); 
      element.data('daterangepicker').setEndDate(val.end);

谁能告诉我一些解决方案。

我创建的指令如下

Plunker

脚本

app.directive('dateTimePicker', function($parse, $compile) {
  return {
    restrict: "E",
    replace: true,
    transclude: false,
    compile: function(element, attrs) {
      var modelAccessor = $parse(attrs.ngModel);

      var html = "<form>" +
        "<div class='form-group'>" +
        "<div class='input-group'>" +
        "<span class='input-group-addon'>" +
        "<i class='fa fa-calendar'></i>" +
        "</span>" +
        "<input type='text' name='reservation' id='reservationtime' class='form-control' value=''/>" +
        "</div>" +
        "</div>" +
        "</form>";

      var newElem = $(html); 

      element.replaceWith(newElem); 

      return function(scope, element, attrs, controller) {

        element.on('apply.daterangepicker', function(ev, picker) 
        {
          var date = {};

          date.start = picker.startDate;
          date.end = picker.endDate;
          scope.$apply(function (scope) {
              modelAccessor.assign(scope, date); 
           });
        });  

        element.daterangepicker({
          timePicker: true,
          timePickerIncrement: 30,
          format: 'MM/DD/YYYY h:mm A'
        });

        scope.$watch(modelAccessor, function(val) 
        {
          console.log(val);
          if(!_.isUndefined(val))
          {
            element.data('daterangepicker').setStartDate(val.start); 
            element.data('daterangepicker').setEndDate(val.end); 
          }
        });  

      };

    }
  };
});

html

  <date-time-picker ng-model="dateTimeRange"></date-time-picker>

Answer 1

updateInputText: function() {
            if (this.element.is('input') && !this.singleDatePicker) {
                this.element.val(this.startDate.format(this.format) + this.separator + this.endDate.format(this.format));
            } else if (this.element.is('input')) {
                this.element.val(this.endDate.format(this.format));
            }
        }

来自 daterangepicker.js 的这段代码片段负责更新视图。

在 dateTimePicker 指令中，模板的根元素，即表单元素使用 element.daterangepicker 转换为 daterange 小部件，其中应转换模板内的输入元素。

element.find('input').daterangepicker({}) 对我有用。

日期时间范围指令字段未显示任何值

Date-Time-Range directive field is not showing any values

javascript

datetimepicker

twitter-bootstrap

angularjs

angular-directive