-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
44 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -12,14 +12,14 @@ An accessible polyfill for `<input type='time'/>` elements. | |
|
||
Demo available here: https://dan503.github.io/time-input-polyfill/ | ||
|
||
**Note:** 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.6`. 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. | ||
**Note:** 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.7`. 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. | ||
|
||
## Fastest and easiest way to implement | ||
|
||
Add the following script element to your page: | ||
|
||
```html | ||
<script src="https://cdn.jsdelivr.net/npm/time-input-polyfill@1.0.6"></script> | ||
<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. | ||
|
@@ -47,7 +47,7 @@ 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/[email protected].6/dist/time-input-polyfill.min.js` (the actual polyfill). | ||
1. load `https://cdn.jsdelivr.net/npm/[email protected].7/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. | ||
|
||
|
@@ -90,7 +90,7 @@ if (!supportsTime) { | |
First check for `input[type="time"]` support. | ||
|
||
```html | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected].6/core/helpers/supportsTime.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected].7/core/helpers/supportsTime.js"></script> | ||
``` | ||
```js | ||
if (!supportsTime) { | ||
|
@@ -101,8 +101,8 @@ if (!supportsTime) { | |
Then gather a list of all `input[type="time"]` elements on the page, and loop through them to apply the polyfill. | ||
|
||
```html | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected].6/core/helpers/supportsTime.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected].6/dist/time-input-polyfill.min.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected].7/core/helpers/supportsTime.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected].7/dist/time-input-polyfill.min.js"></script> | ||
``` | ||
```js | ||
if (!supportsTime) { | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,7 +4,7 @@ var loadJS = require('./core/helpers/loadJS'); | |
|
||
document.addEventListener("DOMContentLoaded", function() { | ||
if (!supports_time) { | ||
loadJS('https://cdn.jsdelivr.net/npm/[email protected].6/dist/time-input-polyfill.min.js', function(){ | ||
loadJS('https://cdn.jsdelivr.net/npm/[email protected].7/dist/time-input-polyfill.min.js', function(){ | ||
var $inputs = [].slice.call(document.querySelectorAll('input[type="time"]')); | ||
$inputs.forEach(function($input) { | ||
new TimePolyfill($input); | ||
|
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -44,7 +44,7 @@ | |
</div> | ||
<div class="container" style="text-align: center"> | ||
<h1>Time Input Polyfill</h1> | ||
<p class="version">v1.0.6</p> | ||
<p class="version">v1.0.7</p> | ||
<p class="forkMe"><a class="forkMe__link" href="https://github.com/Dan503/time-input-polyfill">Fork me on GitHub</a></p> | ||
<div class="textBlock"> | ||
<p>The demos on this page have been applied manually in order to demonstrate the difference between a real time input and a polyfill time input in modern browsers.</p> | ||
|
@@ -83,8 +83,8 @@ <h2>Download via npm:</h2> | |
</div> | ||
<div class="downloadMethod"> | ||
<h2>Download via CDN:</h2> | ||
<pre><code><script src="https://cdn.jsdelivr.net/npm/[email protected].6"></script></code></pre> | ||
<p><a href="https://cdn.jsdelivr.net/npm/[email protected].6">https://cdn.jsdelivr.net/npm/[email protected].6</a></p> | ||
<pre><code><script src="https://cdn.jsdelivr.net/npm/[email protected].7"></script></code></pre> | ||
<p><a href="https://cdn.jsdelivr.net/npm/[email protected].7">https://cdn.jsdelivr.net/npm/[email protected].7</a></p> | ||
</div> | ||
<div class="downloadMethod"> | ||
<h2>View documentation:</h2> | ||
|
Large diffs are not rendered by default.
Oops, something went wrong.
Oops, something went wrong.