Skip to content

Commit c8b563a

Browse files
codeclowncodeclown
authored
Merge pull request #1 from codeclown/ci-and-more
Add eslint, CI, example.html
2 parents c3a8e48 + b7ca6a4 commit c8b563a

File tree

9 files changed

+892
-64
lines changed

9 files changed

+892
-64
lines changed

‎.eslintrc.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
commonjs: true,
5+
},
6+
parserOptions: {
7+
ecmaVersion: 5,
8+
},
9+
extends: 'eslint:recommended',
10+
rules: {
11+
'func-names': ['error', 'always'],
12+
},
13+
overrides: [
14+
{
15+
files: ['src/react.js'],
16+
parserOptions: {
17+
ecmaVersion: 12,
18+
},
19+
},
20+
],
21+
};

‎.github/workflows/ci.yml

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
name: CI
2+
on: [push, pull_request]
3+
jobs:
4+
checks:
5+
runs-on: ubuntu-latest
6+
strategy:
7+
matrix:
8+
node-version: [14.x]
9+
steps:
10+
- uses: actions/checkout@v2
11+
- name: Use Node.js ${{ matrix.node-version }}
12+
uses: actions/setup-node@v1
13+
with:
14+
node-version: ${{ matrix.node-version }}
15+
- run: yarn --frozen-lockfile
16+
- run: yarn test

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ someElement.appendChild(picker.element);
4242

4343
See [API](#api).
4444

45+
See also [example.html](./example.html).
46+
4547
### React
4648

4749
```jsx

‎example.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>NativeDatepicker example</title>
6+
<style>
7+
.NativeDatepicker {
8+
width: 20px;
9+
height: 20px;
10+
background: transparent url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUgMHYxaDhWMGgxdjFoMmEyIDIgMCAwMTIgMnYxNGEyIDIgMCAwMS0yIDJIMmEyIDIgMCAwMS0yLTJWM2EyIDIgMCAwMTItMmgyVjBoMXptMTIgN0gxdjEwYTEgMSAwIDAwMSAxaDE0YTEgMSAwIDAwMS0xVjd6TTQgMTZ2MUgydi0xaDJ6bTMgMHYxSDV2LTFoMnptMyAwdjFIOHYtMWgyem0tNi0ydjFIMnYtMWgyem0zIDB2MUg1di0xaDJ6bTMgMHYxSDh2LTFoMnptMyAwdjFoLTJ2LTFoMnptMyAwdjFoLTJ2LTFoMnpNNCAxMnYxSDJ2LTFoMnptMyAwdjFINXYtMWgyem0zIDB2MUg4di0xaDJ6bTMgMHYxaC0ydi0xaDJ6bTMgMHYxaC0ydi0xaDJ6TTQgMTB2MUgydi0xaDJ6bTMgMHYxSDV2LTFoMnptMyAwdjFIOHYtMWgyem0zIDB2MWgtMnYtMWgyem0zIDB2MWgtMnYtMWgyek03IDh2MUg1VjhoMnptMyAwdjFIOFY4aDJ6bTMgMHYxaC0yVjhoMnptMyAwdjFoLTJWOGgyek00IDJIMmExIDEgMCAwMC0xIDF2M2gxNlYzYTEgMSAwIDAwLTEtMWgtMnYzaC0xVjJINXYzSDRWMnoiIGZpbGw9IiNBMEFFQzAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==') no-repeat center center;
11+
vertical-align: middle;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<input type="text">
17+
<script src="src/index.js"></script>
18+
<script>
19+
const value = '2020-11-09 12:13:00';
20+
const textInput = document.querySelector('input[type="text"]');
21+
textInput.value = value;
22+
const datepicker = new NativeDatepicker({
23+
initialValue: value,
24+
onChange: newValue => {
25+
textInput.value = newValue;
26+
}
27+
});
28+
textInput.onchange = event => {
29+
datepicker.setValue(event.target.value);
30+
};
31+
textInput.parentNode.appendChild(datepicker.element);
32+
</script>
33+
</body>
34+
</html>

‎package.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,11 @@
44
"main": "src/index.js",
55
"repository": "https://github.com/codeclown/native-datepicker",
66
"author": "Martti Laine <martti@marttilaine.com>",
7-
"license": "ISC"
7+
"license": "ISC",
8+
"devDependencies": {
9+
"eslint": "^7.13.0"
10+
},
11+
"scripts": {
12+
"test": "eslint src"
13+
}
814
}

‎src/index.js

Lines changed: 85 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,52 @@
1-
const classNames = {
2-
wrapper: 'NativeDatepicker',
3-
input: 'NativeDatepicker__input',
4-
};
1+
/* global define */
2+
(function nativeDatepickerFactory1(factory) {
3+
if (typeof exports === 'object' && typeof module === 'object') {
4+
module.exports = factory();
5+
} else if (typeof define === 'function' && define.amd) {
6+
define(factory);
7+
} else {
8+
window['NativeDatepicker'] = factory();
9+
}
10+
})(function nativeDatepickerFactory2() {
11+
var classNames = {
12+
wrapper: 'NativeDatepicker',
13+
input: 'NativeDatepicker__input',
14+
};
515

6-
const dateRegex = /\d{4}-\d{2}-\d{2}/;
16+
var dateRegex = /\d{4}-\d{2}-\d{2}/;
717

8-
class NativeDatepicker {
9-
constructor(options) {
18+
function NativeDatepicker(options) {
1019
this.options = Object.assign(
1120
{
1221
win: typeof window !== 'undefined' ? window : undefined,
1322
existingElement: null,
14-
onChange: () => {},
23+
onChange: function defaultOnChange() {},
24+
initialValue: '',
1525
},
1626
options
1727
);
1828

1929
this.addStylesheet();
2030
this.buildDom();
31+
this.setValue(this.options.initialValue);
2132
}
2233

23-
setValue(fullString) {
24-
const match = fullString.match(dateRegex);
34+
NativeDatepicker.prototype.setValue = function setValue(fullString) {
35+
var match = fullString.match(dateRegex);
2536
if (match) {
2637
this.fullValue = fullString;
2738
this.dateValue = match[0];
2839
this.dateInputElement.value = match[0];
2940
}
30-
}
41+
};
3142

32-
buildDom() {
43+
NativeDatepicker.prototype.buildDom = function buildDom() {
3344
// DOM structure:
34-
// <span class="datepicker-toggle">
35-
// <!-- optional DOM nodes from user -->
36-
// <input type="date" class="datepicker-input">
45+
// <span class="NativeDatepicker">
46+
// <input type="date" class="NativeDatepicker__input">
3747
// </span>
3848

39-
const element =
49+
var element =
4050
this.options.existingElement ||
4151
this.options.win.document.createElement('span');
4252
element.classList.add(classNames.wrapper);
@@ -48,63 +58,76 @@ class NativeDatepicker {
4858
element.style.display = 'none';
4959
}
5060

51-
const dateInputElement = this.options.win.document.createElement('input');
61+
var dateInputElement = this.options.win.document.createElement('input');
5262
dateInputElement.type = 'date';
5363
dateInputElement.classList.add(classNames.input);
5464
element.appendChild(dateInputElement);
5565
this.dateInputElement = dateInputElement;
5666

57-
dateInputElement.addEventListener('change', () => {
58-
let newValue = this.fullValue.replace(dateRegex, dateInputElement.value);
59-
// Regex didn't match, fallback to setting the entire value
60-
if (!newValue.includes(dateInputElement.value)) {
61-
newValue = dateInputElement.value;
67+
var self = this;
68+
dateInputElement.addEventListener(
69+
'change',
70+
function onNativeDatepickerChange() {
71+
var newValue = self.fullValue.replace(
72+
dateRegex,
73+
dateInputElement.value
74+
);
75+
// Regex didn't match, fallback to setting the entire value
76+
if (!newValue.includes(dateInputElement.value)) {
77+
newValue = dateInputElement.value;
78+
}
79+
dateInputElement.value = self.dateValue;
80+
self.options.onChange(newValue);
6281
}
63-
dateInputElement.value = this.dateValue;
64-
this.options.onChange(newValue);
65-
});
66-
}
82+
);
83+
};
6784

68-
addStylesheet() {
69-
if (!this.options.win.document.querySelector('style#nativeDatepicker')) {
70-
const style = this.options.win.document.createElement('style');
71-
style.id = 'nativeDatepicker';
72-
style.textContent = `
73-
.${classNames.wrapper} {
74-
display: inline-block;
75-
position: relative;
76-
}
77-
.${classNames.input} {
78-
position: absolute;
79-
left: 0;
80-
top: 0;
81-
width: 100%;
82-
height: 100%;
83-
opacity: 0;
84-
cursor: pointer;
85-
box-sizing: border-box;
86-
}
87-
.${classNames.input}::-webkit-calendar-picker-indicator {
88-
position: absolute;
89-
left: 0;
90-
top: 0;
91-
width: 100%;
92-
height: 100%;
93-
margin: 0;
94-
padding: 0;
95-
cursor: pointer;
96-
}
97-
`;
85+
NativeDatepicker.prototype.addStylesheet = function addStylesheet() {
86+
var styleId = 'NativeDatepickerStyles';
87+
if (!this.options.win.document.querySelector('style#' + styleId)) {
88+
var style = this.options.win.document.createElement('style');
89+
style.id = styleId;
90+
style.textContent =
91+
'.' +
92+
classNames.wrapper +
93+
' {' +
94+
' display: inline-block;' +
95+
' position: relative;' +
96+
'}' +
97+
'.' +
98+
classNames.input +
99+
' {' +
100+
' position: absolute;' +
101+
' left: 0;' +
102+
' top: 0;' +
103+
' width: 100%;' +
104+
' height: 100%;' +
105+
' opacity: 0;' +
106+
' cursor: pointer;' +
107+
' box-sizing: border-box;' +
108+
'}' +
109+
'.' +
110+
classNames.input +
111+
'::-webkit-calendar-picker-indicator {' +
112+
' position: absolute;' +
113+
' left: 0;' +
114+
' top: 0;' +
115+
' width: 100%;' +
116+
' height: 100%;' +
117+
' margin: 0;' +
118+
' padding: 0;' +
119+
' cursor: pointer;' +
120+
'}';
98121
this.options.win.document.head.appendChild(style);
99122
}
100-
}
123+
};
101124

102-
isSupported() {
103-
const input = this.options.win.document.createElement('input');
125+
NativeDatepicker.prototype.isSupported = function isSupported() {
126+
var input = this.options.win.document.createElement('input');
104127
input.type = 'date';
105128
input.value = 'invalid date value';
106129
return input.value !== 'invalid date value';
107-
}
108-
}
130+
};
109131

110-
module.exports = NativeDatepicker;
132+
return NativeDatepicker;
133+
});

‎src/react.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ const NativeDatepicker = ({
1313
if (spanRef.current) {
1414
const picker = new NativeDatepickerClass({
1515
existingElement: spanRef.current,
16+
initialValue: value,
1617
onChange,
1718
});
18-
picker.setValue(value);
1919
setDatepicker(picker);
2020
}
2121
}, [spanRef.current]);

0 commit comments

Comments
 (0)