I would like to display the ion-datetime picker with suffixes, like this:
19.12.19 14:39
Using pickerFormat
obviously does swallows the separators (the dot as well as the colon), when defined like this:
D.M.YY HH:mm
This documentation [1] shows a way to add suffixes to ion-picker
. However, I will not build my own datetime-picker from the bottom up just to get suffixes.
So … in my current code, I tried to use the pickerOptions
attribute, hoping to be able to set some suffixes, but no joy. Part of the problem is the mandatory name
attribute of a PickerColumn
, I guess.
bla.html
<ion-datetime
placeholder="Select a date"
displayFormat="D.M.YYYY HH:mm"
pickerFormat="D.M.YY HH:mm"
formControlName="taskStartAt"
[pickerOptions]="pickerOptions"
(ionChange)="onTaskStartAtChanged($event)"
[min]="taskService.taskStartMin"
[max]="taskService.taskStartMax"
></ion-datetime>
bla.ts
pickerOptions = {
animated: false,
columns: [
{
suffix: '.',
},
{
suffix: '.',
},
{
suffix: '.',
},
{
suffix: '.',
},
{
suffix: '.',
},
{
suffix: '.',
},
],
};
Idea: add the attribute to ion-datetime to keep the separators and show them in non-selectable columns.
pickerFormatKeepSeparator="true"
[1] https://www.learmoreseekmore.com/2020/01/ionic-picker-sample-code-in-angular.html