A | B | C | D | E | F | G | H | I | J | K | L | ||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Date input comparison | ||||||||||||
2 | Features | Desktop native implementation | Device native implementation | JS Plugin | Other basic implementations | ||||||||
3 | Chrome, Opera | FF, Safari, IE | iOS | Chrome for Android | Android native | Webshims.lib | jQuery UI / jQuery DatePicker | Mobiscroll | Masked Input | 3 Dropdowns | 3 Inputs | ||
4 | Semantically correct markup (ie. HTML5) | ✔ | ~ date input behaves as text field | ✔ | ✔ | ✔ | ~ markup is semantic, polyfill may not be | ✘ | ✘ | ✘ | ✘ | ✘ | |
5 | Does not require a JS plugin | ✔ | ✔ | ✔ | ✔ | ✔ | ~ Only requires plugin for non supported browsers | ✘ | ✘ Must purchase a license | ✘ | ✔ | ~ Needs auto-tab to feel right | |
6 | Prevents invalid characters | ✔ | ✘ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✘ | |
7 | Client-side validation | ~ As HTML5 | ~ As HTML5 | N/A | N/A | N/A | ✔ | N/A | N/A | ? unknown | N/A | ~ As HTML5 | |
8 | Customisable date display format | ~ No but date is automatically set to local format | ~ Text field only | ✘ Month dd, yyyy only | ~ No but date is automatically set to local format | ✘ yyyy-mm-dd only | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | |
9 | Easy to select many years past | ~ There is a dropdown available to select year/month but unintuitive | ~ Text field only | ✔ | ✔ | ✘ | ✔ | ~ Option available for month/year dropdown in calendar | ✔ | ✔ | ✘ | ✔ | |
10 | Submits in HTML5 spec format: yyyy-mm-dd | ✔ | ✘ Not enforced | ✔ | ✔ | ✔ | ✔ | ✘ | ✘ | ✘ | ✘ | ✘ | |
11 | Consistent everywhere | ✘ - Different in each browser, | ~ Different in each browser but still functional | ✔ | ~ Yes but always a barrel roller | ✔ | ✔ | ✔ | |||||
12 | Calendar widget | Calendar widget | |||||||||||
13 | Has calendar widget | ✔ | ✘ | ✔ | ✔ | ✔ yes on Galaxy S3+ | ✔ | ✔ | ✔ | ✘ | ✘ | ✘ | |
14 | Stylable calendar | ✘ | N/A | ✘ | ✘ | ✘ | ✔ | ✔ | ✔ | N/A | N/A | N/A | |
15 | Range limit | ✔ | N/A | ✔ assume yes | ✔ | ✔ assume yes | ✔ | ✔ | ✔ | N/A | N/A | N/A | |
16 | Initial date | ✔ | N/A | ✔ assume yes | ✔ assume yes | ✔ assume yes | ✔ | ✔ | ✔ assume yes | N/A | N/A | N/A | |
17 | Today button | ✔ yes but may be unintuitive | N/A | ✘ | ✘ | ✘ | ✔ | ✔ Option avaiable | ✘ | N/A | N/A | N/A | |
18 | Can disable widget | ✔ | N/A | ✘ | ✘ | ✘ | ✔ | ✔ | ✔ | N/A | N/A | N/A | |
19 | Month picker | ✔ | N/A | ✔ | ✔ | ✘ | ✔ | ✔ | ✔ | N/A | N/A | N/A | |
20 | Week picker | ✔ | N/A | ✘ | ✘ | ✘ | ✔ | ✘ | ✔ | N/A | N/A | N/A | |
21 | Time picker | ✔ | N/A | ✔ | ✔ | ✔ | ✔ | ✘ | ✔ | N/A | N/A | N/A | |
22 | Mobile optimized | N/A | N/A | ✔ | ✔ | ✔ | ~ customizable CSS | ✘ | ✔ | N/A | N/A | N/A | |
23 | Character Input | Character Input | |||||||||||
24 | Date-formatted text field | ✔ | ✘ Safari is supposed to but I couldn't see it | ✘ | ✘ | ✘ | ✔ | ✘ | ✘ Forcing barrel roller on desktop is bad | ✔ | ✘ | ✔ | |
25 | Sepparators are not characters | ✔ | N/A | N/A | N/A | N/A | ✔ | N/A | N/A | ✔ | ✔ | ✔ | |
26 | Assessable/ Tabbed sections | ✔ | N/A | N/A | N/A | N/A | ✔ | N/A | N/A | ✔ | ✔ | ✔ | |
27 | Mobile optimized | N/A | N/A | N/A | N/A | N/A | ✔ defaults to browser implementation | ✘ | N/A | ~ a little buggy on Android devices | ✔ | ✔ |