I did some date picker implementations in the past and still many dat pickers are available as custom implementations. The <input> element has support for some data types that are usable - others fail on different reasons.
Input elements get better slowly and bugs get fixed but still some data types do behave not as expected. Some of them are quiet useful.
I like that the UI for e.g. changing date values as it is quiet useful and avoind much coding when relying on native support.
Others like the `color` type behave not as expected and cannot be controlled completely by CSS.
*1) The pattern attribute is not reflected when entering data but ony when validating the entered value. It is necessary to add a hint for the user somewhere.
The placeholder attribute can be used for hints but it disappears when a value is present.
The required attribute
*2) The UI for the selecting values in the defined format vary. The behavior cannot be controlled and e.g. is not reflecting the local format like weeks always start on sunday (not in Germany).
The code on the test button retrieves the form values as a Object so you can see the datatypes of date formatted as ISO. The Checkbox is not returning a boolean :(.
var f = document.querySelector('form');
document.querySelector('input#test').addEventListener('click',
function (evt) {
// get FormData as Object / JSON
var fd = new FormData(f);
const fData = {};
for (v of fd.keys()) {
fData[v] = fd.get(v);
};
alert(JSON.stringify(fData, null, 2));
});
will alert:
{
"aText": "Hello",
"aButton": "on",
"aFormat": "123456",
"aDate": "2021-12-06",
"aDateTime": "",
"aDateTimeLocal": "2021-12-06T08:43",
"aColor": "#007700",
"aEMail": "john.dow@rip.com",
"aMonth": "2021-12",
"aNumber": "",
"aRange": "12",
"aSearch": "",
"aPhone": "+491234567890",
"aURL": "https://github.com/mathertel/advent2021",
"aWeek": "2021-W49"
}