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将模板的根元素（即form元素）转换为daterange小部件，其中模板内的输入元素应该被转换。

element.find('input').daterangepicker({})为我工作。

Date-Time-Range指令字段未显示任何值

1 个答案: