(fix): timezones issues with dates

src/app/common/directives/material/datetimepicker.directive.ts

 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();
  }
 

src/app/modules/boost/campaigns/creator/creator.component.html

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