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 @@
+