Primeng: Remove UTC mode from Calendar

[cagataycivici]

This property makes the calendar 2x complex, almost everything has to be coded again for UTC. Instead provide a demo to show how to work with UTC and potentially any time zone.

[Menecats]

The #5823 simplifies the code, you don't have to code twice because it access automatically to the UTC and non-UTC methods by using the utc flag.

Eg:

doSomething(): void {
    // Before
    const pm = this.utc ? this.date.getUTCHours() > 11 : this.date.getHours() > 11;
    // After
    const pm = this.getHours(this.date) > 11;

    // Before
    this.utc ? this.date.setUTCHours(13) : this.date.setHours(13);
    // After
    this.setHours(this.date, 13);
}

getHours(date: Date): number {
    if (this.utc) {
        return date.getUTCHours();
    }
    return date.getHours();
}

setHours(date: Date, hours: number): Date {
    if (this.utc) {
        date.setUTCHours(hours);
    }
    date.setHours(hours);

    return date
}

[Mysame]

This just completely broke my whole project, great.
You can't just pull functionality like this. An informative line in the console is definitely not enough.

I see no reason why @Menecats PR wasn't accepted. It fixes the concern of "double-logic", and allows us flexibility with timezones.

[kstruyven]

Why the hell would you remove this feature?? Is there at least a work around to have it back in UTC? Our project is UTC time only.

[sgentile]

ugh, same issue here, what happen to the utc flag ???

[ghost]

guys any workarounds for this? it's broken our whole project as well

[ghost]

@cagataycivici

Instead provide a demo to show how to work with UTC and potentially any time zone

Where can we find this demo?

[anaq1]

Broken project here as well... we use the utc flag for correct conversion of date without time part from p-calendar to LocalDate on java server. Now it's not working anymore and we have to face the "day minus one" issue. In our case the timezone has no meaning.

[anaq1]

For everyone having same problems as me, I have created a "dirty" directive to convert selected / inserted date to utc (ignoring time part). It's not very nice, but it's fast to replace utc="true" with a directive even in big project and it works. I think it can be modified to support time part in utc as well.

@Directive({
  selector: '[useUtc]'
})
export class UseUtcDirective {

  constructor(@Host() @Self() private calendar: Calendar) { }

  @HostListener('onSelect', ['$event']) onSelect() {
    this.toUtc();
  }

  @HostListener('onInput', ['$event']) onInput() {
    this.toUtc();
  }

  private toUtc(){
    this.calendar.value = new Date(Date.UTC(this.calendar.value.getFullYear()
      , this.calendar.value.getMonth()
      , this.calendar.value.getDate()
      ,0, 0, 0));
    this.calendar.updateModel(this.calendar.value);
  }
}

To apply replace
<p-calendar utc="true" ...
with
<p-calendar useUtc ...

[kminhtri]

Prime Ng calendar sucks so much to remove utc ... whole project is broken ...

[mahald]

Removing such a core feature is silly. How about to provide a directive in the primeNg lib similar to anaq1 one's, but with time support ?

[MattiJarvinen]

Just came through to check if I could update primeng 5 -> 7 ... apparently I can't this really sucks.

[MattiJarvinen]

Instead provide a demo to show how to work with UTC and potentially any time zone.

This was June 5, 2018... @cagataycivici could you provide that demo now that over 6 months have passed?

[kovax]

Could this be the requested example?

https://stackblitz.com/edit/how-to-handle-utc-date-in-primeng

[fitness23]

For everyone having same problems as me, I have created a "dirty" directive to convert selected / inserted date to utc (ignoring time part). It's not very nice, but it's fast to replace utc="true" with a directive even in big project and it works. I think it can be modified to support time part in utc as well.

@Directive({
  selector: '[useUtc]'
})
export class UseUtcDirective {

  constructor(@Host() @Self() private calendar: Calendar) { }

  @HostListener('onSelect', ['$event']) onSelect() {
    this.toUtc();
  }

  @HostListener('onInput', ['$event']) onInput() {
    this.toUtc();
  }

  private toUtc(){
    this.calendar.value = new Date(Date.UTC(this.calendar.value.getFullYear()
      , this.calendar.value.getMonth()
      , this.calendar.value.getDate()
      ,0, 0, 0));
    this.calendar.updateModel(this.calendar.value);
  }
}

To apply replace
<p-calendar utc="true" ...
with
<p-calendar useUtc ...

Thanks for this. What are we importing as Calendar in the constructor?

[SudhakarSanagar]

Hi,

Below Solution Worked For me.
localToUtc(date: Date): Date {
if(date == null) {
return null;
} else {
return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()));
}
}

[singhamit0002]

Hi @fitness23 Fron where you are including -calendar: Calendar ?

[endymion]

There are dozens and dozens of examples of people who have been confused by this problem with this calendar component. But there doesn't seem to be any clear guidance from the developers who removed the feature. I'm evaluating PringNg for use in a big project and this seems like a really bad sign.

What is the correct way to use the PrimeNG calendar to simply select a date without a time? If I set a default date in the component then I find that the date that the calendar displays is one day off, just like all of the dozens of other people confused by this problem. Selecting a date is the most basic function of a date picker, and I can't understand why this issue isn't mentioned in the documentation for this component? I have wasted hours today investigating how to just make a date picker pick a date. Is the rest of PrimeNg like this too?