2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | better-dateinput-polyfill demo
10 |
30 |
31 |
32 |
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | module.exports = function(config) {
2 | config.set({
3 | plugins: ["karma-jasmine", "karma-chrome-launcher"],
4 | frameworks: ["jasmine"],
5 | // list of files / patterns to load in the browser
6 | files: [
7 | {pattern: 'src/util.js', type: 'module'},
8 | {pattern: 'test/**/*.spec.js', type: 'module'},
9 | ],
10 | // preprocess matching files before serving them to the browser
11 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
12 | preprocessors: {
13 | },
14 | // test results reporter to use
15 | // possible values: 'dots', 'progress'
16 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter
17 | reporters: ['progress'],
18 | // web server port
19 | port: 9876,
20 | // enable / disable colors in the output (reporters and logs)
21 | colors: true,
22 | // level of logging
23 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
24 | logLevel: config.LOG_INFO,
25 | // enable / disable watching file and executing tests whenever any file changes
26 | autoWatch: true,
27 | // start these browsers
28 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
29 | browsers: ['ChromeHeadless'],
30 | // Continuous Integration mode
31 | // if true, Karma captures browsers, runs the tests and exits
32 | singleRun: false,
33 | // Concurrency level
34 | // how many browser should be started simultaneous
35 | concurrency: Infinity
36 | });
37 | }
38 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "better-dateinput-polyfill",
3 | "description": "input[type=date] polyfill",
4 | "version": "4.0.0-beta.2",
5 | "author": "Maksim Chemerisuk",
6 | "license": "MIT",
7 | "homepage": "https://github.com/chemerisuk/better-dateinput-polyfill",
8 | "repository": {
9 | "type": "git",
10 | "url": "https://github.com/chemerisuk/better-dateinput-polyfill"
11 | },
12 | "keywords": [
13 | "web-components"
14 | ],
15 | "devDependencies": {
16 | "@babel/core": "^7.13.15",
17 | "@babel/preset-env": "^7.13.15",
18 | "@rollup/plugin-babel": "^5.3.0",
19 | "babel-plugin-html-tag": "^2.0.1",
20 | "gh-pages": "^3.1.0",
21 | "jasmine-core": "^3.7.1",
22 | "karma": "^6.3.2",
23 | "karma-chrome-launcher": "^3.1.0",
24 | "karma-jasmine": "^4.0.1",
25 | "postcss": "^8.2.9",
26 | "postcss-font-family-system-ui": "^5.0.0",
27 | "postcss-preset-env": "^6.7.0",
28 | "rollup": "^2.44.0",
29 | "rollup-plugin-postcss": "^4.0.0",
30 | "rollup-plugin-terser": "^7.0.2"
31 | },
32 | "scripts": {
33 | "build": "rollup --config",
34 | "watch": "rollup --config --watch --silent | karma start",
35 | "test": "karma start --single-run",
36 | "version": "npm run build -- --configDist && git add -A dist",
37 | "postversion": "git push && git push --tags",
38 | "publish": "gh-pages -s '{index.html,README.md,build/*}' -d ."
39 | },
40 | "browserslist": [
41 | "ChromeAndroid 70",
42 | "iOS 10",
43 | "IE 10"
44 | ]
45 | }
46 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | const postcssPresetEnv = require("postcss-preset-env");
2 | const postcssSystemUiFont = require("postcss-font-family-system-ui");
3 |
4 | module.exports = {
5 | inject: false,
6 | minimize: true,
7 | plugins: [
8 | postcssSystemUiFont(),
9 | postcssPresetEnv({
10 | features: {
11 | "nesting-rules": true,
12 | "custom-properties": {"preserve": false},
13 | "custom-media-queries": {"preserve": false},
14 | },
15 | }),
16 | ],
17 | };
18 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import babel from "@rollup/plugin-babel";
2 | import postcss from "rollup-plugin-postcss";
3 | import {terser} from "rollup-plugin-terser";
4 | import pkg from "./package.json";
5 |
6 | const banner = `/**
7 | * ${pkg.name}: ${pkg.description}
8 | * @version ${pkg.version} ${new Date().toUTCString()}
9 | * @link ${pkg.homepage}
10 | * @copyright ${new Date().getFullYear()} ${pkg.author}
11 | * @license ${pkg.license}
12 | */`
13 |
14 | export default async function (commandLineArgs) {
15 | if (commandLineArgs.configDist) {
16 | return [{
17 | input: "src/polyfill.js",
18 | output: {
19 | file: "dist/better-dateinput-polyfill.js",
20 | format: "iife",
21 | banner,
22 | },
23 | plugins: [
24 | babel({babelHelpers: "bundled"}),
25 | postcss({config: true, inject: false, minimize: true}),
26 | ],
27 | }, {
28 | input: "src/polyfill.js",
29 | output: {
30 | file: "dist/better-dateinput-polyfill.min.js",
31 | format: "iife",
32 | banner,
33 | },
34 | plugins: [
35 | babel({babelHelpers: "bundled"}),
36 | postcss({config: true, inject: false, minimize: true}),
37 | terser({compress: {ecma: 5}}),
38 | ],
39 | }]
40 | } else {
41 | return {
42 | input: "src/polyfill.js",
43 | output: {
44 | file: "build/better-dateinput-polyfill.js",
45 | format: "iife",
46 | banner,
47 | },
48 | plugins: [
49 | babel({babelHelpers: "bundled"}),
50 | postcss({config: true, inject: false, minimize: true}),
51 | ],
52 | watch: {
53 | clearScreen: false,
54 | },
55 | };
56 | }
57 | };
58 |
--------------------------------------------------------------------------------
/src/input.js:
--------------------------------------------------------------------------------
1 | import {DatePickerImpl} from "./picker.js";
2 | import {$, DOCUMENT, HTML} from "./util.js";
3 | import {parseLocaleDate, formatLocaleDate, getFormatOptions, localeDate} from "./intl.js";
4 |
5 | const formatMeta = $(DOCUMENT, "meta[name=dateinput-polyfill-format]")[0];
6 |
7 | export class DateInputPolyfill {
8 | constructor(input) {
9 | this._input = input;
10 | this._valueInput = this._createValueInput(input);
11 | this._formatOptions = this._createFormatOptions();
12 |
13 | this._input.addEventListener("focus", this._showPicker.bind(this));
14 | this._input.addEventListener("click", this._showPicker.bind(this));
15 | this._input.addEventListener("blur", this._hidePicker.bind(this));
16 | this._input.addEventListener("keydown", this._onKeydown.bind(this));
17 |
18 | this._initInput();
19 | }
20 |
21 | _initInput() {
22 | const valueDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
23 | // redefine value property for input
24 | Object.defineProperty(this._input, "value", {
25 | configurable: false,
26 | enumerable: true,
27 | get: this._getValue.bind(this),
28 | set: this._setValue.bind(this, valueDescriptor.set)
29 | });
30 | // redefine valueAsDate property for input
31 | Object.defineProperty(this._input, "valueAsDate", {
32 | configurable: false,
33 | enumerable: true,
34 | get: this._getDate.bind(this),
35 | set: this._setDate.bind(this, valueDescriptor.set)
36 | });
37 | // change input type to remove built-in picker
38 | this._input.type = "text";
39 | // do not popup keyboard on mobile devices
40 | this._input.setAttribute("inputmode", "none");
41 | // need to set readonly attribute as well to prevent
42 | // visible date modification with the cut feature
43 | this._input.readOnly = true;
44 | // update visible value in text input
45 | this._input.value = this._getValue();
46 | // update default visible value to formatted date
47 | this._input.defaultValue = valueDescriptor.get.call(this._input);
48 | }
49 |
50 | _getValue() {
51 | return this._valueInput.value;
52 | }
53 |
54 | _setValue(setter, stringValue) {
55 | this._setDate(setter, parseLocaleDate(stringValue));
56 | }
57 |
58 | _getDate() {
59 | return parseLocaleDate(this._getValue());
60 | }
61 |
62 | _setDate(setter, dateValue) {
63 | setter.call(this._input, dateValue && localeDate(dateValue, this._formatOptions) || "");
64 | setter.call(this._valueInput, dateValue && formatLocaleDate(dateValue) || "");
65 | }
66 |
67 | _createValueInput(input) {
68 | const valueInput = DOCUMENT.createElement("input");
69 | valueInput.style.display = "none";
70 | valueInput.setAttribute("hidden", "");
71 | valueInput.disabled = input.disabled;
72 | if (input.name) {
73 | valueInput.name = input.name;
74 | input.removeAttribute("name");
75 | }
76 | if (input.value) {
77 | valueInput.value = valueInput.defaultValue = input.value;
78 | }
79 | if (input.hasAttribute("form")) {
80 | valueInput.setAttribute("form", input.getAttribute("form"));
81 | }
82 | return input.parentNode.insertBefore(valueInput, input.nextSibling);
83 | }
84 |
85 | _createFormatOptions() {
86 | const locale = this._input.lang || HTML.lang;
87 | let formatString = this._input.getAttribute("data-format");
88 | if (!formatString && formatMeta) {
89 | formatString = formatMeta.content;
90 | }
91 | return getFormatOptions(locale, formatString);
92 | }
93 |
94 | _onKeydown(event) {
95 | const key = event.key;
96 | if (key === "Enter") {
97 | if (!this._pickerApi.isHidden()) {
98 | event.preventDefault();
99 | this._hidePicker();
100 | }
101 | } else if (key === " ") {
102 | // disable scroll change
103 | event.preventDefault();
104 |
105 | this._showPicker();
106 | } else if (key === "Backspace") {
107 | // prevent browser back navigation
108 | event.preventDefault();
109 |
110 | this._input.value = "";
111 | this._pickerApi.reset();
112 | this._pickerApi.render(new Date());
113 | } else {
114 | let offset = 0;
115 | if (key === "ArrowDown" || key === "Down") {
116 | offset = 7;
117 | } else if (key === "ArrowUp" || key === "Up") {
118 | offset = -7;
119 | } else if (key === "ArrowLeft" || key === "Left") {
120 | offset = -1;
121 | } else if (key === "ArrowRight" || key === "Right") {
122 | offset = 1;
123 | }
124 | if (!offset) return;
125 | // disable scroll change on arrows
126 | event.preventDefault();
127 |
128 | const captionDate = this._pickerApi.getCaptionDate();
129 | if (this._pickerApi.isAdvancedMode()) {
130 | if (Math.abs(offset) === 7) {
131 | captionDate.setMonth(captionDate.getMonth() + offset / 7);
132 | } else {
133 | captionDate.setFullYear(captionDate.getFullYear() + offset);
134 | }
135 | } else {
136 | captionDate.setDate(captionDate.getDate() + offset);
137 | }
138 | if (this._pickerApi.isValidValue(captionDate)) {
139 | this._input.valueAsDate = captionDate;
140 | this._pickerApi.render(captionDate);
141 | }
142 | }
143 | }
144 |
145 | _showPicker() {
146 | if (!this._pickerApi) {
147 | this._pickerApi = new DatePickerImpl(this._input, this._formatOptions);
148 | } else {
149 | this._pickerApi.show();
150 | }
151 | }
152 |
153 | _hidePicker() {
154 | this._pickerApi.hide();
155 | }
156 | }
157 |
--------------------------------------------------------------------------------
/src/intl.js:
--------------------------------------------------------------------------------
1 | const INTL_SUPPORTED = (function() {
2 | try {
3 | new Date().toLocaleString("_");
4 | } catch (err) {
5 | return err instanceof RangeError;
6 | }
7 | return false;
8 | }());
9 |
10 | export function parseLocaleDate(value) {
11 | const [year, month, date] = (value || "?").split(/\D/).map((s) => parseInt(s));
12 | // set hours to 12 because otherwise Safari doesn't return
13 | // correct result string for toLocaleString calls
14 | const dateValue = new Date(year, month - 1, date, 12, 0);
15 | return isNaN(dateValue.getTime()) ? null : dateValue;
16 | }
17 |
18 | export function formatLocaleDate(date) {
19 | return [
20 | date.getFullYear(),
21 | ("0" + (date.getMonth() + 1)).slice(-2),
22 | ("0" + date.getDate()).slice(-2)
23 | ].join("-");
24 | }
25 |
26 | export function getFormatOptions(locale, formatString) {
27 | if (!INTL_SUPPORTED) return {};
28 |
29 | let dateTimeFormat;
30 | try {
31 | // We perform severals checks here:
32 | // 1) verify lang attribute is supported by browser
33 | // 2) verify format options are valid
34 | dateTimeFormat = new Intl.DateTimeFormat(locale, JSON.parse(formatString || "{}"));
35 | } catch (err) {
36 | console.warn("Fallback to default date format because of error:", err);
37 | // fallback to default date format options
38 | dateTimeFormat = new Intl.DateTimeFormat();
39 | }
40 | return dateTimeFormat.resolvedOptions();
41 | }
42 |
43 | export function localeWeekday(value, options) {
44 | const date = new Date(1971, 1, value + (options.hour12 ? 0 : 1));
45 | /* istanbul ignore else */
46 | if (INTL_SUPPORTED) {
47 | return date.toLocaleString(options.locale, {weekday: "short"});
48 | } else {
49 | return date.toUTCString().split(",")[0].slice(0, 2);
50 | }
51 | }
52 |
53 | export function localeMonth(value, options) {
54 | const date = new Date(25e8 * (value + 1));
55 | /* istanbul ignore else */
56 | if (INTL_SUPPORTED) {
57 | return date.toLocaleString(options.locale, {month: "short"});
58 | } else {
59 | return date.toUTCString().split(" ")[2];
60 | }
61 | }
62 |
63 | export function localeDate(value, options) {
64 | if (INTL_SUPPORTED) {
65 | return value.toLocaleString(options.locale, options);
66 | } else {
67 | return value.toUTCString().split(" ").slice(0, 4).join(" ");
68 | }
69 | }
70 |
71 | export function localeMonthYear(value, options) {
72 | if (INTL_SUPPORTED) {
73 | return value.toLocaleString(options.locale, {month: "long", year: "numeric"});
74 | } else {
75 | return value.toUTCString().split(" ").slice(2, 4).join(" ");
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/picker.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --color-background: #fff;
3 | --color-graytext: #ccc;
4 | --color-hover: #ececec;
5 | --color-selected: #007bff;
6 |
7 | --calendar-day-height: calc(100vh / 8);
8 | --calendar-day-width: calc(100vw / 7);
9 | --calendar-inner-padding: 4px;
10 | }
11 |
12 | body {
13 | cursor: default;
14 | font-family: system-ui;
15 | margin: 0;
16 | }
17 |
18 | [aria-labelledby] {
19 | bottom: 0;
20 | height: calc(100vh - var(--calendar-day-height));
21 | left: 0;
22 | position: absolute;
23 | text-align: center;
24 | width: 100%;
25 |
26 | &[aria-hidden="true"] {
27 | visibility: hidden;
28 | }
29 | }
30 |
31 | header {
32 | display: block;
33 | height: var(--calendar-day-height);
34 | line-height: var(--calendar-day-height);
35 | overflow: hidden;
36 | text-align: center;
37 | }
38 |
39 | [role="button"] {
40 | text-align: center;
41 | transition: transform 75ms ease-in;
42 | width: var(--calendar-day-width);
43 |
44 | &[rel="prev"] {
45 | float: left;
46 |
47 | &:active {
48 | transform: translateX(-2px);
49 | }
50 | }
51 |
52 | &[rel="next"] {
53 | float: right;
54 |
55 | &:active {
56 | transform: translateX(2px);
57 | }
58 | }
59 |
60 | & svg {
61 | pointer-events: none;
62 | width: 16px;
63 | height: 100%;
64 | }
65 |
66 | @media (hover: hover) {
67 | &:hover {
68 | transform: scale(1.2);
69 | }
70 | }
71 | }
72 |
73 | [aria-live="polite"] {
74 | border: 1px dotted transparent;
75 | color: var(--color-selected);
76 | font-weight: bold;
77 | margin: auto 0;
78 | overflow: hidden;
79 | text-align: center;
80 | text-overflow: ellipsis;
81 | white-space: nowrap;
82 |
83 | @media (hover: hover) {
84 | &:hover {
85 | border-bottom-color: inherit;
86 | }
87 | }
88 | }
89 |
90 | table {
91 | border-spacing: 0;
92 | table-layout: fixed;
93 | }
94 |
95 | th {
96 | box-sizing: border-box;
97 | height: var(--calendar-day-height);
98 | padding-bottom: calc(2 * var(--calendar-inner-padding));
99 | vertical-align: middle;
100 | }
101 |
102 | td {
103 | border-radius: var(--border-radius);
104 | padding: 0;
105 |
106 | &:not([aria-selected]) {
107 | color: var(--color-graytext);
108 | }
109 |
110 | &[aria-current="date"] {
111 | font-weight: bold;
112 | }
113 |
114 | &[aria-disabled="true"] {
115 | background-color: var(--color-hover);
116 | border-radius: 0;
117 | color: var(--color-graytext);
118 | cursor: not-allowed;
119 | }
120 | }
121 |
122 | #months, #years {
123 | box-sizing: border-box;
124 | float: left;
125 | height: 100%;
126 | line-height: calc((100vh - var(--calendar-day-height)) / 12);
127 | list-style: none;
128 | margin: 0;
129 | overflow-x: hidden;
130 | overflow-y: scroll;
131 | padding: 0 var(--calendar-inner-padding);
132 | width: 50%;
133 | }
134 |
135 | [data-date], [data-month], [data-year] {
136 | @media (hover: hover) {
137 | &:hover {
138 | background-color: var(--color-hover);
139 | }
140 | }
141 |
142 | &[aria-selected="true"] {
143 | background-color: var(--color-selected);
144 | color: var(--color-background);
145 | }
146 | }
147 |
--------------------------------------------------------------------------------
/src/picker.js:
--------------------------------------------------------------------------------
1 | import PICKER_CSS from "./picker.css";
2 | import {$, DOCUMENT, HTML, IE, repeat, svgIcon, injectStyles} from "./util.js";
3 | import {parseLocaleDate, formatLocaleDate, localeWeekday, localeMonth, localeMonthYear} from "./intl.js";
4 |
5 | export class DatePickerImpl {
6 | constructor(input, formatOptions) {
7 | this._input = input;
8 | this._formatOptions = formatOptions;
9 |
10 | this._initPicker();
11 | }
12 |
13 | _initPicker() {
14 | this._picker = DOCUMENT.createElement("dateinput-picker");
15 | this._picker.setAttribute("aria-hidden", true);
16 | this._input.parentNode.insertBefore(this._picker, this._input);
17 |
18 | const object = DOCUMENT.createElement("object");
19 | object.type = "text/html";
20 | object.width = "100%";
21 | object.height = "100%";
22 | // non-IE: must be BEFORE the element added to the document
23 | if (!IE) {
24 | object.data = "about:blank";
25 | }
26 | // load content when