feat: ion-datetime: default value when opened

[ctfrancia]

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

when opening the ion-datetime component there is no directive available to set a default date when opened. Currently, you can set a value but that's not expected. I have a section in a registration that has the birthday selection that is not required (not my decision to make it optional). Anyways, the powers that be don't like how when the datetime component is opened the default date is today. And since it is February and there are not 31 days in the month the powers that be wish that we default the month to January x year where they would be 18+.

Describe Preferred Solution

<ion-datetime defaultDateWhenOpened="01-01-1990"></ion-datetime>

Describe Alternatives

Related Code

Additional Context

[jakubnovak998]

I don't understand why you can't use value directive. Could you explain more ?

[ctfrancia]

because value directive sets a value. Which in a form is not the desired outcome. birthdate is an option field in registration. <ion-datetime value="01-01-2020" formControlName="birthdate"></ion-datetime> then:

public submit(): void {
  console.log(`the birthday form value is: ${this.registrationForm.value.birthdate}`); // "01-01-2020"
}

so as you can see I am submitting an optional value and therefore have to have an if statement incorporated to check if the value is set to the default and then handle it accordingly, where: <ion-datetime defaultValue="01-01-2020"> will provide a placeholder like directive

[188599]

This would also be really helpful for us in our project.

[tetsuwanadam]

I would also find this feature helpful. There are times I want the date or time picker to default to a certain value but don't want to actually set the value until the user has done so.

It's possible to use the reset method to do this but it's a little complicated and error-prone running reset on ion-datetime called via a modal or popup. Here's the Ionic Vue code it's taken to accomplish it while avoiding errors with ion-datetime not yet being initialized.

<ion-popover @willPresent="initTimePicker" trigger="time_label" keep-contents-mounted>
    <ion-datetime v-model="formData.dueTime" presentation="time" show-default-buttons ref="timePickerEl"></ion-datetime>
</ion-popover>

const initTimePicker = async function() {
    // If due time isn't set then set time picker's default value
    if (!formData.value.dueTime) {
        // Make sure time picker has been initialized first to avoid errors
        const intervalTime = 10;
        for (let elapsedTime = 0; elapsedTime < 100; elapsedTime += intervalTime) {
            if (timePickerEl.value) {
                timePickerEl.value.$el.reset('12:00');
                break;
            }
            await sleep(intervalTime);
        }
    }
}

[Webrow]

Since this one is open. Ill just react to this one. There has been multiple tickets like this one (and Ive been running into the issue since ionic 3 as well).

In iur case for example we want to copy a certain day to other dates.

Usecase. It is end of may now, we go in the calendar to june, and open the datetime component. Opening the component will not open it on june, unless I set the value to June, But setting a value, makes it marked as well in the calendar (and we dont want it marked, we just want to start the calendar from a point that is friendly to the user).

We use Angular, ionic 7. Am I missing something from the docs in this case? An attribute like "render-date" should go a long way.

[davidgeary]

Another vote for this. In my case, I'd just like to be able to set the default time value to midnight.

As with the others commenting here, this is optional in my use-case, so for most people not wanting to specify a time, having it default to the current time means they have to manually select '00:00' after they've selected their date. (Even users who want to include a time are unlikely to want it to be the current time.)