Skip to content

Commit

Permalink
Merge branch 'develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
Dan503 committed Apr 25, 2019
2 parents 988c67b + b76778b commit 332c54b
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 38 deletions.
38 changes: 21 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@

An accessible polyfill for `<input type='time'/>` elements.

- ✔️ Modeled after the Chrome and Firefox implementations
- ✔️ Fully keyboard and screen reader accessible
- ✔️ Submits the same values to servers as real time inputs
- ✔️ Only downloads the full polyfill code in the browsers that need it
- ✔️ Zero dependencies
- ✔️ Modeled after the Chrome and Firefox desktop implementations.
- ✔️ Fully keyboard and screen reader accessible.
- ✔️ Submits the same values to servers as real time inputs.
- ✔️ Only downloads the full polyfill code in the browsers that need it.
- ✔️ Zero dependencies.

Demo available here: https://dan503.github.io/time-input-polyfill/

Expand All @@ -22,7 +22,7 @@ Add the following script element to your page:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
```

Alternatively you can download it via npm and use it through commonJS
Alternatively you can download it via npm and use it through commonJS or an ES6 import statement.

```
npm i time-input-polyfill
Expand All @@ -31,7 +31,11 @@ npm i time-input-polyfill
Then require it in your main JavaScript file like so:

```js
require('time-input-polyfill/auto')
// ES5
require('time-input-polyfill/auto');

// ES6
import 'time-input-polyfill/auto';
```

That's all you need to do.
Expand All @@ -44,7 +48,7 @@ You didn't load the actual polyfill onto the page, you loaded a much smaller aut
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]/dist/time-input-polyfill.min.js` (the actual polyfill).
2. Collect all `input[type="time"]` elements on the page.
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.


Expand All @@ -59,7 +63,7 @@ First check for `input[type="time"]` support.
```js
var supportsTime = require('time-input-polyfill/core/helpers/supportsTime');

if (supportsTime) {
if (!supportsTime) {
//Apply polyfill here
}
```
Expand All @@ -70,10 +74,10 @@ Then gather a list of all `input[type="time"]` elements on the page, and loop th
var supportsTime = require('time-input-polyfill/core/helpers/supportsTime');
var TimePolyfill = require('time-input-polyfill');

if (supportsTime) {
if (!supportsTime) {
// Converting to an array for IE support
var $inputs = [].slice.call( document.querySelectorAll('input[type="time"]') );
$inputs.forEach(function($input){
var $$inputs = [].slice.call( document.querySelectorAll('input[type="time"]') );
$$inputs.forEach(function($input){
new TimePolyfill($input);
})
}
Expand All @@ -89,7 +93,7 @@ First check for `input[type="time"]` support.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/core/helpers/supportsTime.js"></script>
```
```js
if (supportsTime) {
if (!supportsTime) {
//Apply polyfill here
}
```
Expand All @@ -101,10 +105,10 @@ Then gather a list of all `input[type="time"]` elements on the page, and loop th
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/time-input-polyfill.min.js"></script>
```
```js
if (supportsTime) {
if (!supportsTime) {
// Converting to an array for IE support
var $inputs = [].slice.call( document.querySelectorAll('input[type="time"]') );
$inputs.forEach(function($input){
var $$inputs = [].slice.call( document.querySelectorAll('input[type="time"]') );
$$inputs.forEach(function($input){
new TimePolyfill($input);
})
}
Expand All @@ -122,7 +126,7 @@ In browsers that support the time input natively, they will provide the `value`

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 (at least not yet).
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.

### You must call `$input.polyfill.update()` on dynamic inputs

Expand Down
49 changes: 31 additions & 18 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 2 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "time-input-polyfill",
"description": "An accessible polyfill for `<input type='time'/>` elements modeled after the Chrome & Firefox implementations.",
"version": "1.0.3",
"description": "An accessible polyfill for `<input type='time'/>` elements modeled after the Chrome & Firefox desktop implementations.",
"version": "1.0.4",
"main": "index.js",
"jsdelivr": "dist/time-input-polyfill.auto.min.js",
"dependencies": {},
Expand Down Expand Up @@ -35,7 +35,6 @@
"gulp-util": "~3.0.7",
"imagemin-pngquant": "~4.2.0",
"imagemin-svgo": "~4.2.0",
"jquery": "~2.2.0",
"js-yaml": "~3.5.2",
"lodash": "~4.0.0",
"minimist": "~1.2.0",
Expand Down

0 comments on commit 332c54b

Please sign in to comment.