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

【问题标题】：Unable to update model on calendar date change无法在日历日期更改时更新模型
【发布时间】：2017-04-05 12:53:44
【问题描述】：

我遇到了 angular ui bootstrap datepicker popup (https://angular-ui.github.io/bootstrap/) 的问题，我无法更新我的模型。

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

这是我的代码：

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) ;) 它是未定义的。

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

谁能帮忙？

谢谢:)

【问题讨论】：

标签： angular-ui-bootstrap uidatepicker angular-components

【解决方案1】：

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

问题是这样的

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

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

uib-datepicker-popup

成功了。我不知道为什么，但我现在更开心了:)

【讨论】：