1

I am using ion2-calendar.

this is my html:

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

and this is onchange in ts:

onChange($event) {

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

This is my console:

onSelect event called
25-06-2018

But i am always getting current month and year,no matter which date I choose. Only the date value is changing. Its showing current month and year in the console for all dates. Can someone tell me how to get selected date in dd-mm-yy format from $event object.

Edit- This is what i get for console.log($event)

enter image description here

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

It shows correct date of click. It would be great if someone could tell me how to extract date from this .

Nabil Mohammed Nalakath
  • 829
  • 12
  • 24

4 Answers4

4

$event of OnChange() is a moment object.

you can format like this: $event.format('DD-MM-YYYY')

Berk Akkerman
  • 483
  • 1
  • 3
  • 12
2

moment() statement always generates current time like new Date().

you should use a statement like moment("1995-12-25") or other various statements.

For details, please have a look at this moment.js docs

update

To say the conclusion first,

.html (nothing changed)

<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
}

the above code gives you what you want.

What I want to say is that you should not use moment() but moment(event). Because moment() returns moment instance which has current time while moment(event) returns moment instance which has the time event carries.

Hyuck Kang
  • 1,671
  • 2
  • 16
  • 24
  • I dont understand how is your answer related to my onchange method of calendar. I need to access the date that is selected. I don't know how to do that and that is my question. – Nabil Mohammed Nalakath Jun 25 '18 at 12:31
  • 1
    I think its still not quite correct? `event` already is a moment object. Can you pass it again into `moment` function? – Suraj Rao Jun 25 '18 at 14:49
  • @SurajRao, you are right. Actually, we don't need to **pass moment to moment** again. For my thought, the reason @Nabil could not debug by himself is caused from misunderstanding about usage of `moment()`. So, I just wanna point out that. And event can change its own types up to `[type]`, I might add. I will modify my anwser clearly upon your adivce. – Hyuck Kang Jun 25 '18 at 15:05
1

It seems like the Release Candidate version changed the output event to change instead of onChange and select instead of onSelect. Try using this:

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

Juan Felipe Delgado
  • 11
  • 1
-2
<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"));
}
Bhadraji Banoth
  • 1