无法在日历日期更改时更新模型

Question

我遇到了 angular ui bootstrap 日期选择器弹出窗口 (https://angular-ui.github.io/bootstrap/) 的问题，我无法更新我的模型。

我有 2 个不同的日历 - 一个有弹出窗口，一个没有（uib-datepicker-popup 和 uib-datepicker）在我的一个 angular组件。

这是我的代码：

function headerCtrl () {
  const self = this;

  self.$onInit = () => {

  self.dateOptions = {
    showWeeks: false,
    formatYear: 'yyyy',
    startingDay: 1
  };

  self.today = function() {
    self.calendar_date2 = new Date();
  };

  self.today();

  self.clear = function() {
    self.calendar_date2 = null;
  };

  self.inlineOptions = {
    customClass: getDayClass,
    minDate: new Date(),
    showWeeks: true
  };

  self.toggleMin = function() {
    self.inlineOptions.minDate = self.inlineOptions.minDate ? null : new Date();
    self.dateOptions.minDate = self.inlineOptions.minDate;
  };

  self.toggleMin();

  self.open = function() {
    self.popup.opened = true;
  };

  self.setDate = function(year, month, day) {
    self.calendar_date2 = new Date(year, month, day);
  };

  self.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  self.format = self.formats[0];
  self.altInputFormats = ['M!/d!/yyyy'];

  self.popup = {
    opened: false
  };

  var tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);

  var afterTomorrow = new Date();
  afterTomorrow.setDate(tomorrow.getDate() + 1);

  self.events = [
    {
      date: tomorrow,
      status: 'full'
    },
    {
      date: afterTomorrow,
      status: 'partially'
    }
  ];

   function getDayClass(data) {
    var date = data.date,
        mode = data.mode;
    if (mode === 'day') {
      var dayToCheck = new Date(date).setHours(0,0,0,0);

      for (var i = 0; i < self.events.length; i++) {
        var currentDay = new Date(self.events[i].date).setHours(0,0,0,0);

        if (dayToCheck === currentDay) {
          return self.events[i].status;
        }
      }
    }
  }

  self.changeCalendarDate = () => {
    console.log('changeCalendarDate');
    console.log(self.calendar_date);
  };

  self.changeCalendarDate2 = () => {
    console.log('changeCalendarDate2');
    console.log(self.calendar_date2);
  };
}}

export default {
  bindings: {
    duration: "<",
    zoom: "<",
    selection: "<",
    selections: "<",
    calendar_date: "<",
    onDurationChange: "&",
    onCalendarDateChange: "&",
    onHeatmapSelectionChange: "&"
  },
  controller: headerCtrl,
  template: `
  <div class="pp-header-container">
    <div uib-datepicker 
         ng-model="$ctrl.calendar_date" 
         datepicker-options="$ctrl.dateOptions" 
         class="heatmap-header pp-sch-header-item"
         ng-change="$ctrl.changeCalendarDate()"></div>

         <div class="pp-header-calendar">
    <input type="text" 
           uib-datepicker-popup="{{$ctrl.format}}" 
           ng-model="$ctrl.calendar_date2" 
           is-open="$ctrl.popup.opened" 
           datepicker-options="$ctrl.dateOptions" 
           ng-required="true" 
           close-text="Close" 
           alt-input-formats="$ctrl.altInputFormats" 
           maxlength="10" 
           size="10" 
           ng-change="$ctrl.changeCalendarDate2()" />
        <button type="button" class="btn btn-default" ng-click="$ctrl.open()"><i class="glyphicon glyphicon-calendar"></i></button>
      </div>
  </div>`
}

http://prnt.sc/esq9c9

左边的日历 (uib-datepicker) 工作，只要我选择一个日期，它就会触发 changeCalendarDate() 并打印所选日期 (console.log(self.calendar_date);)

现在我想做的是更改日历，因为我想要带有弹出窗口（uib-datepicker-popup）的日历，它会触发 changeCalendarDate2() 但是当我打印值时（console.log(self.calendar_date2);) 未定义。

我确定我需要以不同的方式获取该值，但我不知道如何获取。

有人能帮忙吗？

谢谢:)

Answer 1

我已经解决了这个问题:D

问题是这样的

uib-datepicker-popup="{{$ctrl.format}}"

一旦我删除了分配给你的值并只留下

uib-datepicker-popup

它起作用了。我不知道为什么，但我现在更快乐了:)

无法在日历日期更改时更新模型

Unable to update model on calendar date change

angular-ui-bootstrap

uidatepicker

angular-components