Skip to content

Commit 3825574

Browse files
steveharrisonsteveharrison
committed
Added Date of Birth field example.
1 parent faf4d23 commit 3825574

13 files changed

+2915
-0
lines changed

‎date-of-birth-field/.gitignore

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/build
11+
12+
# misc
13+
.DS_Store
14+
.env.local
15+
.env.development.local
16+
.env.test.local
17+
.env.production.local
18+
19+
npm-debug.log*
20+
yarn-debug.log*
21+
yarn-error.log*

‎date-of-birth-field/README.md

+2,434
Large diffs are not rendered by default.

‎date-of-birth-field/package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "an-app",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"classnames": "^2.2.5",
7+
"react": "^16.2.0",
8+
"react-dom": "^16.2.0",
9+
"react-scripts": "1.1.1"
10+
},
11+
"scripts": {
12+
"start": "react-scripts start",
13+
"build": "react-scripts build",
14+
"test": "react-scripts test --env=jsdom",
15+
"eject": "react-scripts eject"
16+
},
17+
"homepage" : "https://steveatq.github.io/date-of-birth-field"
18+
}

‎date-of-birth-field/public/favicon.ico

3.78 KB
Binary file not shown.

‎date-of-birth-field/public/index.html

+52
Large diffs are not rendered by default.

‎date-of-birth-field/public/manifest.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
}
10+
],
11+
"start_url": "./index.html",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎date-of-birth-field/src/App.css

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
body {
2+
/*background-color: grey;*/
3+
}
4+
5+
.App {
6+
text-align: center;
7+
}
8+
9+
.App-logo {
10+
animation: App-logo-spin infinite 20s linear;
11+
height: 80px;
12+
}
13+
14+
.App-header {
15+
background-color: #222;
16+
height: 150px;
17+
padding: 20px;
18+
color: white;
19+
}
20+
21+
.App-title {
22+
font-size: 1.5em;
23+
}
24+
25+
.App-intro {
26+
font-size: large;
27+
}
28+
29+
@keyframes App-logo-spin {
30+
from { transform: rotate(0deg); }
31+
to { transform: rotate(360deg); }
32+
}
33+
34+
35+
.container {
36+
display: inline-block;
37+
/* border: 1px solid grey;
38+
*/ -webkit-appearance: none;
39+
-moz-appearance: none;
40+
appearance: none;
41+
border: 2px solid #dadada;
42+
border-radius: 0;
43+
box-sizing: border-box;
44+
color: #323232;
45+
font-size: 18px;
46+
height: 48px;
47+
line-height: 25.5px;
48+
background: white;
49+
50+
51+
}
52+
53+
input {
54+
border: 2px solid grey;
55+
border: none;
56+
width: 50px;
57+
padding: 10.5px 0 11px 14px;
58+
background: transparent;
59+
}
60+
61+
input:focus {
62+
outline: 0;
63+
}
64+
65+
.container.focused {
66+
outline: 0;
67+
border-color: #8de2e0;
68+
box-shadow: 0 0 0 1px #8de2e0 inset;
69+
}
70+
71+
/*input:nth-of-type(1) {
72+
border-left: 2px solid grey;
73+
border-top: 2px solid grey;
74+
border-bottom: 2px solid grey;
75+
}
76+
77+
/*input:focus {
78+
border-color: #8de2e0;
79+
}
80+
*/
81+
/*input:nth-of-type(2) {
82+
border-top: 2px solid grey;
83+
border-bottom: 2px solid grey;
84+
}
85+
86+
input:nth-of-type(3) {
87+
border-right: 2px solid grey;
88+
border-top: 2px solid grey;
89+
border-bottom: 2px solid grey;
90+
}
91+
*/
92+
/*input:focus {
93+
outline: 0;
94+
border-color: #8de2e0;
95+
box-shadow: 0 0 0 1px #8de2e0 inset;
96+
}*/
97+
98+
input[type=number]::-webkit-inner-spin-button,
99+
input[type=number]::-webkit-outer-spin-button {
100+
-webkit-appearance: none;
101+
margin: 0;
102+
}
103+
104+
.year {
105+
width: 4rem;
106+
}

‎date-of-birth-field/src/App.js

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import React, { Component } from 'react';
2+
import logo from './logo.svg';
3+
import './App.css';
4+
import classnames from 'classnames';
5+
6+
class App extends Component {
7+
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
dayValue: '',
12+
monthValue: '',
13+
yearValue: '',
14+
isFocused: false
15+
};
16+
}
17+
18+
handleDayInput = (event) => {
19+
const { value } = event.target;
20+
if (value.length <= 2) {
21+
this.setState({ dayValue: value });
22+
23+
if (value.length === 2) {
24+
console.log('Time to focus the month input!');
25+
this.monthInput.focus();
26+
this.monthInput.select();
27+
}
28+
}
29+
}
30+
31+
handleMonthInput = (event) => {
32+
const { value } = event.target;
33+
if (value.length <= 2) {
34+
this.setState({ monthValue: value });
35+
36+
if (value.length === 2) {
37+
this.yearInput.focus();
38+
this.yearInput.select();
39+
}
40+
}
41+
}
42+
43+
handleYearInput = (event) => {
44+
const { value } = event.target;
45+
if (value.length <= 4) {
46+
this.setState({ yearValue: value });
47+
}
48+
}
49+
50+
handleClick = (event) => {
51+
event.target.select();
52+
}
53+
54+
handleFocus = (event) => {
55+
const { value } = event.target;
56+
console.log('focus in');
57+
event.target.select();
58+
this.setState({ isFocused: true });
59+
}
60+
61+
handleBlur = (event) => {
62+
this.setState({ isFocused: false });
63+
console.log('blur');
64+
}
65+
66+
handleKeyUp = (event) => {
67+
68+
}
69+
70+
render() {
71+
return (
72+
<div className="App">
73+
<div
74+
className={classnames('container', { 'focused': this.state.isFocused })}
75+
onFocus={(event) => this.handleFocus(event)}
76+
onBlur={(event) => this.handleBlur(event)}
77+
>
78+
<input
79+
type="number"
80+
placeholder="DD"
81+
value={this.state.dayValue}
82+
onChange={(event) => this.handleDayInput(event)}
83+
onClick={(event) => this.handleClick(event)}
84+
onKeyUp={(event) => this.handleKeyUp(event)}
85+
ref={(element) => { this.dayInput = element; }}
86+
aria-label="Date of Birth Day"
87+
/>
88+
89+
<span className="separator" aria-hidden="true">/</span>
90+
91+
<input
92+
id="month"
93+
type="number"
94+
placeholder="MM"
95+
value={this.state.monthValue}
96+
onChange={(event) => this.handleMonthInput(event)}
97+
onClick={(event) => this.handleClick(event)}
98+
pattern="\d*"
99+
aria-label="Date of Birth Month"
100+
ref={(element) => { this.monthInput = element; }}
101+
/>
102+
103+
<span className="separator" aria-hidden="true">/</span>
104+
105+
<input
106+
type="number"
107+
placeholder="YYYY"
108+
value={this.state.yearValue}
109+
onChange={(event) => this.handleYearInput(event)}
110+
onClick={(event) => this.handleClick(event)}
111+
pattern="\d*"
112+
aria-label="Date of Birth Year"
113+
ref={(element) => { this.yearInput = element; }}
114+
className="year"
115+
/>
116+
</div>
117+
<div className="inline-error">Invalid date</div>
118+
</div>
119+
);
120+
}
121+
}
122+
123+
export default App;

‎date-of-birth-field/src/App.test.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<App />, div);
8+
ReactDOM.unmountComponentAtNode(div);
9+
});

‎date-of-birth-field/src/index.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
}

‎date-of-birth-field/src/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import './index.css';
4+
import App from './App';
5+
import registerServiceWorker from './registerServiceWorker';
6+
7+
ReactDOM.render(<App />, document.getElementById('root'));
8+
registerServiceWorker();

‎date-of-birth-field/src/logo.svg

+7
Loading

0 commit comments

Comments
 (0)