Skip to content

Commit 7ca52b1

Browse files
g1ebg1eb
committed
Merge branch 'feature/separate-datetime'
2 parents 6adf71f + 0d47905 commit 7ca52b1

14 files changed

+665
-68
lines changed

‎dist/datetime-input.css

Lines changed: 3 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/datetime-input.js

Lines changed: 3 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulpfile.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
1+
'use strict';
2+
13
var gulp = require('gulp');
24
var embedTemplates = require('gulp-angular-embed-templates');
5+
var concat = require('gulp-concat');
36
var uglify = require('gulp-uglify');
47
var cssnano = require('gulp-cssnano');
58

69
gulp.task('build', function () {
7-
gulp.src('src/*.js')
10+
gulp.src(['src/datetime-input.js', 'src/date-input.js', 'src/time-input.js'])
811
.pipe(embedTemplates())
912
.pipe(uglify())
13+
.pipe(concat('datetime-input.js'))
1014
.pipe(gulp.dest('./dist'));
11-
gulp.src('src/*.css')
15+
gulp.src(['src/datetime-input.css', 'src/date-input.css', 'src/time-input.css'])
1216
.pipe(cssnano())
17+
.pipe(concat('datetime-input.css'))
1318
.pipe(gulp.dest('./dist'));
1419
});
20+
21+
gulp.task('watch', function() {
22+
gulp.watch('src/**/*.+(js|html|css)', ['build']);
23+
});

‎index.html

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,21 @@
1212
min-height: 100vh;
1313
margin: 0;
1414
padding: 15px;
15+
color: #333;
16+
font-family: sans-serif;
1517
}
1618
</style>
1719
</head>
1820
<body ng-controller="MainCtrl">
1921

20-
<datetime-input datetime="datetime" handler="print(datetime)"></datetime-input>
22+
<h1>Date</h1>
23+
<date-input date="now" handler="print(now)"></date-input>
24+
25+
<h1>Time</h1>
26+
<time-input time="now" handler="print(now)"></time-input>
27+
28+
<h1>Datetime</h1>
29+
<datetime-input datetime="now" handler="print(now)"></datetime-input>
2130

2231
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js" charset="utf-8"></script>
2332
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js" charset="utf-8"></script>
@@ -26,7 +35,7 @@
2635
<script>
2736
angular.module('ExampleApp', ['g1b.datetime-input']).
2837
controller('MainCtrl', function ($scope) {
29-
$scope.datetime = moment();
38+
$scope.now = moment();
3039
$scope.print = function (datetime) {
3140
console.log('datetime', datetime);
3241
};

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"angular": "^1.5.6",
99
"gulp": "^3.9.1",
1010
"gulp-angular-embed-templates": "^2.2.0",
11+
"gulp-concat": "^2.6.0",
1112
"gulp-cssnano": "^2.1.2",
1213
"gulp-uglify": "^1.5.3",
1314
"moment": "^2.13.0"

‎src/date-input.css

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
/**
2+
* Date input styles
3+
*/
4+
.datetime-input.date {
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+
* Display date object
29+
*/
30+
.datetime-input.date .display {
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-input.date .display .date {
40+
font-size: 2em;
41+
line-height: 2em;
42+
display: block;
43+
overflow: hidden;
44+
}
45+
.datetime-input.date .display.active,
46+
.datetime-input.date .display:hover {
47+
background-color: #ddd;
48+
}
49+
50+
51+
/**
52+
* Edit date popover
53+
*/
54+
.datetime-input.date .edit-popover {
55+
position: absolute;
56+
z-index: 5;
57+
top: 4.5em;
58+
width: 100%;
59+
height: auto;
60+
padding: 0;
61+
background-color: #efefef;
62+
border-radius: 0;
63+
border: 1px solid #aaa;
64+
box-sizing: border-box;
65+
}
66+
.datetime-input.date .edit-popover .header {
67+
width: 100%;
68+
color: #777;
69+
font-size: 1.5em;
70+
line-height: 2em;
71+
cursor: default;
72+
transition: background-color 0.25s ease-out;
73+
}
74+
.datetime-input.date .edit-popover .header::before {
75+
content: "";
76+
display: block;
77+
position: absolute;
78+
background-color: #efefef;
79+
width: 1em;
80+
height: 1em;
81+
top: -0.55em;
82+
left: 47.5%;
83+
z-index: 2;
84+
border-color: #aaa;
85+
border-style: solid;
86+
border-width: 1px 1px 0 0;
87+
transform: rotate(-45deg);
88+
-moz-transform: rotate(-45deg);
89+
-ms-transform: rotate(-45deg);
90+
-o-transform: rotate(-45deg);
91+
-webkit-transform: rotate(-45deg);
92+
transition: background-color 0.25s ease-out;
93+
}
94+
95+
96+
/**
97+
* Calendar
98+
*/
99+
.datetime-input.date .calendar .calendar-header {
100+
cursor: default;
101+
background-color: #fff;
102+
position: relative;
103+
width: 100%;
104+
font-size: 1.5em;
105+
line-height: 2em;
106+
}
107+
.datetime-input.date .calendar .calendar-header .arrow {
108+
display: inline-block;
109+
color: #ddd;
110+
cursor: pointer;
111+
line-height: 1.5em;
112+
font-size: 1.5em;
113+
}
114+
.datetime-input.date .calendar .calendar-header .arrow.arrow-left {
115+
position: absolute;
116+
left: 0;
117+
width: 2em;
118+
height: 100%;
119+
}
120+
.datetime-input.date .calendar .calendar-header .arrow.arrow-left::before {
121+
content: "";
122+
position: absolute;
123+
top: 15%;
124+
left: 25%;
125+
border-right: 0.75em solid #ddd;
126+
border-top: 0.5em solid transparent;
127+
border-bottom: 0.5em solid transparent;
128+
transition: border 0.25s ease-out;
129+
}
130+
.datetime-input.date .calendar .calendar-header .arrow.arrow-left:hover::before {
131+
border-right-color: #999;
132+
}
133+
.datetime-input.date .calendar .calendar-header .arrow.arrow-right {
134+
position: absolute;
135+
right: 0;
136+
width: 2em;
137+
height: 100%;
138+
}
139+
.datetime-input.date .calendar .calendar-header .arrow.arrow-right::before {
140+
content: "";
141+
position: absolute;
142+
top: 15%;
143+
right: 25%;
144+
border-left: 0.75em solid #ddd;
145+
border-top: 0.5em solid transparent;
146+
border-bottom: 0.5em solid transparent;
147+
transition: border 0.25s ease-out;
148+
}
149+
.datetime-input.date .calendar .calendar-header .arrow.arrow-right:hover::before {
150+
border-left-color: #999;
151+
}
152+
.datetime-input.date .calendar .calendar-body {
153+
padding: 0.5em 0;
154+
}
155+
.datetime-input.date .calendar .calendar-body .weekdays {
156+
cursor: default;
157+
display: flex;
158+
justify-content: space-between;
159+
color: #777;
160+
font-size: 1em;
161+
line-height: 2em;
162+
text-transform: uppercase;
163+
padding: 0 1em;
164+
}
165+
.datetime-input.date .calendar .calendar-body .weekdays .weekday {
166+
display: inline-block;
167+
width: 5em;
168+
height: 2.5em;
169+
}
170+
.datetime-input.date .calendar .calendar-body .weekdays .weekday {
171+
display: inline-block;
172+
}
173+
.datetime-input.date .calendar .calendar-body .week {
174+
display: flex;
175+
justify-content: space-between;
176+
color: #777;
177+
font-size: 1.25em;
178+
line-height: 2.65em;
179+
letter-spacing: 1px;
180+
padding: 0.5em 1em;
181+
}
182+
.datetime-input.date .calendar .calendar-body .week .date {
183+
display: inline-block;
184+
cursor: pointer;
185+
width: 2.5em;
186+
height: 2.5em;
187+
border-radius: 50%;
188+
transition: background-color 0.25s ease-out;
189+
}
190+
.datetime-input.date .calendar .calendar-body .week .date.current {
191+
color: #444;
192+
}
193+
.datetime-input.date .calendar .calendar-body .week .date:not(.active):hover {
194+
background-color: #ddd;
195+
}
196+
.datetime-input.date .calendar .calendar-body .week .date.active,
197+
.datetime-input.date .calendar .calendar-body .week .date.inactive.active {
198+
color: #efefef;
199+
background-color: rgba(255, 69, 0, 0.75);
200+
}
201+
.datetime-input.date .calendar .calendar-body .week .date.inactive {
202+
color: #aaa;
203+
}

0 commit comments

Comments
 (0)