Skip to content

Commit 16122cb

Browse files
tanvir0604tanvir0604
committed
add options to make date range picker
1 parent fabb990 commit 16122cb

File tree

8 files changed

+164
-31
lines changed

8 files changed

+164
-31
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ $("#date").dropdownDatepicker({
5555
| maxAge | int | null | |
5656
| minYear | int | null | |
5757
| maxYear | int | null | |
58+
| minDate | string | null | |
59+
| maxDate | string | null | |
5860
| allowPast | boolean | true | |
5961
| allowFuture | boolean | true | |
6062
| submitFieldName | string | 'date' | |

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jquery-dropdown-datepicker",
3-
"version": "1.1.1",
3+
"version": "1.2.0",
44
"homepage": "https://github.com/tanvir0604/jquery-dropdown-datepicker",
55
"authors": [
66
"Md Shafkat Hussain Tanvir <tanvir0604@gmail.com>"

‎demo/index.html

Lines changed: 72 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,33 +26,92 @@
2626
});
2727
</xmp>
2828
</fieldset>
29+
30+
31+
<fieldset>
32+
<legend>Date Range</legend>
33+
<input type="text" id="from">
34+
<input type="text" id="to">
35+
<xmp>
36+
var minDate = null, maxDate = null;
37+
$('#from').dropdownDatepicker({
38+
allowPast: false,
39+
onChange: function(day, month, year){
40+
if(day && month && year){
41+
$('#to').dropdownDatepicker('destroy');
42+
minDate = year+'-'+month+'-'+day;
43+
maxDate = new Date(minDate);
44+
maxDate.setDate(maxDate.getDate()+70);
45+
maxDate = maxDate.getFullYear()+'-'+(maxDate.getMonth()+1)+'-'+maxDate.getDate();
46+
createToDate();
47+
}
48+
}
49+
});
50+
var createToDate = function(){
51+
$('#to').dropdownDatepicker({
52+
allowPast: false,
53+
minDate: minDate,
54+
maxDate: maxDate,
55+
onChange: function(day, month, year){
56+
console.log('active');
57+
}
58+
});
59+
}
60+
61+
createToDate();
62+
</xmp>
63+
</fieldset>
2964

3065

3166
<script
3267
src="https://code.jquery.com/jquery-3.3.1.min.js"
3368
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
3469
crossorigin="anonymous"></script>
3570

36-
<script src="https://cdn.jsdelivr.net/npm/jquery-dropdown-datepicker@1.1.0/dist/jquery-dropdown-datepicker.min.js"></script>
37-
71+
<!-- <script src="https://cdn.jsdelivr.net/npm/jquery-dropdown-datepicker@1.1.0/dist/jquery-dropdown-datepicker.min.js"></script> -->
72+
<script src="../src/jquery-dropdown-datepicker.js"></script>
3873
<script>
74+
75+
3976
$('#dob').dropdownDatepicker({
40-
dayLabel: 'day',
4177
minAge: 18,
4278
maxAge: 100,
4379
onChange: function(day, month, year){
44-
console.log('on change', day, month, year);
45-
},
46-
onDayChange: function(day, month, year){
47-
console.log('on day change', day, month, year);
48-
},
49-
onMonthChange: function(day, month, year){
50-
console.log('on month change', day, month, year);
51-
},
52-
onYearChange: function(day, month, year){
53-
console.log('on year change', day, month, year);
80+
console.log(day, month, year);
5481
}
5582
});
83+
84+
85+
var minDate = null, maxDate = null;
86+
$('#from').dropdownDatepicker({
87+
allowPast: false,
88+
onChange: function(day, month, year){
89+
if(day && month && year){
90+
$('#to').dropdownDatepicker('destroy');
91+
minDate = year+'-'+month+'-'+day;
92+
console.log(minDate);
93+
maxDate = new Date(minDate);
94+
maxDate.setDate(maxDate.getDate()+70);
95+
maxDate = maxDate.getFullYear()+'-'+(maxDate.getMonth()+1)+'-'+maxDate.getDate();
96+
console.log(maxDate);
97+
createToDate();
98+
}
99+
}
100+
});
101+
var createToDate = function(){
102+
$('#to').dropdownDatepicker({
103+
allowPast: false,
104+
minDate: minDate,
105+
maxDate: maxDate,
106+
onChange: function(day, month, year){
107+
console.log('active');
108+
}
109+
});
110+
}
111+
112+
createToDate();
113+
114+
56115
</script>
57116
</body>
58117
</html>

‎dist/jquery-dropdown-datepicker.js

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

‎dist/jquery-dropdown-datepicker.min.js

Lines changed: 43 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* jQuery Dropdown Datepicker - v1.0.0
2+
* jQuery Dropdown Datepicker - v1.2.0
33
* A simple customizable jquery dropdown datepicker
44
*
55
* Made by Md Shafkat Hussain Tanvir
@@ -28,6 +28,8 @@
2828
maxAge: null,
2929
minYear: null,
3030
maxYear: null,
31+
minDate: null,
32+
maxDate: null,
3133
allowPast: true,
3234
allowFuture: true,
3335
submitFieldName: 'date',
@@ -317,13 +319,22 @@
317319
}
318320
}
319321

322+
if(this.config.minDate !== null && new Date(this.config.minDate).getFullYear() === year && new Date(this.config.minDate).getMonth() + 1 === month){
323+
start1 = start1 < new Date(this.config.minDate).getDate()?new Date(this.config.minDate).getDate():start1;
324+
}
325+
326+
320327
if(end1 < start1) {
321328
end1 = start1;
329+
}
330+
if(start2 < start1){
322331
start2 = start1;
323332
}
333+
334+
324335
var numDaysInMonth = (new Date(year, month, 0).getDate());
325336
if(end2 > numDaysInMonth) {
326-
end2 =numDaysInMonth;
337+
end2 = numDaysInMonth;
327338
}
328339

329340
if(!this.config.allowFuture && year === this.internals.currentYear && month === this.internals.currentMonth && end2 > this.internals.currentDay) {
@@ -338,9 +349,16 @@
338349
}
339350
}
340351

341-
if(end1 > end2){
342-
end1 = end2;
343-
start2 = end2+1;
352+
if(this.config.maxDate !== null && new Date(this.config.maxDate).getFullYear() === year && new Date(this.config.maxDate).getMonth() + 1 === month){
353+
end2 = end2 > new Date(this.config.maxDate).getDate()?new Date(this.config.maxDate).getDate():end2;
354+
}
355+
356+
357+
if(end1 > start2){
358+
start2 = end1;
359+
}
360+
if(start2 > end2){
361+
end2 = start2;
344362
}
345363

346364

@@ -405,6 +423,15 @@
405423
}
406424
}
407425

426+
if(this.config.minDate !== null && new Date(this.config.minDate).getFullYear() === year){
427+
start = start < new Date(this.config.minDate).getMonth()+1?new Date(this.config.minDate).getMonth()+1:start;
428+
console.log('start', start);
429+
}
430+
if(this.config.maxDate !== null && new Date(this.config.maxDate).getFullYear() === year){
431+
end = end > new Date(this.config.maxDate).getMonth()+1?new Date(this.config.maxDate).getMonth()+1:end;
432+
console.log('end', end);
433+
}
434+
408435
if(this.config.monthLabel){
409436
option.setAttribute('value', '');
410437
option.appendChild(document.createTextNode(this.config.monthLabel));
@@ -469,6 +496,9 @@
469496
}else{
470497
minYear = this.config.allowPast ? minYear : this.internals.currentYear;
471498
}
499+
if(this.config.minDate !== null){
500+
minYear = new Date(this.config.minDate).getFullYear();
501+
}
472502

473503
if (!maxYear) {
474504
maxYear = this.internals.currentYear+10;
@@ -478,6 +508,10 @@
478508
maxYear = this.internals.currentYear;
479509
}
480510

511+
if(this.config.maxDate !== null){
512+
maxYear = new Date(this.config.maxDate).getFullYear();
513+
}
514+
481515
for (var i = maxYear; i >= minYear; i--) {
482516
option = document.createElement('option');
483517
option.setAttribute('value', i);
@@ -622,11 +656,13 @@
622656
var wrapperClass = this.config.wrapperClass;
623657

624658
if (this.$element.hasClass(wrapperClass)) {
625-
this.$element.empty();
659+
// this.$element.empty();
660+
this.$element.removeData('plugin_' +pluginName);
626661
} else {
627662
var $parent = this.$element.parent(),
628663
$select = $parent.find('select');
629-
664+
665+
this.$element.removeData('plugin_' +pluginName);
630666
this.$element.unwrap();
631667
$select.remove();
632668
}

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "jquery-dropdown-datepicker",
3-
"version": "1.1.1",
3+
"version": "1.2.0",
44
"description": "A simple customizable jquery dropdown datepicker",
5-
"main": "index.js",
5+
"main": "dist/jquery-dropdown-datepicker.min.js",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1"
88
},

‎plugin-config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"dropdown",
99
"jquery"
1010
],
11-
"version": "1.1.1",
11+
"version": "1.2.0",
1212
"author": {
1313
"name": "Md Shafkat Hussain Tanvir",
1414
"email": "tanvir0604@gmail.com",

‎src/jquery-dropdown-datepicker.js

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
maxAge: null,
2222
minYear: null,
2323
maxYear: null,
24+
minDate: null,
25+
maxDate: null,
2426
allowPast: true,
2527
allowFuture: true,
2628
submitFieldName: 'date',
@@ -310,13 +312,22 @@
310312
}
311313
}
312314

315+
if(this.config.minDate !== null && new Date(this.config.minDate).getFullYear() === year && new Date(this.config.minDate).getMonth() + 1 === month){
316+
start1 = start1 < new Date(this.config.minDate).getDate()?new Date(this.config.minDate).getDate():start1;
317+
}
318+
319+
313320
if(end1 < start1) {
314321
end1 = start1;
322+
}
323+
if(start2 < start1){
315324
start2 = start1;
316325
}
326+
327+
317328
var numDaysInMonth = (new Date(year, month, 0).getDate());
318329
if(end2 > numDaysInMonth) {
319-
end2 =numDaysInMonth;
330+
end2 = numDaysInMonth;
320331
}
321332

322333
if(!this.config.allowFuture && year === this.internals.currentYear && month === this.internals.currentMonth && end2 > this.internals.currentDay) {
@@ -331,9 +342,16 @@
331342
}
332343
}
333344

334-
if(end1 > end2){
335-
end1 = end2;
336-
start2 = end2+1;
345+
if(this.config.maxDate !== null && new Date(this.config.maxDate).getFullYear() === year && new Date(this.config.maxDate).getMonth() + 1 === month){
346+
end2 = end2 > new Date(this.config.maxDate).getDate()?new Date(this.config.maxDate).getDate():end2;
347+
}
348+
349+
350+
if(end1 > start2){
351+
start2 = end1;
352+
}
353+
if(start2 > end2){
354+
end2 = start2;
337355
}
338356

339357

@@ -398,6 +416,15 @@
398416
}
399417
}
400418

419+
if(this.config.minDate !== null && new Date(this.config.minDate).getFullYear() === year){
420+
start = start < new Date(this.config.minDate).getMonth()+1?new Date(this.config.minDate).getMonth()+1:start;
421+
console.log('start', start);
422+
}
423+
if(this.config.maxDate !== null && new Date(this.config.maxDate).getFullYear() === year){
424+
end = end > new Date(this.config.maxDate).getMonth()+1?new Date(this.config.maxDate).getMonth()+1:end;
425+
console.log('end', end);
426+
}
427+
401428
if(this.config.monthLabel){
402429
option.setAttribute('value', '');
403430
option.appendChild(document.createTextNode(this.config.monthLabel));
@@ -462,6 +489,9 @@
462489
}else{
463490
minYear = this.config.allowPast ? minYear : this.internals.currentYear;
464491
}
492+
if(this.config.minDate !== null){
493+
minYear = new Date(this.config.minDate).getFullYear();
494+
}
465495

466496
if (!maxYear) {
467497
maxYear = this.internals.currentYear+10;
@@ -471,6 +501,10 @@
471501
maxYear = this.internals.currentYear;
472502
}
473503

504+
if(this.config.maxDate !== null){
505+
maxYear = new Date(this.config.maxDate).getFullYear();
506+
}
507+
474508
for (var i = maxYear; i >= minYear; i--) {
475509
option = document.createElement('option');
476510
option.setAttribute('value', i);
@@ -615,11 +649,13 @@
615649
var wrapperClass = this.config.wrapperClass;
616650

617651
if (this.$element.hasClass(wrapperClass)) {
618-
this.$element.empty();
652+
// this.$element.empty();
653+
this.$element.removeData('plugin_' +pluginName);
619654
} else {
620655
var $parent = this.$element.parent(),
621656
$select = $parent.find('select');
622-
657+
658+
this.$element.removeData('plugin_' +pluginName);
623659
this.$element.unwrap();
624660
$select.remove();
625661
}

0 commit comments

Comments
 (0)