Last updated: 2023-03-06
Unterstandind and adjusting the datepicker
If your project has a frontend, a datepicker is also provided in the client if required. How is it integrated and how can we adapt it to our requirements?
The datepicker is added if your project has at least one form field of type LocalDate, LocalTime or LocalDateTime. This would be the case, for example, if an entity has a field with such a type and the frontend CRUD option is enabled. OffsetDateTime is not supported by the datepicker, because the offset cannot be set separately and this type is usually used for storing timestamps in the backend.
For the datepicker the library Flatpickr is included in the client. This library offers many configuration options and has no further dependencies. Flatpickr is integrated either as WebJar or as a dependency in the package.json. Furthermore the following code is added in the app.js.
Helper function to initialize Flatpickr on page load
So if your input field has the class js-datepicker, js-timepicker or js-datetimepicker, Flatpickr will be activated for it with the appropriate configuration. For the datetimepicker the format Y-m-dTH:i:S is used as the submitted value, but in the client the middle T is not displayed. Using altInput = true and altFormat = '...' we could also configure the other display values if needed, while the supported date format is still transmitted to our Spring Boot backend.
Using the datepicker in one of our forms
More information about Flatpickr can be found in the examples as well as in the explanation of the options.
