Format the date of bootstrap datepicker before submitting the HTML form
When using format parameter in bootstrap datepicker, the submitted date data will be formatted according to the format parameter in the submitted form. For example:
- If the
formatparameter is "dd/mm/yyyy", the submitted date data may look like this: "03/08/2023" - If the
formatparameter is "mm/dd/yyyy", the submitted date data may look like this: "08/03/2023"
After receiving the data, the server cannot determine the correct date, resulting in bugs. Especially when using multilingual translations, the received date data may contain various languages and various forms, making it extremely difficult to handle. However, there is a need to comply with user habits and display dates in formats that are easily accepted by users when displaying them on the front end. Therefore, we have a need to separate the date display from the underlying data.
Here, I refer to the solution provided by uxsolutions/bootstrap-datepicker#1053. A hidden input is generated in the DOM to store the input used for form submission. When the displayed date of the datepicker changes, it will be correspondingly stored.
After adding bootstrap-datepicker, add bootstrap-datepicker-uniform-date-format. The interface used is still the datepicker.
An additional parameter is added to the datepicker function call parameter for formatting.
- uniformFormat: The default value is "yyyy-mm-dd"
$('.datepicker').datepicker({
uniformFormat: 'yyyy/mm/dd'
})
This parameter can also be passed in the form of HTML attributes.
<input
type="text"
class="form-control datepicker"
name="student[apply_due_date]"
id="student_apply_due_date"
value="2023-02-22"
data-date-uniform-format="yyyy/mm/dd"
/>
https://codesandbox.io/s/bootstrap-datepicker-uniform-date-format-examples-4steyu
The code is concise and easy to understand. By adding a decorator to the datepicker function, the code generates a hidden input box for form submission.
bootstrap datepicker v1.9.0
MIT