Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support for showSelectedDays option in custom range #2372

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

support for showSelectedDays option in custom range #2372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions daterangepicker.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,8 @@
float: none;
}

.daterangepicker.single .drp-selected {
.daterangepicker.single .drp-selected,
.daterangepicker.single .drp-selected-dates {
display: none;
}

Expand Down Expand Up @@ -273,7 +274,8 @@
vertical-align: middle;
}

.daterangepicker .drp-selected {
.daterangepicker .drp-selected,
.daterangepicker .drp-selected-dates {
display: inline-block;
font-size: 12px;
padding-right: 8px;
Expand Down
28 changes: 27 additions & 1 deletion daterangepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
this.linkedCalendars = true;
this.autoUpdateInput = true;
this.alwaysShowCalendars = false;
this.showSelectedDays = false;
this.ranges = {};

this.opens = 'right';
Expand All @@ -76,6 +77,7 @@
cancelLabel: 'Cancel',
weekLabel: 'W',
customRangeLabel: 'Custom Range',
daysSelectedLabel: 'days selected',
daysOfWeek: moment.weekdaysMin(),
monthNames: moment.monthsShort(),
firstDay: moment.localeData().firstDayOfWeek()
Expand Down Expand Up @@ -110,6 +112,7 @@
'<div class="calendar-time"></div>' +
'</div>' +
'<div class="drp-buttons">' +
'<span class="drp-selected-dates"></span>' +
'<span class="drp-selected"></span>' +
'<button class="cancelBtn" type="button"></button>' +
'<button class="applyBtn" disabled="disabled" type="button"></button> ' +
Expand Down Expand Up @@ -159,6 +162,12 @@
var rangeHtml = elem.value;
this.locale.customRangeLabel = rangeHtml;
}
if (typeof options.locale.daysSelectedLabel === 'string') {
var elem = document.createElement('textarea');
elem.innerHTML = options.locale.daysSelectedLabel;
var rangeHtml = elem.value;
this.locale.daysSelectedLabel = rangeHtml;
}
}
this.container.addClass(this.locale.direction);

Expand Down Expand Up @@ -263,6 +272,9 @@
if (typeof options.autoApply === 'boolean')
this.autoApply = options.autoApply;

if (typeof options.showSelectedDays === 'boolean')
this.showSelectedDays = options.showSelectedDays

if (typeof options.autoUpdateInput === 'boolean')
this.autoUpdateInput = options.autoUpdateInput;

Expand Down Expand Up @@ -374,6 +386,9 @@
if (this.timePicker && this.autoApply)
this.autoApply = false;

if (this.timePicker && this.showSelectedDays)
this.showSelectedDays = false;

if (this.autoApply) {
this.container.addClass('auto-apply');
}
Expand Down Expand Up @@ -506,13 +521,20 @@
this.previousRightTime = this.endDate.clone();

this.container.find('.drp-selected').html(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
if (this.showSelectedDays) {
this.container.find('.drp-selected-dates').html(this.getTotalSelectedDates.call(this) + ' ' + this.locale.daysSelectedLabel);
}

if (!this.isShowing)
this.updateElement();

this.updateMonthsInView();
},

getTotalSelectedDates: function() {
return this.endDate.diff(this.startDate, 'days') + 1
},

isInvalidDate: function() {
return false;
},
Expand All @@ -531,8 +553,12 @@
this.container.find('.right .calendar-time select').prop('disabled', false).removeClass('disabled');
}
}
if (this.endDate)
if (this.endDate) {
this.container.find('.drp-selected').html(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
if (this.showSelectedDays) {
this.container.find('.drp-selected-dates').html(this.getTotalSelectedDates.call(this) + ' ' + this.locale.daysSelectedLabel);
}
}
this.updateMonthsInView();
this.updateCalendars();
this.updateFormInputs();
Expand Down
10 changes: 10 additions & 0 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,12 @@ <h1 style="margin: 0 0 20px 0">Configuration Builder</h1>
</label>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="showSelectedDays"> showSelectedDays
</label>
</div>

<div class="form-group">
<label for="opens">opens</label>
<select id="opens" class="form-control">
Expand Down Expand Up @@ -311,6 +317,7 @@ <h4>Configuration</h4>
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysSelectedLabel: 'selected days',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
Expand All @@ -328,6 +335,9 @@ <h4>Configuration</h4>
if (!$('#showCustomRangeLabel').is(':checked'))
options.showCustomRangeLabel = false;

if ($('#showSelectedDays').is(':checked'))
options.showSelectedDays = true;

if ($('#alwaysShowCalendars').is(':checked'))
options.alwaysShowCalendars = true;

Expand Down
9 changes: 9 additions & 0 deletions website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,6 +360,9 @@ <h1 style="margin-top: 30px"><a id="options" href="#options">Options</a></h1>
the end of the list of predefined ranges, when the <code>ranges</code> option is used.
This option will be highlighted whenever the current date range selection does not match one of the predefined ranges. Clicking it will display the calendars to select a new range.
</li>
<li>
<code>showSelectedDays</code>: (true/false) Displays the total selected days when "Custom Range" option is selected.
</li>
<li>
<code>alwaysShowCalendars</code>: (true/false) Normally, if you use the <code>ranges</code> option to specify pre-defined date ranges, calendars for choosing a custom date range are not shown until the user clicks "Custom Range". When this option is set to true, the calendars for choosing a custom date range are always shown instead.
</li>
Expand Down Expand Up @@ -645,6 +648,12 @@ <h1 style="margin-top: 30px"><a id="config" href="#config">Configuration Generat
</label>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="showSelectedDays" checked="checked"> showSelectedDays
</label>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
Expand Down
4 changes: 4 additions & 0 deletions website/website.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ $(document).ready(function() {
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysSelectedLabel: 'Selected days',
weekLabel: 'W',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
Expand All @@ -99,6 +100,9 @@ $(document).ready(function() {
if (!$('#showCustomRangeLabel').is(':checked'))
options.showCustomRangeLabel = false;

if ($('#showSelectedDays').is(':checked'))
options.showSelectedDays = true;

if ($('#alwaysShowCalendars').is(':checked'))
options.alwaysShowCalendars = true;

Expand Down