Skip to content

Commit 8b74c3b

Browse files
g1ebg1eb
committed
Added initial source files for the datetime input directive.
1 parent 02da61e commit 8b74c3b

File tree

5 files changed

+475
-0
lines changed

5 files changed

+475
-0
lines changed

‎index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html ng-app="ExampleApp">
3+
<head>
4+
<title>Datetime input UI element for AngularJS</title>
5+
<link rel="stylesheet" type="text/css" href="src/datetime-input.css">
6+
<meta name="viewport" content="width=500,user-scalable=0">
7+
<style>
8+
body {
9+
box-sizing: border-box;
10+
width: 500px;
11+
height: 100vh;
12+
min-height: 100vh;
13+
margin: 0;
14+
padding: 15px;
15+
}
16+
</style>
17+
</head>
18+
<body ng-controller="MainCtrl">
19+
20+
<datetime-input datetime="datetime" handler="print(datetime)"></datetime-input>
21+
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js" charset="utf-8"></script>
23+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js" charset="utf-8"></script>
24+
<script src="src/datetime-input.js"></script>
25+
26+
<script>
27+
angular.module('ExampleApp', ['g1b.datetime-input']).
28+
controller('MainCtrl', function ($scope) {
29+
$scope.datetime = moment();
30+
$scope.print = function (datetime) {
31+
console.log('datetime', datetime);
32+
};
33+
});
34+
</script>
35+
</body>
36+
</html>

‎index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
require('./dist/datetime-input.js');
2+
module.exports = 'datetime-input';

‎src/datetime-input.css

Lines changed: 314 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,314 @@
1+
/**
2+
* Datetime range styles
3+
*/
4+
.datetime-range {
5+
position: relative;
6+
width: 100%;
7+
height: auto;
8+
min-height: 4em;
9+
margin: 0;
10+
padding: 0;
11+
color: #444;
12+
font-size: 14px;
13+
font-family: sans-serif;
14+
text-decoration: none;
15+
text-align: center;
16+
user-select: none;
17+
-ms-user-select: none;
18+
-moz-user-select: none;
19+
-khtml-user-select: none;
20+
-webkit-user-select: none;
21+
-webkit-touch-callout: none;
22+
-webkit-user-select: none;
23+
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
24+
}
25+
26+
27+
/**
28+
* Start and end datetime objects
29+
*/
30+
.datetime-range .datetime {
31+
cursor: pointer;
32+
position: absolute;
33+
left: 0;
34+
right: 0;
35+
height: 4em;
36+
background-color: #efefef;
37+
transition: background-color 0.25s ease-out;
38+
}
39+
.datetime-range .datetime .date {
40+
color: #777;
41+
font-size: 1em;
42+
line-height: 1em;
43+
margin-top: 0.5em;
44+
display: block;
45+
overflow: hidden;
46+
}
47+
.datetime-range .datetime .time {
48+
font-size: 1.5em;
49+
line-height: 1.75em;
50+
display: block;
51+
overflow: hidden;
52+
}
53+
.datetime-range .datetime.active,
54+
.datetime-range .datetime:hover {
55+
background-color: #ddd;
56+
}
57+
58+
59+
/**
60+
* Edit datetime popover
61+
*/
62+
.datetime-range .edit-popover {
63+
position: absolute;
64+
z-index: 5;
65+
top: 4.5em;
66+
width: 100%;
67+
height: auto;
68+
padding: 0;
69+
background-color: #efefef;
70+
border-radius: 0;
71+
border: 1px solid #aaa;
72+
box-sizing: border-box;
73+
}
74+
75+
76+
/**
77+
* Calendar
78+
*/
79+
.datetime-range .calendar-toggle {
80+
width: 100%;
81+
color: #777;
82+
font-size: 1.5em;
83+
line-height: 2em;
84+
cursor: pointer;
85+
transition: background-color 0.25s ease-out;
86+
}
87+
.datetime-range .calendar-toggle::before {
88+
content: "";
89+
display: block;
90+
position: absolute;
91+
background-color: #efefef;
92+
width: 1em;
93+
height: 1em;
94+
top: -0.55em;
95+
left: 47.5%;
96+
z-index: 2;
97+
border-color: #aaa;
98+
border-style: solid;
99+
border-width: 1px 1px 0 0;
100+
transform: rotate(-45deg);
101+
-moz-transform: rotate(-45deg);
102+
-ms-transform: rotate(-45deg);
103+
-o-transform: rotate(-45deg);
104+
-webkit-transform: rotate(-45deg);
105+
transition: background-color 0.25s ease-out;
106+
}
107+
.datetime-range .calendar-toggle:hover,
108+
.datetime-range .calendar-toggle:hover::before {
109+
background-color: #ddd;
110+
}
111+
.datetime-range .calendar .calendar-header {
112+
cursor: default;
113+
background-color: #fff;
114+
position: relative;
115+
width: 100%;
116+
font-size: 1.5em;
117+
line-height: 2em;
118+
}
119+
.datetime-range .calendar .calendar-header .arrow {
120+
display: inline-block;
121+
color: #ddd;
122+
cursor: pointer;
123+
line-height: 1.5em;
124+
font-size: 1.5em;
125+
}
126+
.datetime-range .calendar .calendar-header .arrow.arrow-left {
127+
position: absolute;
128+
left: 0;
129+
width: 2em;
130+
height: 100%;
131+
}
132+
.datetime-range .calendar .calendar-header .arrow.arrow-left::before {
133+
content: "";
134+
position: absolute;
135+
top: 15%;
136+
left: 25%;
137+
border-right: 0.75em solid #ddd;
138+
border-top: 0.5em solid transparent;
139+
border-bottom: 0.5em solid transparent;
140+
transition: border 0.25s ease-out;
141+
}
142+
.datetime-range .calendar .calendar-header .arrow.arrow-left:hover::before {
143+
border-right-color: #999;
144+
}
145+
.datetime-range .calendar .calendar-header .arrow.arrow-right {
146+
position: absolute;
147+
right: 0;
148+
width: 2em;
149+
height: 100%;
150+
}
151+
.datetime-range .calendar .calendar-header .arrow.arrow-right::before {
152+
content: "";
153+
position: absolute;
154+
top: 15%;
155+
right: 25%;
156+
border-left: 0.75em solid #ddd;
157+
border-top: 0.5em solid transparent;
158+
border-bottom: 0.5em solid transparent;
159+
transition: border 0.25s ease-out;
160+
}
161+
.datetime-range .calendar .calendar-header .arrow.arrow-right:hover::before {
162+
border-left-color: #999;
163+
}
164+
.datetime-range .calendar .calendar-body {
165+
padding: 0.5em 0;
166+
}
167+
.datetime-range .calendar .calendar-body .weekdays {
168+
cursor: default;
169+
display: flex;
170+
justify-content: space-between;
171+
color: #777;
172+
font-size: 1em;
173+
line-height: 2em;
174+
text-transform: uppercase;
175+
padding: 0 1em;
176+
}
177+
.datetime-range .calendar .calendar-body .weekdays .weekday {
178+
display: inline-block;
179+
width: 5em;
180+
height: 2.5em;
181+
}
182+
.datetime-range .calendar .calendar-body .weekdays .weekday {
183+
display: inline-block;
184+
}
185+
.datetime-range .calendar .calendar-body .week {
186+
display: flex;
187+
justify-content: space-between;
188+
color: #777;
189+
font-size: 1.25em;
190+
line-height: 2.65em;
191+
letter-spacing: 1px;
192+
padding: 0.5em 1em;
193+
}
194+
.datetime-range .calendar .calendar-body .week .date {
195+
display: inline-block;
196+
cursor: pointer;
197+
width: 2.5em;
198+
height: 2.5em;
199+
border-radius: 50%;
200+
transition: background-color 0.25s ease-out;
201+
}
202+
.datetime-range .calendar .calendar-body .week .date.current {
203+
color: #444;
204+
}
205+
.datetime-range .calendar .calendar-body .week .date:not(.active):hover {
206+
background-color: #ddd;
207+
}
208+
.datetime-range .calendar .calendar-body .week .date.active,
209+
.datetime-range .calendar .calendar-body .week .date.inactive.active {
210+
color: #efefef;
211+
background-color: rgba(255, 69, 0, 0.75);
212+
}
213+
.datetime-range .calendar .calendar-body .week .date.inactive {
214+
color: #aaa;
215+
}
216+
217+
218+
/**
219+
* Timer
220+
*/
221+
.datetime-range .timer {
222+
display: flex;
223+
justify-content: space-between;
224+
background-color: #fff;
225+
}
226+
.datetime-range .timer .timer-hours,
227+
.datetime-range .timer .timer-minutes,
228+
.datetime-range .timer .timer-seconds {
229+
cursor: default;
230+
width: 3em;
231+
display: inline-block;
232+
font-size: 3em;
233+
line-height: 1.5em;
234+
position: relative;
235+
}
236+
.datetime-range .timer .timer-hours .arrow,
237+
.datetime-range .timer .timer-minutes .arrow,
238+
.datetime-range .timer .timer-seconds .arrow {
239+
position: relative;
240+
color: #ddd;
241+
cursor: pointer;
242+
height: 1em;
243+
margin: 0 0.5em;
244+
line-height: 1em;
245+
font-size: 0.75em;
246+
}
247+
.datetime-range .timer .timer-hours .arrow.arrow-up::before,
248+
.datetime-range .timer .timer-minutes .arrow.arrow-up::before,
249+
.datetime-range .timer .timer-seconds .arrow.arrow-up::before {
250+
content: "";
251+
position: absolute;
252+
top: 50%;
253+
left: 35%;
254+
border-left: 0.5em solid transparent;
255+
border-right: 0.5em solid transparent;
256+
border-bottom: 0.5em solid #ddd;
257+
transition: border 0.25s ease-out;
258+
}
259+
.datetime-range .timer .timer-hours .arrow.arrow-up:hover::before,
260+
.datetime-range .timer .timer-minutes .arrow.arrow-up:hover::before,
261+
.datetime-range .timer .timer-seconds .arrow.arrow-up:hover::before {
262+
border-bottom-color: #999;
263+
}
264+
.datetime-range .timer .timer-hours .arrow.arrow-down::before,
265+
.datetime-range .timer .timer-minutes .arrow.arrow-down::before,
266+
.datetime-range .timer .timer-seconds .arrow.arrow-down::before {
267+
content: "";
268+
position: absolute;
269+
top: 0;
270+
left: 35%;
271+
border-left: 0.5em solid transparent;
272+
border-right: 0.5em solid transparent;
273+
border-top: 0.5em solid #ddd;
274+
transition: border 0.25s ease-out;
275+
}
276+
.datetime-range .timer .timer-hours .arrow.arrow-down:hover::before,
277+
.datetime-range .timer .timer-minutes .arrow.arrow-down:hover::before,
278+
.datetime-range .timer .timer-seconds .arrow.arrow-down:hover::before {
279+
border-top-color: #999;
280+
}
281+
.datetime-range .timer .timer-divider {
282+
font-size: 3em;
283+
line-height: 3em;
284+
-webkit-animation-name: blinker;
285+
-webkit-animation-duration: 5s;
286+
-webkit-animation-timing-function: linear;
287+
-webkit-animation-iteration-count: infinite;
288+
-moz-animation-name: blinker;
289+
-moz-animation-duration: 5s;
290+
-moz-animation-timing-function: linear;
291+
-moz-animation-iteration-count: infinite;
292+
animation-name: blinker;
293+
animation-duration: 5s;
294+
animation-timing-function: linear;
295+
animation-iteration-count: infinite;
296+
}
297+
@-moz-keyframes blinker {
298+
0% { opacity: 0.0; }
299+
5% { opacity: 1.0; }
300+
95% { opacity: 1.0; }
301+
100% { opacity: 0.0; }
302+
}
303+
@-webkit-keyframes blinker {
304+
0% { opacity: 0.0; }
305+
5% { opacity: 1.0; }
306+
95% { opacity: 1.0; }
307+
100% { opacity: 0.0; }
308+
}
309+
@keyframes blinker {
310+
0% { opacity: 0.0; }
311+
5% { opacity: 1.0; }
312+
95% { opacity: 1.0; }
313+
100% { opacity: 0.0; }
314+
}

0 commit comments

Comments
 (0)