diff --git a/README.md b/README.md index 9b08536..019e7ff 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ A lightweight, accessible and customizable javascript timepicker widget. Accessi ## Installation ``` -npm install --save appointment-picker +npm i -S appointment-picker ``` ## Setup @@ -45,6 +45,15 @@ require(['appointment-picker'], function(AppointmentPicker) { }); ``` +### Use without any dependency +Initialize the picker using the `new` keyword +```html + +``` +```javascript +var picker = new AppointmentPicker(document.getElementById('time-2'), {}); +``` + ### Use as jQuery plugin If you would like to use the appointment-picker as a jQuery plugin add following code before initializing @@ -56,7 +65,7 @@ $.fn.appointmentPicker = function(options) { }; ``` -Now you can initialize the picker on any text input field +Now you can initialize the picker on any text input field using `$` ```html ``` @@ -64,15 +73,6 @@ Now you can initialize the picker on any text input field var $picker = $('#time-1').appointmentPicker(); ``` -### Use without any dependency -If you don't use jQuery, initialize the picker using `new` -```html - -``` -```javascript -var picker = new AppointmentPicker(document.getElementById('time-2'), {}); -``` - ## Options The appointment-picker can be configured with options - `interval` sets the interval between appointments in minutes (`1-60`), if this number gets lower (more possible appointments) the picker will get longer @@ -89,8 +89,9 @@ The appointment-picker can be configured with options __Note:__ with `startTime` and `endTime` appointments below and above can be visually removed. If startTime is greater than `minTime` a lower time can still be manually set via the keyboard. On the other hand the picker does not accept lower hours than `minTime` and higher than `maxTime`. Manually entered times outside of the defined bounds will be rejected by the picker, no extra validation is therefore needed ([example](https://jannicz.github.io/appointment-picker/example/form-submit.html)). Entering an empty string into the input resets the time. Pass the options into the the AppointmentPicker call -// Standalone + ```javascript +// Without dependency var picker = new AppointmentPicker(document.getElementById('time-2'), { interval: 30, mode: '12h', @@ -113,9 +114,9 @@ The appointment-picker exposes several functions to change its behaviour from ou To get the current time programmatically from a picker instance use ```javascript -// Standalone +// Without dependency picker.getTime(); -// or access the picker instance of the jQuery object +// Using jQuery $picker.appointmentPicker.getTime(); // i.e. { h: 15, m: 30 } ``` @@ -170,6 +171,11 @@ For screen reader support add both a `aria-label` and `aria-live` properties on - Safari (macOS 10 & iOS 9) - Edge - IE11 / IE10 +- IE9 (with classList polyfill) + +### Legacy browser support (i.e. IE9) + +Add the [element.classList polyfill](https://www.npmjs.com/package/classlist-polyfill) by either importing it with a module loader or simply load the polyfill from a CDN in your html head. ## Author & License - Jan Suwart | MIT License diff --git a/css/appointment-picker.css b/css/appointment-picker.css index 3393f42..bbd2917 100644 --- a/css/appointment-picker.css +++ b/css/appointment-picker.css @@ -1,5 +1,5 @@ /* - * appointment-picker.css 1.1.1 | MIT License | github.com/jannicz/appointment-picker + * appointment-picker.css 1.1.2 | MIT License | github.com/jannicz/appointment-picker */ /* Default variation */ .appo-picker { @@ -14,6 +14,8 @@ font-family: Helvetica, Arial, sans-serif; /* Large variation */ } .appo-picker.is-open { + display: inline-block; + /* IE 9 */ display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; @@ -67,6 +69,9 @@ list-style-type: none; } .appo-picker-list-item { + display: inline-block; + /* IE 9 */ + display: flex; width: 25%; height: 34px; } .appo-picker-list-item input[type="button"] { diff --git a/css/appointment-picker.scss b/css/appointment-picker.scss index 419e962..a8c29d2 100644 --- a/css/appointment-picker.scss +++ b/css/appointment-picker.scss @@ -1,5 +1,5 @@ /* - * appointment-picker.css 1.1.1 | MIT License | github.com/jannicz/appointment-picker + * appointment-picker.css 1.1.2 | MIT License | github.com/jannicz/appointment-picker */ /* Default variation */ @@ -16,6 +16,7 @@ font-family: Helvetica, Arial, sans-serif; &.is-open { + display: inline-block; /* IE 9 */ display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Safari 6.1+. iOS 7.1+, BB10 */ display: flex; @@ -82,6 +83,8 @@ } .appo-picker-list-item { + display: inline-block; /* IE 9 */ + display: flex; width: 25%; height: 34px; diff --git a/example/exposed-functions.html b/example/exposed-functions.html index 07fda71..c5fc42b 100644 --- a/example/exposed-functions.html +++ b/example/exposed-functions.html @@ -7,6 +7,7 @@ + diff --git a/example/form-submit.html b/example/form-submit.html index 03cfaaf..5e81992 100644 --- a/example/form-submit.html +++ b/example/form-submit.html @@ -7,6 +7,7 @@ + diff --git a/example/render-on-init.html b/example/render-on-init.html index 784de53..6777dcf 100644 --- a/example/render-on-init.html +++ b/example/render-on-init.html @@ -7,6 +7,7 @@ +