Commit b6cd5641 authored by Marcelo Rivera's avatar Marcelo Rivera

(fix): timezones issues with dates

1 merge request!387WIP: Boost Campaigns (&24)
Pipeline #71739094 passed with stages
in 28 minutes and 47 seconds
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { DatePipe } from '@angular/common';
import { default as DateTimePicker } from 'material-datetime-picker';
import * as moment from "moment";
@Directive({
selector: '[mdl-datetime-picker]',
providers: [ DatePipe ]
})
export class MaterialDateTimePickerDirective {
@Input() date;
@Input() dateFormat: string = 'MM/DD/YY, h:mm';
@Input() useUTC: boolean = false;
@Output() dateChange: EventEmitter<any> = new EventEmitter<any>();
private open: boolean = false;
private picker;
constructor(public datePipe: DatePipe) { }
readonly DEFAULT_FORMAT = 'MM/DD/YY, h:mm';
@HostListener('click')
@HostListener('keydown.enter')
......@@ -27,7 +28,20 @@ export class MaterialDateTimePickerDirective {
}
private submitCallback(value) {
this.dateChange.emit(this.datePipe.transform(value.format(), 'short'));
let formatted;
if (this.useUTC) {
// get date without timezone
const noTimezone = value.format(this.DEFAULT_FORMAT);
// create a new UTC moment with the noTimezone date
const withTimezone = moment.utc(noTimezone, this.DEFAULT_FORMAT);
// get UTC date
formatted = withTimezone.format(this.dateFormat);
} else {
formatted = value.format(this.dateFormat);
}
this.dateChange.emit(formatted);
this.close();
}
......
......@@ -134,10 +134,11 @@
<div
class="m-date-selector--input"
mdl-datetime-picker
[dateFormat]="'MM/DD/YY, h:mm a Z'" [useUTC]="true"
[date]="campaign.start"
(dateChange)="onStartDateChange($event); triggerPreview()"
>
<input id="boost-creator__start" type="text" placeholder="Now" i18n [value]="campaign.start | date:'MMM dd'" readonly>
<input id="boost-creator__start" type="text" placeholder="Now" i18n [value]="campaign.start | utcDate | date:'MMM dd'" readonly>
<i class="material-icons">keyboard_arrow_down</i>
</div>
</div>
......@@ -153,7 +154,7 @@
mdl-datetime-picker [date]="campaign.end"
(dateChange)="onEndDateChange($event); triggerPreview()"
>
<input id="boost-creator__end" type="text" placeholder="End of times" i18n [value]="campaign.end | date:'MMM dd'" readonly>
<input id="boost-creator__end" type="text" placeholder="End of times" i18n [value]="campaign.end | utcDate | date:'MMM dd'" readonly>
<i class="material-icons">keyboard_arrow_down</i>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment