- The recommended version is 1.0.9 or higher.
+ The recommended version is 1.0.10 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.9. 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.
+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.10. 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.
@@ -23,8 +23,8 @@ Demo available here: https://dan503.github.io/time-input-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.
-- [React component](https://www.npmjs.com/package/react-time-input-polyfill)
-- [Vue component](https://www.npmjs.com/package/vue-time-input-polyfill) (not built yet)
+- [React component](https://www.npmjs.com/package/react-time-input-polyfill)
+- [Vue component](https://www.npmjs.com/package/vue-time-input-polyfill) (not built yet)
## Fastest and easiest way to implement
@@ -44,10 +44,10 @@ Then require it in your main JavaScript file like so:
```js
// ES5
-require('time-input-polyfill/auto');
+require('time-input-polyfill/auto')
// ES6
-import 'time-input-polyfill/auto';
+import 'time-input-polyfill/auto'
```
That's all you need to do.
@@ -59,39 +59,40 @@ You didn't load the actual polyfill onto the page, you loaded a much smaller aut
1. The initialiser checks if the browser supports `input[type="time"]` elements.
2. If it **does**, it skips the rest of the functionality.
3. If it does **not**, it will:
- 1. load `https://cdn.jsdelivr.net/npm/time-input-polyfill@1.0.9/dist/time-input-polyfill.min.js` (the actual polyfill).
- 2. Collect all existing `input[type="time"]` elements on the page.
- 3. Loop through each `input[type="time"]` element and apply the polyfill to it.
-
+ 1. load `https://cdn.jsdelivr.net/npm/time-input-polyfill@1.0.10/dist/time-input-polyfill.min.js` (the actual polyfill).
+ 2. Collect all existing `input[type="time"]` elements on the page.
+ 3. Loop through each `input[type="time"]` element and apply the polyfill to it.
## I need more control
-The following downloads the full polyfill in all browsers, take a look at the [auto.js](https://github.com/Dan503/time-input-polyfill/blob/master/auto.js) file if you want to see how it loads the polyfill dynamically.
+The 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.
### npm
First check for `input[type="time"]` support.
```js
-var supportsTime = require('time-input-polyfill/supportsTime');
+import supportsTime from 'time-input-polyfill/supportsTime'
if (!supportsTime) {
- //Apply polyfill here
+ //Apply polyfill here
}
```
Then gather a list of all `input[type="time"]` elements on the page, and loop through them to apply the polyfill.
```js
-var supportsTime = require('time-input-polyfill/supportsTime');
-var TimePolyfill = require('time-input-polyfill');
+import supportsTime from 'time-input-polyfill/supportsTime'
+import TimePolyfill from 'time-input-polyfill'
if (!supportsTime) {
- // Converting to an array for IE support
- var $$inputs = [].slice.call( document.querySelectorAll('input[type="time"]') );
- $$inputs.forEach(function($input){
- new TimePolyfill($input);
- })
+ // Converting to an array for IE support
+ const $$inputs = [].slice.call(
+ document.querySelectorAll('input[type="time"]')
+ )
+ $$inputs.forEach(function ($input) {
+ new TimePolyfill($input)
+ })
}
```
@@ -102,32 +103,59 @@ if (!supportsTime) {
First check for `input[type="time"]` support.
```html
-
+
```
+
```js
if (!supportsTime) {
- //Apply polyfill here
+ //Apply polyfill here
}
```
Then gather a list of all `input[type="time"]` elements on the page, and loop through them to apply the polyfill.
```html
-
-
+
+
```
+
```js
if (!supportsTime) {
- // Converting to an array for IE support
- var $$inputs = [].slice.call( document.querySelectorAll('input[type="time"]') );
- $$inputs.forEach(function($input){
- new TimePolyfill($input);
- })
+ // 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.
+## Shadow DOM
+
+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.
+
+```html
+