Generator-jhipster: When selecting the current date (for type instant), the web component should add a default time

[agoncal]

Overview of the feature request

When you have a date of type Instant, the Angular update component uses a type="datetime-local". When selecting the current day on the HTML component, only the date is set, not the time. So you have to add it manually otherwise the component does not allow you to save it.

It would be helpful to set the time (by default could be 00:00)

Motivation for or Use Case

Imagine you have the following JDL which represents an item status with a status date of type Instant:

entity ItemStatus{
    status String required,
    statusDate Instant required,
    additionalInformation String
}

The code generated in the item-status-update.component.html uses a

<div class="d-flex">
    <input id="field_statusDate" type="datetime-local" class="form-control" name="statusDate" [(ngModel)]="statusDate"
    required/>
</div>

So when you create a new Item Status and you hit the current day button, only the date is set, not the time. Because the date in not valid, the Save button is not enabled, and you can't save the Item Status:

You have to manually set a time for the Save button be enabled. The component should add 00:00 by default.

Related issues or PR

See #5006
See #6711

• [X] Checking this box is mandatory (this is just to show you read everything)

[avdev4j]

Hi @agoncal,
As I can see here it's related to the HTML component itself and the navigator (for example in Edge you have to select both date and time in dropdown list. To be honest I didn't test on Edge but I trust MDN docs :D).

I didn't find a native way to set a default time when select a date.

For me we have these choices:

1. Wrap the native component to add listeners on date change to set a default time value
2. Use a complex component that already handle this instead of the native one
3. Find a way to do this without wrapping and creating a new component... (how ?)

In all case this could break native behaviour and should be tested on every navigators (as possible).
Of course we should check this with a react front-end application, and if necessary wrapping datetime-local with react component too.

[avdev4j]

Ok so I have just done some tests and unfortunatelly it seems we can't handle event when a date is chosen in the calendar.
Calendar is related to navigator not the component itself, that's why on chrome or firefox the calendar do not have the same rendering.

Both "change" and "input" events are fired when the field is totally filled (so date AND time). We can't use them to change time on the fly.

But maybe I have a workaround :

• define the field with a default day at 00:00am
• when the user choose a new date in the calendar the time is already filled

In this case we are breaking the "required" validation rule because the field is always filled.

EDIT:
After looking at #5006, and according to @gmarziou, flatpickr seems to be a good alternative to native HTML 5 calendar. (11K stars on github :D).
What about adding it by default ?

[FernandaCG]

Hi, can I work on this??

[pascalgrimaud]

@FernandaCG : sure, you're welcome !

[avdev4j]

@FernandaCG
Have you any idea how you will face with this issue?
It's not as easy as we can think. You are welcome to share any ideas you want, if you think we can improve this behaviour by using a component or a trick. Be careful we need to think also to react and vue implementation.

I already analyzed this issue and I didn't find any natural way to fix it. I'm glad to help you if you need ;)

[FernandaCG]

@avdev4j

Hi, I have try to set a default time, I mean current day and time at 12:00 am.

My other option is to use just another component, or change the type of the input to date, and set time by default too.

[qmonmert]

@avdev4j @pascalgrimaud I have a PR #11043 I set datetime-local by default with the date: today 00:00

I think it's the simplest way

(done for Angular and React)

[qmonmert]

I claim my money :) https://opencollective.com/generator-jhipster/expenses/12701

cc @jdubois & @pascalgrimaud