OpenHow to make input type="date" accessible via keyboard and mouse?
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
Nurjaman Shekh replied a month ago0 likes0 dislikes<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;
}
Software40
DevOps47
Frontend Development24
Backend Development20
Server Administration17
Linux Administration26
Data Center24
Sentry24
Terraform23
Ansible83
Docker70
Penetration Testing16
Kubernetes21
NGINX20
JenkinsX17
Allen ScottAllen ScottJhone Buttler
Kelsey Roy
Subscribe to get latest updates