CODEWITHSUNDEEP
ionic-frameworkionic3datetimepicker
Missak Boyajian
Missak Boyajian

Reputation: 2245

Ionic Datetime picker timezone issue

I have this date getting from an API Call in a JSON Format: CreatedOn : 2018-08-27T05:11:29.000Z

When I open the form, I am setting the datetime picker to that field.

 <ion-datetime displayFormat="MMM DD YYYY h:mm A" pickerFormat="MMM DD YYYY h:mm A"
                 [(ngModel)]="Task.CreatedOn"></ion-datetime>

Getting here Aug 27 2018 5:11 AM which is wrong

I am also showing the same date with angular.

<h6>{{Task.CreatedOn | date : 'MMMM d,yyyy At hh:mma' }}</h6>

Getting here August 27,2018 At 08:11AM Which is right.

I think there is a timezone issue with the datetime picker when I am setting it. How can I solve this issue?

Upvotes: 0

Views: 1584

Answers (1)

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9774

You can use Angular formatToLocal pipe which will internally convert using moment.

<ion-datetime 
  displayFormat="MMM DD YYYY h:mm A" 
  pickerFormat="MMM DD YYYY h:mm A" 
  [ngModel]="Task.CreatedOn | formatToLocal" 
  (ngModelChange)="Task.CreatedOn=$event">
</ion-datetime>

PIPE:

import {Pipe, PipeTransform} from '@angular/core'
import moment from 'moment';
@Pipe({ name: 'formatToLocal'})
export class FormatToLocal implements PipeTransform{
  transform(val) {
    if(val){
    return moment(val).format();  
    }
  } 
}

Upvotes: 1

Related Questions