Ngx-bootstrap: feat(datepicker): add possibility of using fixed datepicker zone (UTC)

[coffeymatt]

Bug description or feature request:

Usage query:

I've got an application where people in different timezones need to see a particular date in a form regardless of timezone (as they are dates for travel so could be any country).

However when the picker renders the date, it understandably converts it to the users local timezone, but in this case, isn't the behaviour I want.

Is there some way to prevent the picker doing the local conversion, or forcing it to a fixed timezone?

(I am setting this: this.datePickerConfig.dateInputFormat = 'DD MMM YYYY', in case that makes a difference).

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 2.0.0-rc0

Angular: 5

Bootstrap: 3

Build system: Angular CLI, System.js, webpack, starter seed:

CLI

[valorkin]

you mean UTC dates?

[valorkin]

OR some particular timezone, like destination timezone

[coffeymatt]

A UTC mode would do the trick, where the date you select and display is UTC (with the time behind it as UTC midnight). Or some other way, so long as the end behaviour was that all users see the same date regardless of timezone.

Another example is a form I've got where you put you date of birth, but if I put my PC's timezone back 12hrs, and reload that form, it shows up as the day before.

[dottodot]

Will this change include setting the time to 00:00:00?

[mikeddol]

Anyone working on this? Or does anyone have a workaround?
I need to display UTC in the view..

[coffeymatt]

I don't have a good work around, I'm using functions to mess with dates in and out of saving them back to the server but it's messy and I still have issue's. Really hoping for this feature soon.

[beppe1992]

Hi,
this not work?

import { defineLocale } from 'ngx-bootstrap/bs-moment';
import { de } from 'ngx-bootstrap/locale';
defineLocale('de', de);

constructor(private _localeService: BsLocaleService) {
  }

ngOnInit(){
   this._localeService.use(this.locale);
}

[coffeymatt]

No, because that's simply formatting, and not making the picker user timezone independent.

[Wesley-Brooks]

For anyone looking for a work around still:

  // In constructor or response to webservice request, 
  // init with an ISO string(or however you want) and set hours with UTC.
  this.startDate = new Date("2018-05-09T03:00:00.000Z");
  this.startTime = new Date("2018-05-09T03:00:00.000Z");

  this.startTime.setHours(this.startTime.getUTCHours(),this.startTime.getUTCMinutes(),this.startTime.getUTCSeconds(),this.endTime.getUTCMilliseconds()));


  // In handler for accepting date after user modifications
  this.startDate.setUTCHours(this.startTime.getHours(), this.startTime.getMinutes(), this.startTime.getSeconds(), this.startTime.getMilliseconds());

  console.log(this.startDate.toISOString());

  // HTML 
  <label>Start
    <input type="text" class="form-control" #dps="bsDatepicker" [bsValue]="startDate" bsDatepicker [bsConfig]="{containerClass:'theme-default'}">
  </label>
  <timepicker [(ngModel)]="startTime" [hourStep]="1" [minuteStep]="1" [secondsStep]="1" [showMinutes]="true" [showSeconds]="true"></timepicker>

[coffeymatt]

Don't suppose there's any update on this one?

One thing I'd like to ammend/add to this request, by apart from UTC date selection, if it could also have an option to omit time (i.e. always set to midnight) rather than the users time.

Edit: Or in fact what might be more flexible is if it could take a fixed time as an input.

[imben1109]

https://medium.com/self-learning/ngx-datepicker-utc-datepicker-design-77e33789e9d7

I have tried a UTC Datepicker which is a wrapper to original datepicker. The wrapper try to convert the input with a timezone offset procession.

import { Component, OnInit, forwardRef, ChangeDetectorRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

@Component({
  selector: 'app-utc-datepicker',
  templateUrl: './utc-datepicker.component.html',
  styleUrls: ['./utc-datepicker.component.css'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => UtcDatepickerComponent),
    multi: true
  }]
})
export class UtcDatepickerComponent implements OnInit, ControlValueAccessor{

  value: any;

  constructor() { }

  onChange: (value: any) => void;

  ngOnInit() {
  }

  bsValueChange(val){
    setTimeout(()=>{
      this.value = val;
      if (val instanceof Date){
        this.onChange(new Date(val.getTime() - val.getTimezoneOffset() * 60 * 1000));  
      }else {
        this.onChange(val);
      }
    });
  }

  writeValue(val: any): void {
    if (val){
      if (val instanceof Date){
        this.value = new Date(val.getTime() + val.getTimezoneOffset() * 60 * 1000);
      }else {
        this.value = val;
      }
    }
  }

  registerOnChange(fn: (value: any) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
  }


}

Remark for this solution
All time input should be converted to a time with a specific processing of timezone offset such as min day, max day handling.

[Hojekunle]

This is an issue we have to live with for now but below is how i handle it.
Below function processes the timezone offset upon loading the record from db and you need to also use same when saving the record (or on date change event). Effect is saving and displaying the "Date chosen" by the user and not "Date chosen minus 1 day".

const dd = new Date(this.userEditForm.controls['dateOfDeployment'].value);
dd.setHours(dd.getHours() - dd.getTimezoneOffset() / 60);
this.userEditForm.patchValue({
dateOfDeployment: dd
});

[Domainv]

Closed as duplicate of #3609

[poonampardeshi-angular]

For anyone looking for a work around still:

  // In constructor or response to webservice request, 
  // init with an ISO string(or however you want) and set hours with UTC.
  this.startDate = new Date("2018-05-09T03:00:00.000Z");
  this.startTime = new Date("2018-05-09T03:00:00.000Z");

  this.startTime.setHours(this.startTime.getUTCHours(),this.startTime.getUTCMinutes(),this.startTime.getUTCSeconds(),this.endTime.getUTCMilliseconds()));


  // In handler for accepting date after user modifications
  this.startDate.setUTCHours(this.startTime.getHours(), this.startTime.getMinutes(), this.startTime.getSeconds(), this.startTime.getMilliseconds());

  console.log(this.startDate.toISOString());

  // HTML 
  <label>Start
    <input type="text" class="form-control" #dps="bsDatepicker" [bsValue]="startDate" bsDatepicker [bsConfig]="{containerClass:'theme-default'}">
  </label>
  <timepicker [(ngModel)]="startTime" [hourStep]="1" [minuteStep]="1" [secondsStep]="1" [showMinutes]="true" [showSeconds]="true"></timepicker>

setUTCHours() solved my issue, thanks