Skip to content

Commit fb330c5

Browse files
author
Alexander Krupko
committed
Initial version
1 parent 3540463 commit fb330c5

File tree

12 files changed

+1905
-0
lines changed

12 files changed

+1905
-0
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/.idea/
2+
/node_modules/

‎AUTHORS.txt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
Alexander Krupko <[email protected]>
2+
Slava Krasnyansky <[email protected]>

‎Gruntfile.js‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
module.exports = function (grunt)
2+
{
3+
require('time-grunt')(grunt);
4+
require('load-grunt-tasks')(grunt);
5+
6+
var comment = '/**\n\
7+
* DatePickerX\n\
8+
*\n\
9+
* Cool light visual date picker on pure JavaScript\n\
10+
* Browsers support: Chrome 45+, FireFox 40+, Safari 8+, IE10+, iOS Safari 8+, Android Browser 4.4+\n\
11+
*\n\
12+
* @author Alexander Krupko <[email protected]>\n\
13+
* @author Slava Krasnyansky <[email protected]>\n\
14+
* @copyright 2016 Avrora Team www.avrora.team\n\
15+
* @license MIT\n\
16+
* @tutorial http://datepickerx.avrora.team\n\
17+
* @version ' + grunt.file.readJSON('package.json').version + '\n\
18+
*/\n';
19+
20+
grunt.initConfig({
21+
22+
sass: {
23+
options: {
24+
sourceMap : false,
25+
outputStyle: 'expanded',
26+
indentWidth: 4
27+
},
28+
dev: {
29+
files : [{
30+
expand: true,
31+
cwd : 'src/sass',
32+
src : ['**/*.scss'],
33+
dest : 'dist/css',
34+
ext : '.css'
35+
}]
36+
}
37+
},
38+
39+
autoprefixer: {
40+
options: {
41+
browsers: ['last 2 versions', '> 1%'],
42+
map : false
43+
},
44+
files : {
45+
expand : true,
46+
flatten: true,
47+
src : 'dist/css/*.css',
48+
dest : 'dist/css'
49+
}
50+
},
51+
52+
clean: {
53+
options: {
54+
'force': true
55+
},
56+
css : ['dist/css/*'],
57+
js : ['dist/js/*']
58+
},
59+
60+
uglify: {
61+
options: {
62+
quoteStyle: 3,
63+
banner: comment
64+
},
65+
js : {
66+
files: [{
67+
expand: true,
68+
cwd : 'src/js',
69+
src : '**/*.js',
70+
dest : 'dist/js',
71+
ext : '.min.js'
72+
}]
73+
}
74+
},
75+
76+
copy: {
77+
options: {
78+
process: function(content, srcpath)
79+
{
80+
return comment + '\n' + content;
81+
}
82+
},
83+
js : {
84+
files: [{
85+
expand: true,
86+
cwd : 'src/js',
87+
src : '**/*.js',
88+
dest : 'dist/js'
89+
}]
90+
},
91+
css : {
92+
files: [{
93+
expand: true,
94+
cwd : 'dist/css',
95+
src : '**/*.css',
96+
dest : 'dist/css'
97+
}]
98+
}
99+
},
100+
101+
watch: {
102+
js: {
103+
files: ['src/js/**/*.js'],
104+
tasks: ['js']
105+
},
106+
css: {
107+
files: ['src/sass/**/*.scss'],
108+
tasks: ['css']
109+
}
110+
},
111+
112+
cmq: {
113+
css: {
114+
files: [{
115+
expand: true,
116+
cwd : 'dist/css',
117+
src : '**/*.css',
118+
dest : 'dist/css'
119+
}]
120+
}
121+
},
122+
123+
cssmin: {
124+
options: {
125+
shorthandCompacting: false,
126+
roundingPrecision: -1,
127+
semanticMerging: true
128+
},
129+
target: {
130+
files: [{
131+
expand: true,
132+
cwd : 'dist/css',
133+
src : '**/*.css',
134+
dest : 'dist/css',
135+
ext : '.min.css'
136+
}]
137+
}
138+
}
139+
140+
});
141+
142+
143+
grunt.registerTask('css', ['clean:css', 'sass', 'autoprefixer', 'cmq', 'cssmin', 'copy:css']);
144+
grunt.registerTask('js', ['clean:js', 'copy:js', 'uglify']);
145+
146+
grunt.registerTask('build', ['css', 'js']);
147+
grunt.registerTask('default', ['watch']);
148+
149+
};

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# DatePickerX
2+
Cool light visual date picker on pure JavaScript
3+
Browsers support: Chrome 45+, FireFox 40+, Safari 8+, IE10+, iOS Safari 8+, Android Browser 4.4+

‎demo/index.html‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>DatePickerX</title>
6+
7+
<script src="../dist/js/DatePickerX.min.js"></script>
8+
<script>
9+
window.addEventListener('DOMContentLoaded', function()
10+
{
11+
var $min = document.querySelector('.real [name="realDPX-min"]'),
12+
$max = document.querySelector('.real [name="realDPX-max"]');
13+
14+
$min.DatePickerX.init({
15+
mondayFirst: true,
16+
minDate : new Date(2016, 2, 1),
17+
maxDate : $max
18+
});
19+
20+
$max.DatePickerX.init({
21+
mondayFirst: true,
22+
minDate : $min,
23+
//maxDate : new Date(2017, 4, 25)
24+
});
25+
26+
});
27+
</script>
28+
<link rel="stylesheet" href="../dist/css/DatePickerX.css">
29+
<style>
30+
body {
31+
padding: 50px;
32+
}
33+
label {
34+
display: inline-block;
35+
margin-bottom: 500px;
36+
width: 30%;
37+
}
38+
.real {
39+
width: 45%;
40+
}
41+
</style>
42+
</head>
43+
<body>
44+
45+
<label class="real">
46+
<input type="text" name="realDPX-min" placeholder="Choice start date">
47+
</label>
48+
49+
<label class="real">
50+
<input type="text" name="realDPX-max" placeholder="Choice end date">
51+
</label>
52+
53+
54+
<label>
55+
<input type="text" name="dp">
56+
<div class="date-picker-x active" data-dpx-type="day">
57+
<div class="dpx-title-box">
58+
<span class="dpx-prev" title="March 2016">&#x276e;</span>
59+
<span class="dpx-title" title="2016">April 2016</span>
60+
<span class="dpx-next" title="May 2016">&#x276f;</span>
61+
</div>
62+
<div class="dpx-content-box">
63+
<span class="dpx-item dpx-weekday">Mo</span>
64+
<span class="dpx-item dpx-weekday">Tu</span>
65+
<span class="dpx-item dpx-weekday">We</span>
66+
<span class="dpx-item dpx-weekday">Th</span>
67+
<span class="dpx-item dpx-weekday">Fr</span>
68+
<span class="dpx-item dpx-weekday dpx-weekend">St</span>
69+
<span class="dpx-item dpx-weekday dpx-weekend">Su</span>
70+
<span class="dpx-item dpx-out" title="March 28, 2016">28</span>
71+
<span class="dpx-item dpx-out" title="March 29, 2016">29</span>
72+
<span class="dpx-item dpx-out" title="">30</span>
73+
<span class="dpx-item dpx-out" title="">31</span>
74+
<span class="dpx-item" title="">1</span>
75+
<span class="dpx-item dpx-weekend" title="">2</span>
76+
<span class="dpx-item dpx-weekend" title="">3</span>
77+
<span class="dpx-item" title="">4</span>
78+
<span class="dpx-item" title="">5</span>
79+
<span class="dpx-item" title="">6</span>
80+
<span class="dpx-item" title="">7</span>
81+
<span class="dpx-item" title="">8</span>
82+
<span class="dpx-item dpx-weekend" title="">9</span>
83+
<span class="dpx-item dpx-weekend" title="">10</span>
84+
<span class="dpx-item" title="">11</span>
85+
<span class="dpx-item" title="">12</span>
86+
<span class="dpx-item dpx-selected" title="">13</span>
87+
<span class="dpx-item" title="">14</span>
88+
<span class="dpx-item" title="">15</span>
89+
<span class="dpx-item dpx-weekend dpx-current" title="">16</span>
90+
<span class="dpx-item dpx-weekend" title="">17</span>
91+
<span class="dpx-item" title="">18</span>
92+
<span class="dpx-item" title="">19</span>
93+
<span class="dpx-item" title="">20</span>
94+
<span class="dpx-item dpx-disabled" title="">21</span>
95+
<span class="dpx-item dpx-disabled" title="">22</span>
96+
<span class="dpx-item dpx-weekend dpx-disabled" title="">23</span>
97+
<span class="dpx-item dpx-weekend dpx-disabled" title="">24</span>
98+
<span class="dpx-item dpx-disabled" title="">25</span>
99+
<span class="dpx-item dpx-disabled" title="">26</span>
100+
<span class="dpx-item dpx-disabled" title="">27</span>
101+
<span class="dpx-item dpx-disabled" title="">28</span>
102+
<span class="dpx-item dpx-disabled" title="">29</span>
103+
<span class="dpx-item dpx-weekend dpx-disabled" title="">30</span>
104+
<span class="dpx-item dpx-weekend dpx-out dpx-disabled" title="">1</span>
105+
<span class="dpx-item dpx-disabled dpx-out" title="">2</span>
106+
<span class="dpx-item dpx-disabled dpx-out" title="">3</span>
107+
<span class="dpx-item dpx-disabled dpx-out" title="">4</span>
108+
<span class="dpx-item dpx-disabled dpx-out" title="">5</span>
109+
<span class="dpx-item dpx-disabled dpx-out" title="">6</span>
110+
<span class="dpx-item dpx-disabled dpx-out dpx-weekend" title="">7</span>
111+
<span class="dpx-item dpx-disabled dpx-out dpx-weekend" title="">8</span>
112+
</div>
113+
<div class="dpx-btns">
114+
<span class="dpx-item dpx-today">Today</span>
115+
<span class="dpx-item dpx-clear">Clear</span>
116+
</div>
117+
</div>
118+
</label>
119+
120+
<label>
121+
<input type="text" name="dp">
122+
<div class="date-picker-x active" data-dpx-type="month">
123+
<div class="dpx-title-box">
124+
<span class="dpx-prev" title="2015">&#x276e;</span>
125+
<span class="dpx-title" title="2010 - 2019">2016</span>
126+
<span class="dpx-next" title="2017">&#x276f;</span>
127+
</div>
128+
<div class="dpx-content-box">
129+
<span class="dpx-item dpx-out" title="November 2015">Nov</span>
130+
<span class="dpx-item dpx-out" title="December 1015">Dec</span>
131+
<span class="dpx-item" title="January">Jan</span>
132+
<span class="dpx-item" title="">Feb</span>
133+
<span class="dpx-item" title="">Mar</span>
134+
<span class="dpx-item dpx-current" title="">Apr</span>
135+
<span class="dpx-item" title="">May</span>
136+
<span class="dpx-item dpx-selected" title="">Jun</span>
137+
<span class="dpx-item" title="">Jul</span>
138+
<span class="dpx-item" title="">Aug</span>
139+
<span class="dpx-item" title="">Sep</span>
140+
<span class="dpx-item dpx-disabled" title="">Oct</span>
141+
<span class="dpx-item dpx-disabled" title="">Nov</span>
142+
<span class="dpx-item dpx-disabled" title="">Dec</span>
143+
<span class="dpx-item dpx-out dpx-disabled" title="">Jan</span>
144+
<span class="dpx-item dpx-out dpx-disabled" title="">Feb</span>
145+
</div>
146+
<div class="dpx-btns">
147+
<span class="dpx-item dpx-clear">Clear</span>
148+
</div>
149+
</div>
150+
</label>
151+
152+
<label>
153+
<input type="text" name="dp">
154+
<div class="date-picker-x active" data-dpx-type="year">
155+
<div class="dpx-title-box">
156+
<span class="dpx-prev" title="2000 - 2009">&#x276e;</span>
157+
<span class="dpx-title">2010 - 2019</span>
158+
<span class="dpx-next dpx-disabled" title="2020 - 2029">&#x276f;</span>
159+
</div>
160+
<div class="dpx-content-box">
161+
<span class="dpx-item dpx-out" title="2007">2007</span>
162+
<span class="dpx-item dpx-out" title="2008">2008</span>
163+
<span class="dpx-item dpx-out" title="2009">2009</span>
164+
<span class="dpx-item" title="2010">2010</span>
165+
<span class="dpx-item" title="2011">2011</span>
166+
<span class="dpx-item" title="2012">2012</span>
167+
<span class="dpx-item" title="2013">2013</span>
168+
<span class="dpx-item" title="2014">2014</span>
169+
<span class="dpx-item" title="2015">2015</span>
170+
<span class="dpx-item dpx-current dpx-selected" title="2016">2016</span>
171+
<span class="dpx-item" title="2017">2017</span>
172+
<span class="dpx-item" title="2018">2018</span>
173+
<span class="dpx-item dpx-disabled" title="2019">2019</span>
174+
<span class="dpx-item dpx-out dpx-disabled" title="2020">2020</span>
175+
<span class="dpx-item dpx-out dpx-disabled" title="2021">2021</span>
176+
<span class="dpx-item dpx-out dpx-disabled" title="2022">2022</span>
177+
</div>
178+
<div class="dpx-btns">
179+
<span class="dpx-item dpx-today">Today</span>
180+
</div>
181+
</div>
182+
</label>
183+
184+
185+
</body>
186+
</html>

0 commit comments

Comments
 (0)