{"id":21270436,"url":"https://github.com/dan503/time-input-polyfill","last_synced_at":"2025-07-11T05:31:58.596Z","repository":{"id":44121355,"uuid":"151829420","full_name":"Dan503/time-input-polyfill","owner":"Dan503","description":"A polyfill for input[type=time] elements modeled after the Chrome \u0026 Fire Fox implementations.","archived":false,"fork":false,"pushed_at":"2022-03-27T05:13:00.000Z","size":2658,"stargazers_count":19,"open_issues_count":3,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-28T15:35:16.476Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://dan503.github.io/time-input-polyfill/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dan503.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-06T10:35:16.000Z","updated_at":"2023-10-23T23:45:21.000Z","dependencies_parsed_at":"2022-09-03T20:20:53.150Z","dependency_job_id":null,"html_url":"https://github.com/Dan503/time-input-polyfill","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Ftime-input-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Ftime-input-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Ftime-input-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Ftime-input-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dan503","download_url":"https://codeload.github.com/Dan503/time-input-polyfill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225693742,"owners_count":17509228,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-21T08:17:26.786Z","updated_at":"2024-11-21T08:17:27.471Z","avatar_url":"https://github.com/Dan503.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Time Input Polyfill\n\n[![JS Deliver hits per month](https://data.jsdelivr.com/v1/package/npm/time-input-polyfill/badge)](https://www.jsdelivr.com/package/npm/time-input-polyfill)\n\nAn accessible polyfill for `\u003cinput type='time'/\u003e` elements.\n\n-   ✔️ Modeled after the Chrome 78 and Firefox 70 desktop implementations.\n-   ✔️ Fully keyboard and screen reader accessible.\n-   ✔️ Submits the same values to servers as real time inputs (24 hour time).\n-   ✔️ Only downloads the full polyfill code in the browsers that need it.\n-   ✔️ Zero dependencies.\n\nDemo available here: https://dan503.github.io/time-input-polyfill/\n\n\u003cdetails\u003e\n  \u003csummary\u003eThe recommended version is \u003ccode\u003e1.0.11\u003c/code\u003e or higher.\u003c/summary\u003e\n\n\u003cp\u003eIf the recommended version in this documentation is out of sync with the npm version, this is because npm only allows readme edits to be committed through full releases. To prevent needless cache invalidation, I'll only update the recommended version number when there are actual changes to the polyfill code. The current recommended version is \u003ccode\u003e1.0.11\u003c/code\u003e. As long as you are using a version that is equal to or higher than that, you are using the latest version of the polyfill.\u003c/p\u003e\n\n\u003c/details\u003e\n\n## Pre-built components\n\nTo make it easier to implement this polyfill into your projects, I have some pre-built component versions of it that you might find easier to use.\n\n-   [React component](https://www.npmjs.com/package/react-time-input-polyfill)\n-   [Vue component](https://www.npmjs.com/package/vue-time-input-polyfill) (not built yet)\n\n## Fastest and easiest way to implement\n\nAdd the following script element to your page:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/time-input-polyfill\"\u003e\u003c/script\u003e\n```\n\nAlternatively you can download it via npm and use it through commonJS or an ES6 import statement.\n\n```\nnpm i time-input-polyfill\n```\n\nThen require it in your main JavaScript file like so:\n\n```js\n// ES5\nrequire('time-input-polyfill/auto')\n\n// ES6\nimport 'time-input-polyfill/auto'\n```\n\nThat's all you need to do.\n\n### What did I just do?\n\nYou didn't load the actual polyfill onto the page, you loaded a much smaller automatic initialiser function instead.\n\n1. The initialiser checks if the browser supports `input[type=\"time\"]` elements.\n2. If it **does**, it skips the rest of the functionality.\n3. If it does **not**, it will:\n    1. load `https://cdn.jsdelivr.net/npm/time-input-polyfill@1.0.11/dist/time-input-polyfill.min.js` (the actual polyfill).\n    2. Collect all existing `input[type=\"time\"]` elements on the page.\n    3. Loop through each `input[type=\"time\"]` element and apply the polyfill to it.\n\n## I need more control\n\nThe following downloads the full polyfill in all browsers, take a look at the [auto.mjs](https://github.com/Dan503/time-input-polyfill/blob/master/auto.mjs) file if you want to see how it loads the polyfill dynamically.\n\n### npm\n\nFirst check for `input[type=\"time\"]` support.\n\n```js\nimport supportsTime from 'time-input-polyfill/supportsTime'\n\nif (!supportsTime) {\n\t//Apply polyfill here\n}\n```\n\nThen gather a list of all `input[type=\"time\"]` elements on the page, and loop through them to apply the polyfill.\n\n```js\nimport supportsTime from 'time-input-polyfill/supportsTime'\nimport TimePolyfill from 'time-input-polyfill'\n\nif (!supportsTime) {\n\t// Converting to an array for IE support\n\tconst $$inputs = [].slice.call(\n\t\tdocument.querySelectorAll('input[type=\"time\"]')\n\t)\n\t$$inputs.forEach(function ($input) {\n\t\tnew TimePolyfill($input)\n\t})\n}\n```\n\n`TimePolyfill` in this case will be a function that is only accessible from the file that it was required in.\n\n### CDN\n\nFirst check for `input[type=\"time\"]` support.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/time-input-polyfill@1.0.11/core/helpers/supportsTime.js\"\u003e\u003c/script\u003e\n```\n\n```js\nif (!supportsTime) {\n\t//Apply polyfill here\n}\n```\n\nThen gather a list of all `input[type=\"time\"]` elements on the page, and loop through them to apply the polyfill.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/time-input-polyfill@1.0.11/core/helpers/supportsTime.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/time-input-polyfill@1.0.11/dist/time-input-polyfill.min.js\"\u003e\u003c/script\u003e\n```\n\n```js\nif (!supportsTime) {\n\t// Converting to an array for IE support\n\tconst $$inputs = [].slice.call(\n\t\tdocument.querySelectorAll('input[type=\"time\"]')\n\t)\n\t$$inputs.forEach(function ($input) {\n\t\tnew TimePolyfill($input)\n\t})\n}\n```\n\nThis will add a global `TimePolyfill` function to the page.\n\n## Shadow DOM\n\nWhen your code is inside a component that resides in the Shadow DOM, the polyfill will not be able to find your label\nelement. For this case, you can pass your label element in directly.\n\n```html\n\u003clabel id=\"myLabel\" for=\"timeInput\"\u003eLabel text\u003c/label\u003e\n\u003cinput type=\"time\" id=\"timeInput\" /\u003e\n```\n\n```js\nimport timePolyfill from 'time-input-polyfill'\n\n// The following element must not be in a shadow DOM\nconst componentRootElem = document.getElementById(\n\t'idOfYourShadowDomComponentRootElement'\n)\n\nconst timeLabelElem = componentRootElem.shadowRoot.getElementById('myLabel')\nconst timeInputElem = componentRootElem.shadowRoot.getElementById('timeInput')\ntimePolyFill(timeInputElem, timeLabelElem)\n```\n\n## Major limitations\n\nNote that I refer to an `input[type=\"time\"]` element that has had the polyfill initialized on it as an `$input` in this section.\n\n### The value of the polyfill will be different to the value of the real input\n\nIn browsers that support the time input natively, they will provide the `value` of the input in 24 hour time (eg. `20:45`). The polyfill will provide the value in 12 hour time (`08:45 PM`). If the polyfill detects that a form is being submitted, the polyfill will quickly switch to 24 hour time in an attempt to align with standard time input functionality.\n\nIf this isn't working for you, you can prevent the auto-swap functionality by setting `$input.polyfill.autoSwap = false`. You can access the current input value in 24 hour time format by reading the `data-value` attribute.\n\nYou can also switch the `$input` manually to 24 hour time using `$input.polyfill.swap()`. The polyfill does not function properly at the moment while running in 24 hour time. 24 hour time is only meant to be used as a means of submitting correct values to forms. It is not intended to be used as a permanent mode.\n\n### You must call `$input.polyfill.update()` on dynamic inputs\n\nI couldn't find any reliable way to track when a user uses `$input.value = '13:30'`. So instead of tracking the use of `$input.value`, I have attached a `.polyfill.update()` method to the `$input` element.\n\nAny time you update the value of the time input element through JavaScript, check that `$input.polyfill` exists, and if it does, call `$input.polyfill.update()`.\n\n```html\n\u003cinput id=\"example\" type=\"time\" /\u003e\n```\n\n```js\nconst $input = document.getElementByID('example')\n$input.value = '13:30'\n// call the update() method whenever the value is updated through JS\nif ($input.polyfill) $input.polyfill.update()\n```\n\nThe `update()` method will return the input element that it was called on so it can be chained if you want.\n\n### All `$input` elements must have a label\n\nThe polyfill will fail if the `$input` is missing a label.\n\nThe following is a list of ways you can add a label to the `$input`. The list is in order from the **best** method to the **worst** method:\n\n1. Using the `for` attribute\n    ```html\n    \u003clabel for=\"uniqueID\"\u003eLabel text\u003c/label\u003e \u003cinput type=\"time\" id=\"uniqueID\" /\u003e\n    ```\n2. Using the `aria-labelledby` attribute\n    ```html\n    \u003cp id=\"uniqueID\"\u003eLabel text\u003c/p\u003e\n    \u003cinput type=\"time\" aria-labelledby=\"uniqueID\" /\u003e\n    ```\n3. Nesting the `$input` inside a `\u003clabel\u003e` (Doesn't require IDs to work but not supported by all screen readers)\n    ```html\n    \u003clabel\u003e\n    \t\u003cspan\u003eLabel text\u003c/span\u003e\n    \t\u003cinput type=\"time\" /\u003e\n    \u003c/label\u003e\n    ```\n4. Using the `title` attribute\n    ```html\n    \u003cinput type=\"time\" title=\"Label text\" /\u003e\n    ```\n5. Using the `aria-label` attribute\n    ```html\n    \u003cinput type=\"time\" aria-label=\"Label text\" /\u003e\n    ```\n\n## Change log\n\nYou can view the Change Log on the [GitHub Releases](https://github.com/Dan503/time-input-polyfill/releases) page.\n\n## Contributing\n\nPlease make pull requests against **Develop** branch rather than Master.\n\nFor testing you will need Gulp cli installed (`npm i gulp-cli -g`) then run `gulp --open` from a command line interface.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdan503%2Ftime-input-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdan503%2Ftime-input-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdan503%2Ftime-input-polyfill/lists"}