ng-matero / extensions

Angular Material Extensions Library.
https://ng-matero.github.io/extensions/
MIT License
393 stars 48 forks source link

DateTimePicker format UTC #96

Closed palmtreefrb closed 1 year ago

palmtreefrb commented 2 years ago

I need to format the datetimepicker timezone to UTC. Normally with one way binding [ngModel] I would just use a pipe but I am using two way binding [(ngModel)] so I can't use pipe. Is there another way I can display the date format to UTC?

<mat-form-field>
  <input matInput [mtxDatetimepicker]="datetimePickerStart" [(ngModel)]="element[col.name]  | date:'yyyy-MM-dd HH:mm' :'UTC'">
    <mtx-datetimepicker-toggle matSuffix [for]="datetimePickerStart"></mtx-datetimepicker-toggle>
    <mtx-datetimepicker #datetimePickerStart
                        [type]="type"
                        [mode]="mode"
                        [multiYearSelector]="multiYearSelector"
                        [startView]="startView"
                        [twelvehour]="twelvehour"
                        [timeInterval]="timeInterval"
                        [touchUi]="touchUi"></mtx-datetimepicker>
</mat-form-field>
nzbin commented 2 years ago

You can provide the MAT_MOMENT_DATE_ADAPTER_OPTIONS in your material.module.ts (checkout ng-matero config).

@NgModule({
  providers: [
    {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: {useUtc: true}}
  ]
})
palmtreefrb commented 2 years ago

Great, thanks...

palmtreefrb commented 2 years ago

So how would the above be implemented to show local time in mtx-grid? With no column type the below times are still showing gmt time.

Screenshot from 2022-03-25 08-30-06

If I change the column type to date, it will not display anything...

{
  header: 'Temp Target',
  field: 'temperatureTarget',
  minWidth: 100,
},
{
  header: 'Start Time',
  field: 'startTime',
  minWidth: 100,
  type: 'date'
},
{
  header: 'End Time',
  field: 'endTime',
  minWidth: 100,
  type: 'date'
}

Screenshot from 2022-03-25 08-31-11

palmtreefrb commented 2 years ago

I am confused as to what date adapter should be used. In material.module.ts there is MAT_DATE_FORMATS and in material-extensions.module.ts there is MTX_DATETIME_FORMATS Adding to this confusion, what formatting is being used in mtx-grid?

typeParameter: {
  format: 'yyyy-MM-dd h:m a',
},

The above format in moment should produce a lowercase "am/pm" but the display is uppercase 2022-03-25 12:15 AM

nzbin commented 2 years ago

Yes, they are different. In mtx-grid, it's formatted with Angular DatePipe.