Skip to content

Commit 4de50de

Browse files
author
Edoardo Colombo
committed
Added dev setup.
1 parent 795f65d commit 4de50de

File tree

5 files changed

+230
-1
lines changed

5 files changed

+230
-1
lines changed

‎example/example.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
var DateTime = require('../DateTime.js');
2+
var React = require('react');
3+
4+
React.render(
5+
React.createElement(DateTime, { timeFormat: true }),
6+
document.getElementById('datetime')
7+
);

‎example/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>DateTime</title>
5+
<link rel="stylesheet" type="text/css" href="react-datetime.css">
6+
</head>
7+
<body>
8+
<div id="datetime">
9+
</div>
10+
11+
<script src="http://localhost:8080/webpack-dev-server.js"></script>
12+
<script src="bundle.js"></script>
13+
</body>
14+
</html>

‎example/react-datetime.css

+190
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
/*!
2+
* https://github.com/arqex/react-datetime
3+
*/
4+
5+
.rdt {
6+
position: relative;
7+
}
8+
.rdtPicker {
9+
display: none;
10+
position: absolute;
11+
width: 250px;
12+
padding: 4px;
13+
margin-top: 1px;
14+
z-index: 99999 !important;
15+
background: #fff;
16+
box-shadow: 0 1px 3px rgba(0,0,0,.1);
17+
border: 1px solid #f9f9f9;
18+
}
19+
.rdtOpen .rdtPicker {
20+
display: block;
21+
}
22+
.rdtStatic .rdtPicker {
23+
box-shadow: none;
24+
position: static;
25+
}
26+
27+
.rdtPicker .rdtTimeToggle {
28+
text-align: center;
29+
}
30+
31+
.rdtPicker table {
32+
width: 100%;
33+
margin: 0;
34+
}
35+
.rdtPicker td,
36+
.rdtPicker th {
37+
text-align: center;
38+
height: 28px;
39+
}
40+
.rdtPicker td.rdtToday:hover,
41+
.rdtPicker td.rdtHour:hover,
42+
.rdtPicker td.rdtMinute:hover,
43+
.rdtPicker td.rdtSecond:hover,
44+
.rdtPicker .rdtTimeToggle:hover {
45+
background: #eeeeee;
46+
cursor: pointer;
47+
}
48+
.rdtPicker td.rdtOld,
49+
.rdtPicker td.rdtNew {
50+
color: #999999;
51+
}
52+
.rdtPicker td.rdtToday {
53+
position: relative;
54+
}
55+
.rdtPicker td.rdtToday:before {
56+
content: '';
57+
display: inline-block;
58+
border-left: 7px solid transparent;
59+
border-bottom: 7px solid #428bca;
60+
border-top-color: rgba(0, 0, 0, 0.2);
61+
position: absolute;
62+
bottom: 4px;
63+
right: 4px;
64+
}
65+
.rdtPicker td.rdtActive,
66+
.rdtPicker td.rdtActive:hover {
67+
background-color: #428bca;
68+
color: #fff;
69+
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
70+
}
71+
.rdtPicker td.rdtActive.rdtToday:before {
72+
border-bottom-color: #fff;
73+
}
74+
.rdtPicker td.rdtDisabled,
75+
.rdtPicker td.rdtDisabled:hover {
76+
background: none;
77+
color: #999999;
78+
cursor: not-allowed;
79+
}
80+
81+
.rdtPicker td span.rdtOld {
82+
color: #999999;
83+
}
84+
.rdtPicker td span.rdtDisabled,
85+
.rdtPicker td span.rdtDisabled:hover {
86+
background: none;
87+
color: #999999;
88+
cursor: not-allowed;
89+
}
90+
.rdtPicker th {
91+
border-bottom: 1px solid #f9f9f9;
92+
}
93+
.rdtPicker .dow {
94+
width: 14.2857%;
95+
border-bottom: none;
96+
}
97+
.rdtPicker th.rdtSwitch {
98+
width: 100px;
99+
}
100+
.rdtPicker th.rdtNext,
101+
.rdtPicker th.rdtPrev {
102+
font-size: 21px;
103+
vertical-align: top;
104+
}
105+
.rdtPicker th.rdtDisabled,
106+
.rdtPicker th.rdtDisabled:hover {
107+
background: none;
108+
color: #999999;
109+
cursor: not-allowed;
110+
}
111+
.rdtPicker thead tr:first-child th {
112+
cursor: pointer;
113+
}
114+
.rdtPicker thead tr:first-child th:hover {
115+
background: #eeeeee;
116+
}
117+
118+
.rdtPicker tfoot{
119+
border-top: 1px solid #f9f9f9;
120+
}
121+
122+
.rdtPicker button {
123+
border: none;
124+
background: none;
125+
cursor: pointer;
126+
}
127+
.rdtPicker button:hover {
128+
background-color: #eee;
129+
}
130+
131+
.rdtPicker thead button {
132+
width: 100%;
133+
height: 100%;
134+
}
135+
136+
td.rdtMonth,
137+
td.rdtYear {
138+
height: 50px;
139+
width: 25%;
140+
cursor: pointer;
141+
}
142+
td.rdtMonth:hover,
143+
td.rdtYear:hover {
144+
background: #eee;
145+
}
146+
147+
.rdtCounters {
148+
display: inline-block;
149+
}
150+
151+
.rdtCounters > div{
152+
float: left;
153+
}
154+
155+
.rdtCounter {
156+
height: 100px;
157+
}
158+
159+
.rdtCounter {
160+
width: 40px;
161+
}
162+
163+
.rdtCounterSeparator {
164+
line-height: 100px;
165+
}
166+
167+
.rdtCounter .rdtBtn {
168+
height: 40%;
169+
line-height: 40px;
170+
cursor: pointer;
171+
}
172+
.rdtCounter .rdtBtn:hover {
173+
background: #eee;
174+
}
175+
.rdtCounter .rdtCount {
176+
height: 20%;
177+
font-size: 1.2em;
178+
}
179+
180+
.rdtMilli {
181+
vertical-align: middle;
182+
padding-left: 8px;
183+
width: 48px;
184+
}
185+
186+
.rdtMilli input {
187+
width: 100%;
188+
font-size: 1.2em;
189+
margin-top: 37px;
190+
}

‎example/webpack.config.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
var path = require('path');
2+
3+
module.exports = {
4+
entry: [
5+
'webpack/hot/dev-server',
6+
'webpack-dev-server/client?http://localhost:8080',
7+
path.resolve(__dirname, 'example.js')
8+
],
9+
10+
output: {
11+
path: path.resolve(__dirname, '.'),
12+
filename: 'bundle.js'
13+
},
14+
resolve: {
15+
extensions: ['', '.js']
16+
}
17+
}

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"main": "./DateTime.js",
1111
"scripts": {
1212
"build": "./node_modules/.bin/gulp.cmd",
13-
"test": "node node_modules/mocha/bin/mocha tests"
13+
"test": "node node_modules/mocha/bin/mocha tests",
14+
"dev": "webpack-dev-server --config example/webpack.config.js --devtool eval --progress --colors --hot --content-base example"
1415
},
1516
"keywords": [
1617
"react",

0 commit comments

Comments
 (0)