ionic-framework - 如何从 ionic-2 日历 onchange() 方法中获取选定日期

Question

我正在使用 ion2 日历。

这是我的html：

 <ion-calendar [(ngModel)]="date"
              (onChange)="onChange($event)"
              [type]="type"
              [format]="'YYYY-MM-DD'">
</ion-calendar>

这是 ts 中的 onchange：

onChange($event) {

      console.log("onchange event called");
      console.log(moment().format('DD-MM-YYYY'));  
    }

这是我的控制台：

onSelect event called
25-06-2018

但无论我选择哪个日期，我总是得到当前的月份和年份。只有日期值在变化。它在控制台中显示所有日期的当前月份和年份。有人可以告诉我如何从 $event 对象中获取 dd-mm-yy 格式的选定日期。

编辑-这就是我得到的console.log($event)

Moment {_isAMomentObject: true, _i: 1530297000000, _isUTC: false, _pf: {…}, _locale: Locale, …}
_d
:
Sat Jun 30 2018 00:00:00 GMT+0530 (India Standard Time) {}
_i
:
1530297000000
_isAMomentObject
:
true
_isUTC
:
false
_isValid
:
true
_locale
:
Locale {_calendar: {…}, _longDateFormat: {…}, _invalidDate: "Invalid date", ordinal: ƒ, _dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, …}
_pf
:
{empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, …}
__proto__
:
Object

它显示正确的点击日期。如果有人能告诉我如何从中提取日期，那就太好了。

Answer 1

$eventofOnChange()是一个矩对象。

你可以这样格式化：$event.format('DD-MM-YYYY')

Answer 2

moment()语句总是生成当前时间，如new Date().

您应该使用类似的语句moment("1995-12-25")或其他各种语句。

有关详细信息，请查看 this moment.js 文档

---

更新

先说结论，

.html（没有改变）

<ion-content padding>
  <ion-calendar [(ngModel)]="date"
  (onChange)="onChange($event)"
  [type]="type"
  [format]="'YYYY-MM-DD'">
</ion-calendar>

.ts

onChange(event) {
  console.log(event.format('DD-MM-YYYY')); // For actual usage.
  console.log(moment(event).format('DD-MM-YYYY')); // the statement you might think about
}

上面的代码给你你想要的。

我想说的是你不应该使用moment()but moment(event)。因为moment()返回具有当前时间的时刻实例，而返回具有时间的时刻实例携带。moment(event)event

Answer 3

似乎 Release Candidate 版本将输出事件更改为 change 而不是 onChange 和 select 而不是 onSelect。尝试使用这个：

<ion-calendar [(ngModel)]="date" (change)="onChange($event)" [格式]="'YYYY-MM-DD'">`

Answer 4

<ion-calendar [(ngModel)]="date" (change)="onChange($event)"  [type]="type" 
   [format]="'YYYY-MM-DD'">
</ion-calendar>
    
date;
type: "string";
onChange(event) {
    console.log(moment(this.date._d).format("YYYY-MM-DD"));
}