Ionic-framework: feat: decoupling datetime picker from ion-datetime input

[kerosin]

Feature Request

Ionic version:
[x] 4.x

Describe the Feature Request
Currently it is only possible to use a datetime picker with a ion-datetime input field. The generation of a datetime picker is binded to this component.

This feature request is about decoupling the logic from the ion-datetime component and move it to a separate controller, e.g. ion-datetime-picker-controller.

This would make it possible to open a datetime picker without a input element (currently only possible with a hidden DOM element). Another benefit of pulling out logic from this component is its size (~670 locs).

Describe Preferred Solution

• a new controller which can create datetime picker instances

Describe Alternatives

• alternatively expose methods to create datetime picker cleverly from ion-datetime input component

Related Code
pseudo code

const dateTimeController = document.querySelector('ion-datetime-picker-controller');
const picker = await dateTimeController.create({
value: new Date(),
buttons: [
  {
    text: 'Cancel',
    role: 'cancel'
  },
  {
    text: 'Confirm',
    handler: (value) => {
      console.log(`Got Value ${value}`);
    }
  }
]
});
await picker.present();

Additional Context

[roman-rr]

@kerosin
You can create ion-picker and fill it with dates. Isn't fit to your needs?

[kerosin]

@roman-rr
It is not about dates but about datetimes.
The current ion-datetime offers slots on the picker for days, months, years, hours, minutes, seconds, ampm etc depending on configuration.

[roman-rr]

@kerosin
Check multi-column picker https://ionicframework.com/docs/api/picker
You can create slots with columns

[kerosin]

Yep, this is internally already done on the ion-datetime component, see here

This feature request is more about refactoring/exposing stuff that is already there to enable
generating datetime pickers (without a input field).

[liamdebeasi]

You are referring to being able to use ion-datetime inline like this, correct?

[kerosin]

hm not necessary inline in a fieldset, but as picker/popup.

Imagine a alert dialog and after the user confirms this dialog a picker opens up to enter a datetime.

[roman-rr]

@kerosin i did solve it on this way:

Template

<ion-datetime #datetimePicker class="ion-hide" (ionChange)="writeValue($event.detail.value)"></ion-datetime>

TS

@ViewChild('datetimePicker', { read: ElementRef, static: false}) private pickerDate: ElementRef;
constructor() {}

openPicker() {
      this.pickerDate.nativeElement.click();
}

writeValue(value: any) { 
      console.log('Picked', value);
}

In other words - you click to hidden <ion-datetime> for call datepicker dialog.

[corysmc]

You can also hide the ion-datetime by adding a hidden attribute, then open it with:

document.querySelector('ion-datetime').open()

https://ionicframework.com/docs/api/datetime#methods

[nicobytes]

I think this issue is related: https://github.com/ionic-team/ionic-docs/issues/711

[nicobytes]

Hello!

It would be great use ion-picker like a component. Like this:

[indraraj26]

when are we getting this?