I've used a native html5 input date-picker in my code, it's working first-class for me so far(I'm the handiest concerned with approximately chrome and aspect). However I'm facing one trouble: I want a uniform manner to get admission to the date picker however I notice that in my date picker there's a date picker button(pseudo-element) which isn't reachable thru the keyboard, I attempted to put off the pseudo-detail by way of making its show none but then I lose the capability to open the pop-up calendar through the mouse.
We must press space to open via the keyboard because the icon is not handy through the keyboard.
We must click on the icon to open the calendar pop-up thru the mouse.
As in step with accessibility requirements if an element is available thru a mouse it has to be available utilizing the keyboard too. So I need a work-around that.
I am looking for one of the following solutions - (any one of them will work)
1. Making the date icon accessible by keyboard.
2. Removing the date icon and making the calendar popup via mouse click instead of clicking on the icon.
Anyone can help to solve this issue?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DatePicker</title>
<style>
</style>
</head>
<body>
<label for="mydate">DOB:</label>
<input type="date" id="mydate">
</body>
</html>
1 Replies
<input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.
HTML:
<label for="start">Start date:</label>
<input type="date" id="start" name="trip-start"
value="2018-07-22"
min="2018-01-01" max="2018-12-31">
CSS:
label {
display: block;
font: 1rem 'Fira Sans', sans-serif;
}
input,
label {
margin: .4rem 0;
}