This is a pre-built, plug-and-play, fully accessible React component that will produce an
<input type="time"> element with a built in polyfill for IE and Safari support.
- ✔️ Modeled after the Chrome 78 and Firefox 70 desktop implementations.
- ✔️ Fully keyboard and screen reader accessible.
- ✔️ Sends back the same values as real time inputs (24 hour time).
- ✔️ Only downloads the full polyfill code in the browsers that need it
You can view a demo of
react-time-input-polyfill in action here: https://dan503.github.io/react-time-input-polyfill/
The component needs an ES6 compatible environment to run in. It also needs React installed on the project. Take a look at create-react-app to get started with React.
You can then install this polyfill component with npm:
npm i react-time-input-polyfill
/* TimeInput.js */import React from 'react'// Import the component into your projectimport TimeInputPolyfill from 'react-time-input-polyfill'const TimeInput = label currentValue onInputChangereturn<label><span>label</span><TimeInputPolyfill//=//=/></label>
/* ExampleForm.js */import React useState from 'react'// import your local time input component into your form componentimport TimeInput from './TimeInput'const ExampleForm =// Use state to keep track of the valueconst inputValue setInputValue = // default to 8:30 PMreturn<form><TimeInput="Label text"//=//=/><button ="submit">Submit</button></form>
You can also force-enable the polyfill so that it is active in modern browsers that support
<input type="time"> natively. This is helpful when it comes to debugging since it gives you access to modern dev tools (just make sure to disable it again when you are done).
/* TimeInput.js */import React from 'react'import TimeInputPolyfill from 'react-time-input-polyfill'const TimeInput = label currentValue onInputChangereturn<label><span>label</span><TimeInputPolyfill=/* [=].( )*/ ==/></label>