Support UTC mode for datepicker

Bug, feature request, or proposal:

feature request

What is the expected behavior?

having docs and examples

What is the current behavior?

not having docs and examples

What are the steps to reproduce?

look here : https://github.com/angular/material2/blob/master/src/lib/datepicker/datepicker.md and here : https://material.angular.io/components/datepicker/api

fail to find out how to implement a mat datepicker input that doesn’t localize dates.

What is the use-case or motivation for changing an existing behavior?

my end-user wishes to save universal dates to his ERP and have those be loaded into this client without localization as this would mess with the shipment calculations.

NOTE : end-user DOES however wish for internationalized currency and date formats. So I do have global internationalization set up in my modules but within my specific form component I wish to stop the datepicker’s current behavior of messing with the date that the user picks : right now with FR i18n, when I pick

then hit “send” my Typsescript function is set to grab the datepickers value and send it to the JAVA backend.

In my chrome code inspector, I can see that the API call has : 2018-11-24T23:00:00.000Z

that’s one day earlier. how do I end this once and for all?

I tried this in the component :

import { MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';

@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.scss'],
  animations: [slideLeftAnimation],
  providers: [
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
  ]
})
export class DetailsComponent implements AfterContentInit, OnDestroy {

  @ViewChild(MatDatepicker) datepicker: MatDatepicker<Date>;

but that did nothing, then I tried this :

import { MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
import { MatDatepicker } from '@angular/material';

@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.scss'],
  animations: [slideLeftAnimation],
  providers: [
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
  ]
})
export class DetailsComponent implements AfterContentInit, OnDestroy {

  @ViewChild(MatDatepicker) datepicker: MatDatepicker<Date>;

but I got this : (“can’t assign date to matDatePicker”, basically)

So I deduced a setter function of some sort must have been implemented, not being auto-suggested any by my IDE, I decided to head on over to the datepicker documentation which feature no setter function.

I’m stuck.

[jelbourn]

@mmalerba is there a way to make the datepicker always in UTC today?

[chipicow]

@mmalerba adding the providers in your stackblitz was a life savior thanks! to edit the date format to ‘dd/mm/yyyy’ I added to the providers {provide: MAT_DATE_LOCALE, useValue:‘en-GB’}