Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
time-input-polyfill
Advanced tools
Readme
An accessible polyfill for <input type='time'/>
elements.
Demo available here: https://dan503.github.io/time-input-polyfill/
1.0.11
or higher.If 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 1.0.11
. 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.
To 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.
Add the following script element to your page:
<script src="https://cdn.jsdelivr.net/npm/time-input-polyfill"></script>
Alternatively you can download it via npm and use it through commonJS or an ES6 import statement.
npm i time-input-polyfill
Then require it in your main JavaScript file like so:
// ES5
require('time-input-polyfill/auto')
// ES6
import 'time-input-polyfill/auto'
That's all you need to do.
You didn't load the actual polyfill onto the page, you loaded a much smaller automatic initialiser function instead.
input[type="time"]
elements.https://cdn.jsdelivr.net/npm/time-input-polyfill@1.0.11/dist/time-input-polyfill.min.js
(the actual polyfill).input[type="time"]
elements on the page.input[type="time"]
element and apply the polyfill to it.The following downloads the full polyfill in all browsers, take a look at the auto.mjs file if you want to see how it loads the polyfill dynamically.
First check for input[type="time"]
support.
import supportsTime from 'time-input-polyfill/supportsTime'
if (!supportsTime) {
//Apply polyfill here
}
Then gather a list of all input[type="time"]
elements on the page, and loop through them to apply the polyfill.
import supportsTime from 'time-input-polyfill/supportsTime'
import TimePolyfill from 'time-input-polyfill'
if (!supportsTime) {
// Converting to an array for IE support
const $$inputs = [].slice.call(
document.querySelectorAll('input[type="time"]')
)
$$inputs.forEach(function ($input) {
new TimePolyfill($input)
})
}
TimePolyfill
in this case will be a function that is only accessible from the file that it was required in.
First check for input[type="time"]
support.
<script src="https://cdn.jsdelivr.net/npm/time-input-polyfill@1.0.11/core/helpers/supportsTime.js"></script>
if (!supportsTime) {
//Apply polyfill here
}
Then gather a list of all input[type="time"]
elements on the page, and loop through them to apply the polyfill.
<script src="https://cdn.jsdelivr.net/npm/time-input-polyfill@1.0.11/core/helpers/supportsTime.js"></script>
<script src="https://cdn.jsdelivr.net/npm/time-input-polyfill@1.0.11/dist/time-input-polyfill.min.js"></script>
if (!supportsTime) {
// Converting to an array for IE support
const $$inputs = [].slice.call(
document.querySelectorAll('input[type="time"]')
)
$$inputs.forEach(function ($input) {
new TimePolyfill($input)
})
}
This will add a global TimePolyfill
function to the page.
When your code is inside a component that resides in the Shadow DOM, the polyfill will not be able to find your label element. For this case, you can pass your label element in directly.
<label id="myLabel" for="timeInput">Label text</label>
<input type="time" id="timeInput" />
import timePolyfill from 'time-input-polyfill'
// The following element must not be in a shadow DOM
const componentRootElem = document.getElementById(
'idOfYourShadowDomComponentRootElement'
)
const timeLabelElem = componentRootElem.shadowRoot.getElementById('myLabel')
const timeInputElem = componentRootElem.shadowRoot.getElementById('timeInput')
timePolyFill(timeInputElem, timeLabelElem)
Note that I refer to an input[type="time"]
element that has had the polyfill initialized on it as an $input
in this section.
In 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.
If 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.
You 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.
$input.polyfill.update()
on dynamic inputsI 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.
Any 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()
.
<input id="example" type="time" />
const $input = document.getElementByID('example')
$input.value = '13:30'
// call the update() method whenever the value is updated through JS
if ($input.polyfill) $input.polyfill.update()
The update()
method will return the input element that it was called on so it can be chained if you want.
$input
elements must have a labelThe polyfill will fail if the $input
is missing a label.
The 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:
for
attribute
<label for="uniqueID">Label text</label> <input type="time" id="uniqueID" />
aria-labelledby
attribute
<p id="uniqueID">Label text</p>
<input type="time" aria-labelledby="uniqueID" />
$input
inside a <label>
(Doesn't require IDs to work but not supported by all screen readers)
<label>
<span>Label text</span>
<input type="time" />
</label>
title
attribute
<input type="time" title="Label text" />
aria-label
attribute
<input type="time" aria-label="Label text" />
You can view the Change Log on the GitHub Releases page.
Please make pull requests against Develop branch rather than Master.
For testing you will need Gulp cli installed (npm i gulp-cli -g
) then run gulp --open
from a command line interface.
FAQs
An accessible polyfill for `[input type='time']` elements modeled after the Chrome & Firefox desktop implementations.
The npm package time-input-polyfill receives a total of 2,555 weekly downloads. As such, time-input-polyfill popularity was classified as popular.
We found that time-input-polyfill demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.