// Date range picker improvements
This commit is contained in:
@@ -0,0 +1,361 @@
|
|||||||
|
Date.prototype.addDays = function(value) {
|
||||||
|
this.setDate(this.getDate() + value);
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
Date.prototype.addMonths = function(value) {
|
||||||
|
var date = this.getDate();
|
||||||
|
this.setMonth(this.getMonth() + value);
|
||||||
|
|
||||||
|
if (this.getDate() < date) {
|
||||||
|
this.setDate(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
Date.prototype.addWeeks = function(value) {
|
||||||
|
this.addDays(value * 7);
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
Date.prototype.addYears = function(value) {
|
||||||
|
var month = this.getMonth();
|
||||||
|
this.setFullYear(this.getFullYear() + value);
|
||||||
|
|
||||||
|
if (month < this.getMonth()) {
|
||||||
|
this.setDate(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
Date.parseDate = function(date, format) {
|
||||||
|
if (format === undefined)
|
||||||
|
format = 'Y-m-d';
|
||||||
|
|
||||||
|
var formatSeparator = format.match(/[.\/\-\s].*?/);
|
||||||
|
var formatParts = format.split(/\W+/);
|
||||||
|
var parts = date.split(formatSeparator);
|
||||||
|
var date = new Date();
|
||||||
|
|
||||||
|
if (parts.length === formatParts.length) {
|
||||||
|
date.setHours(0);
|
||||||
|
date.setMinutes(0);
|
||||||
|
date.setSeconds(0);
|
||||||
|
date.setMilliseconds(0);
|
||||||
|
|
||||||
|
for (var i=0; i<=formatParts.length; i++) {
|
||||||
|
switch(formatParts[i]) {
|
||||||
|
case 'dd':
|
||||||
|
case 'd':
|
||||||
|
date.setDate(parseInt(parts[i], 10)||1);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'mm':
|
||||||
|
case 'm':
|
||||||
|
date.setMonth((parseInt(parts[i], 10)||1) - 1);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'yy':
|
||||||
|
case 'y':
|
||||||
|
date.setFullYear(2000 + (parseInt(parts[i], 10)||1));
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'yyyy':
|
||||||
|
case 'Y':
|
||||||
|
date.setFullYear(parseInt(parts[i], 10)||1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return date;
|
||||||
|
};
|
||||||
|
|
||||||
|
Date.prototype.subDays = function(value) {
|
||||||
|
this.setDate(this.getDate() - value);
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
Date.prototype.subMonths = function(value) {
|
||||||
|
var date = this.getDate();
|
||||||
|
this.setMonth(this.getMonth() - value);
|
||||||
|
|
||||||
|
if (this.getDate() < date) {
|
||||||
|
this.setDate(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
Date.prototype.subWeeks = function(value) {
|
||||||
|
this.subDays(value * 7);
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
Date.prototype.subYears = function(value) {
|
||||||
|
var month = this.getMonth();
|
||||||
|
this.setFullYear(this.getFullYear() - value);
|
||||||
|
|
||||||
|
if (month < this.getMonth()) {
|
||||||
|
this.setDate(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
Date.prototype.format = function(format) {
|
||||||
|
if (format === undefined)
|
||||||
|
return this.toString();
|
||||||
|
|
||||||
|
var formatSeparator = format.match(/[.\/\-\s].*?/);
|
||||||
|
var formatParts = format.split(/\W+/);
|
||||||
|
var result = '';
|
||||||
|
|
||||||
|
for (var i=0; i<=formatParts.length; i++) {
|
||||||
|
switch(formatParts[i]) {
|
||||||
|
case 'dd':
|
||||||
|
case 'd':
|
||||||
|
result += this.getDate() + formatSeparator;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'mm':
|
||||||
|
case 'm':
|
||||||
|
result += (this.getMonth() + 1) + formatSeparator;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'yy':
|
||||||
|
case 'y':
|
||||||
|
result += this.getFullYear() + formatSeparator;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'yyyy':
|
||||||
|
case 'Y':
|
||||||
|
result += this.getFullYear() + formatSeparator;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return result.slice(0, -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePickerFromInput() {
|
||||||
|
datepickerStart.setStart($("#date-start").val());
|
||||||
|
datepickerStart.setEnd($("#date-end").val());
|
||||||
|
datepickerStart.update();
|
||||||
|
datepickerEnd.setStart($("#date-start").val());
|
||||||
|
datepickerEnd.setEnd($("#date-end").val());
|
||||||
|
datepickerEnd.update();
|
||||||
|
|
||||||
|
if ($('#datepicker-compare').attr("checked")) {
|
||||||
|
if ($('#compare-options').val() == 1)
|
||||||
|
setPreviousPeriod();
|
||||||
|
|
||||||
|
if ($('#compare-options').val() == 2)
|
||||||
|
setPreviousYear();
|
||||||
|
|
||||||
|
datepickerStart.setStartCompare($("#date-start-compare").val());
|
||||||
|
datepickerStart.setEndCompare($("#date-end-compare").val());
|
||||||
|
datepickerEnd.setStartCompare($("#date-start-compare").val());
|
||||||
|
datepickerEnd.setEndCompare($("#date-end-compare").val());
|
||||||
|
datepickerStart.setCompare(true);
|
||||||
|
datepickerEnd.setCompare(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setDayPeriod() {
|
||||||
|
date = new Date();
|
||||||
|
$("#date-start").val(date.format($("#date-start").data('date-format')));
|
||||||
|
$("#date-end").val(date.format($("#date-end").data('date-format')));
|
||||||
|
|
||||||
|
updatePickerFromInput();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setPreviousDayPeriod() {
|
||||||
|
date = new Date();
|
||||||
|
date = date.subDays(1);
|
||||||
|
$("#date-start").val(date.format($("#date-start").data('date-format')));
|
||||||
|
$("#date-end").val(date.format($("#date-end").data('date-format')));
|
||||||
|
|
||||||
|
updatePickerFromInput();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setMonthPeriod() {
|
||||||
|
date = new Date();
|
||||||
|
$("#date-end").val(date.format($("#date-end").data('date-format')));
|
||||||
|
date = new Date(date.setDate(1));
|
||||||
|
$("#date-start").val(date.format($("#date-start").data('date-format')));
|
||||||
|
|
||||||
|
updatePickerFromInput();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setPreviousMonthPeriod() {
|
||||||
|
date = new Date();
|
||||||
|
date = date.subMonths(1);
|
||||||
|
$("#date-end").val(date.format($("#date-end").data('date-format')));
|
||||||
|
date = new Date(date.setDate(1));
|
||||||
|
$("#date-start").val(date.format($("#date-start").data('date-format')));
|
||||||
|
|
||||||
|
updatePickerFromInput();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setYearPeriod() {
|
||||||
|
date = new Date();
|
||||||
|
$("#date-end").val(date.format($("#date-end").data('date-format')));
|
||||||
|
date = new Date(date.getFullYear(), 0, 1);
|
||||||
|
$("#date-start").val(date.format($("#date-start").data('date-format')));
|
||||||
|
|
||||||
|
updatePickerFromInput();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setPreviousYearPeriod() {
|
||||||
|
date = new Date();
|
||||||
|
date = date.subYears(1);
|
||||||
|
$("#date-end").val(date.format($("#date-end").data('date-format')));
|
||||||
|
date = new Date(date.getFullYear(), 0, 1);
|
||||||
|
$("#date-start").val(date.format($("#date-start").data('date-format')));
|
||||||
|
|
||||||
|
updatePickerFromInput();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function setPreviousPeriod() {
|
||||||
|
startDate = Date.parseDate($("#date-start").val(), $("#date-start").data('date-format')).subDays(1);
|
||||||
|
endDate = Date.parseDate($("#date-end").val(), $("#date-end").data('date-format')).subDays(1);
|
||||||
|
|
||||||
|
diff = endDate - startDate;
|
||||||
|
startDateCompare = new Date(startDate-diff);
|
||||||
|
|
||||||
|
$("#date-end-compare").val(startDate.format($("#date-end-compare").data('date-format')));
|
||||||
|
$("#date-start-compare").val(startDateCompare.format($("#date-start-compare").data('date-format')));
|
||||||
|
}
|
||||||
|
|
||||||
|
function setPreviousYear() {
|
||||||
|
startDate = Date.parseDate($("#date-start").val(), $("#date-start").data('date-format')).subYears(1);
|
||||||
|
endDate = Date.parseDate($("#date-end").val(), $("#date-end").data('date-format')).subYears(1);
|
||||||
|
$("#date-start-compare").val(startDate.format($("#date-start").data('date-format')));
|
||||||
|
$("#date-end-compare").val(endDate.format($("#date-start").data('date-format')));
|
||||||
|
}
|
||||||
|
|
||||||
|
$( document ).ready(function() {
|
||||||
|
//Instanciate datepickers
|
||||||
|
datepickerStart = $('.datepicker1').daterangepicker({
|
||||||
|
"dates": translated_dates,
|
||||||
|
"weekStart": 1,
|
||||||
|
"start": $("#date-start").val(),
|
||||||
|
"end": $("#date-end").val()
|
||||||
|
}).on('changeDate', function(ev){
|
||||||
|
if (ev.date.valueOf() >= datepickerEnd.date.valueOf()){
|
||||||
|
datepickerEnd.setValue(ev.date.setMonth(ev.date.getMonth()+1));
|
||||||
|
}
|
||||||
|
}).data('daterangepicker');
|
||||||
|
|
||||||
|
datepickerEnd = $('.datepicker2').daterangepicker({
|
||||||
|
"dates": translated_dates,
|
||||||
|
"weekStart": 1,
|
||||||
|
"start": $("#date-start").val(),
|
||||||
|
"end": $("#date-end").val()
|
||||||
|
}).on('changeDate', function(ev){
|
||||||
|
if (ev.date.valueOf() <= datepickerStart.date.valueOf()){
|
||||||
|
datepickerStart.setValue(ev.date.setMonth(ev.date.getMonth()-1));
|
||||||
|
}
|
||||||
|
}).data('daterangepicker');
|
||||||
|
|
||||||
|
//Set first date picker to month -1 if same month
|
||||||
|
startDate = Date.parseDate($("#date-start").val(), $("#date-start").data('date-format'));
|
||||||
|
endDate = Date.parseDate($("#date-end").val(), $("#date-end").data('date-format'));
|
||||||
|
|
||||||
|
if (startDate.getFullYear() == endDate.getFullYear() && startDate.getMonth() == endDate.getMonth())
|
||||||
|
datepickerStart.setValue(startDate.subMonths(1));
|
||||||
|
|
||||||
|
//Events binding
|
||||||
|
$("#date-start").focus(function() {
|
||||||
|
datepickerStart.setCompare(false);
|
||||||
|
datepickerEnd.setCompare(false);
|
||||||
|
$(".date-input").removeClass("input-selected");
|
||||||
|
$(this).addClass("input-selected");
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#date-end").focus(function() {
|
||||||
|
datepickerStart.setCompare(false);
|
||||||
|
datepickerEnd.setCompare(false);
|
||||||
|
$(".date-input").removeClass("input-selected");
|
||||||
|
$(this).addClass("input-selected");
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#date-start-compare").focus(function() {
|
||||||
|
datepickerStart.setCompare(true);
|
||||||
|
datepickerEnd.setCompare(true);
|
||||||
|
$('#compare-options').val(3);
|
||||||
|
$(".date-input").removeClass("input-selected");
|
||||||
|
$(this).addClass("input-selected");
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#date-end-compare").focus(function() {
|
||||||
|
datepickerStart.setCompare(true);
|
||||||
|
datepickerEnd.setCompare(true);
|
||||||
|
$('#compare-options').val(3);
|
||||||
|
$(".date-input").removeClass("input-selected");
|
||||||
|
$(this).addClass("input-selected");
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#datepicker-cancel').click(function() {
|
||||||
|
$('#datepicker').slideUp(200);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#datepicker').show(function() {
|
||||||
|
$('#date-start').focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#datepicker-compare').click(function() {
|
||||||
|
if ($(this).attr("checked")) {
|
||||||
|
$('#compare-options').trigger('change');
|
||||||
|
$('#form-date-body-compare').show();
|
||||||
|
$('#compare-options').prop('disabled', false);
|
||||||
|
} else {
|
||||||
|
datepickerStart.setStartCompare(null);
|
||||||
|
datepickerStart.setEndCompare(null);
|
||||||
|
datepickerEnd.setStartCompare(null);
|
||||||
|
datepickerEnd.setEndCompare(null);
|
||||||
|
$('#form-date-body-compare').hide();
|
||||||
|
$('#compare-options').prop('disabled', true);
|
||||||
|
$('#date-start').focus();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
$('#compare-options').change(function() {
|
||||||
|
if (this.value == 1)
|
||||||
|
setPreviousPeriod();
|
||||||
|
|
||||||
|
if (this.value == 2)
|
||||||
|
setPreviousYear();
|
||||||
|
|
||||||
|
datepickerStart.setStartCompare($("#date-start-compare").val());
|
||||||
|
datepickerStart.setEndCompare($("#date-end-compare").val());
|
||||||
|
datepickerEnd.setStartCompare($("#date-start-compare").val());
|
||||||
|
datepickerEnd.setEndCompare($("#date-end-compare").val());
|
||||||
|
datepickerStart.setCompare(true);
|
||||||
|
datepickerEnd.setCompare(true);
|
||||||
|
|
||||||
|
if (this.value == 3)
|
||||||
|
$('#date-start-compare').focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
if ($('#datepicker-compare').attr("checked"))
|
||||||
|
{
|
||||||
|
if ($("#date-start-compare").val().replace(/^\s+|\s+$/g, '').length == 0)
|
||||||
|
$('#compare-options').trigger('change');
|
||||||
|
|
||||||
|
datepickerStart.setStartCompare($("#date-start-compare").val());
|
||||||
|
datepickerStart.setEndCompare($("#date-end-compare").val());
|
||||||
|
datepickerEnd.setStartCompare($("#date-start-compare").val());
|
||||||
|
datepickerEnd.setEndCompare($("#date-end-compare").val());
|
||||||
|
datepickerStart.setCompare(true);
|
||||||
|
datepickerEnd.setCompare(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
@@ -3,12 +3,12 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-6">
|
<div class="col-lg-6">
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<input type="submit" name="submitDateDay" class="btn btn-default submitDateDay" value="{$translations.Day}">
|
<button type="button" name="submitDateDay" class="btn btn-default submitDateDay" onclick="setDayPeriod()">{$translations.Day}</button>
|
||||||
<input type="submit" name="submitDateMonth" class="btn btn-default submitDateMonth" value="{$translations.Month}">
|
<button type="button" name="submitDateMonth" class="btn btn-default submitDateMonth" onclick="setMonthPeriod()">{$translations.Month}</button>
|
||||||
<input type="submit" name="submitDateYear" class="btn btn-default submitDateYear" value="{$translations.Year}">
|
<button type="button" name="submitDateYear" class="btn btn-default submitDateYear" onclick="setYearPeriod()">{$translations.Year}</button>
|
||||||
<input type="submit" name="submitDateDayPrev" class="btn btn-default submitDateDayPrev" value="{$translations.Day}-1">
|
<button type="button" name="submitDateDayPrev" class="btn btn-default submitDateDayPrev" onclick="setPreviousDayPeriod()">{$translations.Day}-1</button>
|
||||||
<input type="submit" name="submitDateMonthPrev" class="btn btn-default submitDateMonthPrev" value="{$translations.Month}-1">
|
<button type="button" name="submitDateMonthPrev" class="btn btn-default submitDateMonthPrev" onclick="setPreviousMonthPeriod()">{$translations.Month}-1</button>
|
||||||
<input type="submit" name="submitDateYearPrev" class="btn btn-default submitDateYearPrev" value="{$translations.Year}-1">
|
<button type="button" name="submitDateYearPrev" class="btn btn-default submitDateYearPrev" onclick="setPreviousYearPeriod()">{$translations.Year}-1</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-6">
|
<div class="col-lg-6">
|
||||||
|
|||||||
@@ -39,9 +39,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class='form-date-body'>
|
<div class='form-date-body'>
|
||||||
<label>{l s='From'}</label>
|
<label>{l s='From'}</label>
|
||||||
<input class='date-input form-control' id='date-start' placeholder='Start' type='text' name="date_from" value="{$date_from}" />
|
<input class='date-input form-control' id='date-start' placeholder='Start' type='text' name="date_from" value="{$date_from}" data-date-format="{$date_format}" />
|
||||||
<label>{l s='to'}</label>
|
<label>{l s='to'}</label>
|
||||||
<input class='date-input form-control' id='date-end' placeholder='End' type='text' name="date_to" value="{$date_to}" />
|
<input class='date-input form-control' id='date-end' placeholder='End' type='text' name="date_to" value="{$date_to}" data-date-format="{$date_format}" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -61,9 +61,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-date-body" id="form-date-body-compare"{if is_null($compare_date_from) || is_null($compare_date_to)} style="display: none;"{/if}>
|
<div class="form-date-body" id="form-date-body-compare"{if is_null($compare_date_from) || is_null($compare_date_to)} style="display: none;"{/if}>
|
||||||
<label>{l s='From'}</label>
|
<label>{l s='From'}</label>
|
||||||
<input id="date-start-compare" class="date-input form-control" type="text" placeholder="Start" name="compare_date_from" value="{$compare_date_from}" />
|
<input id="date-start-compare" class="date-input form-control" type="text" placeholder="Start" name="compare_date_from" value="{$compare_date_from}" data-date-format="{$date_format}" />
|
||||||
<label>{l s='to'}</label>
|
<label>{l s='to'}</label>
|
||||||
<input id="date-end-compare" class="date-input form-control" type="text" placeholder="End" name="compare_date_to" value="{$compare_date_to}" />
|
<input id="date-end-compare" class="date-input form-control" type="text" placeholder="End" name="compare_date_to" value="{$compare_date_to}" data-date-format="{$date_format}" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class='form-date-actions'>
|
<div class='form-date-actions'>
|
||||||
@@ -82,219 +82,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
{literal}
|
translated_dates = {
|
||||||
function parseFormat(format){
|
days: ['{l s='Sunday' js=1}', '{l s='Monday' js=1}', '{l s='Tuesday' js=1}', '{l s='Wednesday' js=1}', '{l s='Thursday' js=1}', '{l s='Friday' js=1}', '{l s='Saturday' js=1}', '{l s='Sunday' js=1}'],
|
||||||
var separator = format.match(/[.\/\-\s].*?/),
|
daysShort: ['{l s='Sun' js=1}', '{l s='Mon' js=1}', '{l s='Tue' js=1}', '{l s='Wed' js=1}', '{l s='Thu' js=1}', '{l s='Fri' js=1}', '{l s='Sat' js=1}', '{l s='Sun' js=1}'],
|
||||||
parts = format.split(/\W+/);
|
daysMin: ['{l s='Su' js=1}', '{l s='Mo' js=1}', '{l s='Tu' js=1}', '{l s='We' js=1}', '{l s='Th' js=1}', '{l s='Fr' js=1}', '{l s='Sa' js=1}', '{l s='Su' js=1}'],
|
||||||
if (!separator || !parts || parts.length === 0){
|
months: ['{l s='January' js=1}', '{l s='February' js=1}', '{l s='March' js=1}', '{l s='April' js=1}', '{l s='May' js=1}', '{l s='June' js=1}', '{l s='July' js=1}', '{l s='August' js=1}', '{l s='September' js=1}', '{l s='October' js=1}', '{l s='November' js=1}', '{l s='December' js=1}'],
|
||||||
throw new Error("Invalid date format.");
|
monthsShort: ['{l s='Jan' js=1}', '{l s='Feb' js=1}', '{l s='Mar' js=1}', '{l s='Apr' js=1}', '{l s='May' js=1}', '{l s='Jun' js=1}', '{l s='Jul' js=1}', '{l s='Aug' js=1}', '{l s='Sep' js=1}', '{l s='Oct' js=1}', '{l s='Nov' js=1}', '{l s='Dec' js=1}']
|
||||||
}
|
};
|
||||||
return {separator: separator, parts: parts};
|
|
||||||
}
|
|
||||||
|
|
||||||
function parseDate(date, format) {
|
|
||||||
var parts = date.split(format.separator),
|
|
||||||
date = new Date(),
|
|
||||||
val;
|
|
||||||
date.setHours(0);
|
|
||||||
date.setMinutes(0);
|
|
||||||
date.setSeconds(0);
|
|
||||||
date.setMilliseconds(0);
|
|
||||||
if (parts.length === format.parts.length) {
|
|
||||||
var year = date.getFullYear(), day = date.getDate(), month = date.getMonth();
|
|
||||||
for (var i=0, cnt = format.parts.length; i < cnt; i++) {
|
|
||||||
val = parseInt(parts[i], 10)||1;
|
|
||||||
switch(format.parts[i]) {
|
|
||||||
case 'dd':
|
|
||||||
case 'd':
|
|
||||||
day = val;
|
|
||||||
date.setDate(val);
|
|
||||||
break;
|
|
||||||
case 'mm':
|
|
||||||
case 'm':
|
|
||||||
month = val - 1;
|
|
||||||
date.setMonth(val - 1);
|
|
||||||
break;
|
|
||||||
case 'yy':
|
|
||||||
case 'y':
|
|
||||||
year = 2000 + val;
|
|
||||||
date.setFullYear(2000 + val);
|
|
||||||
break;
|
|
||||||
case 'yyyy':
|
|
||||||
case 'Y':
|
|
||||||
year = val;
|
|
||||||
date.setFullYear(val);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
date = new Date(year, month, day, 0 ,0 ,0);
|
|
||||||
}
|
|
||||||
return date;
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatDate(date, format){
|
|
||||||
var val = {
|
|
||||||
d: date.getDate(),
|
|
||||||
m: date.getMonth() + 1,
|
|
||||||
yy: date.getFullYear().toString().substring(2),
|
|
||||||
y: date.getFullYear().toString().substring(2),
|
|
||||||
yyyy: date.getFullYear(),
|
|
||||||
Y: date.getFullYear()
|
|
||||||
};
|
|
||||||
val.d = (val.d < 10 ? '0' : '') + val.d;
|
|
||||||
val.m = (val.m < 10 ? '0' : '') + val.m;
|
|
||||||
var date = [];
|
|
||||||
for (var i=0, cnt = format.parts.length; i < cnt; i++) {
|
|
||||||
date.push(val[format.parts[i]]);
|
|
||||||
}
|
|
||||||
return date.join(format.separator);
|
|
||||||
}
|
|
||||||
{/literal}
|
|
||||||
|
|
||||||
function setPreviousPeriod() {
|
|
||||||
startDate = parseDate($("#date-start").val(), parseFormat('{$date_format}'));
|
|
||||||
startDate = startDate.setDate(startDate.getDate()-1);
|
|
||||||
endDate = parseDate($("#date-end").val(), parseFormat('{$date_format}'));
|
|
||||||
endDate = endDate.setDate(endDate.getDate()-1);
|
|
||||||
diff = endDate - startDate;
|
|
||||||
startDateCompare = startDate-diff;
|
|
||||||
$("#date-end-compare").val(formatDate(new Date(startDate), parseFormat('{$date_format}')));
|
|
||||||
$("#date-start-compare").val(formatDate(new Date(startDateCompare), parseFormat('{$date_format}')));
|
|
||||||
}
|
|
||||||
|
|
||||||
function setPreviousYear() {
|
|
||||||
startDate = parseDate($("#date-start").val(), parseFormat('{$date_format}'));
|
|
||||||
startDate = startDate.setFullYear(startDate.getFullYear() - 1);
|
|
||||||
endDate = parseDate($("#date-end").val(), parseFormat('{$date_format}'));
|
|
||||||
endDate = endDate.setFullYear(endDate.getFullYear() - 1);
|
|
||||||
$("#date-start-compare").val(formatDate(new Date(startDate), parseFormat('{$date_format}')));
|
|
||||||
$("#date-end-compare").val(formatDate(new Date(endDate), parseFormat('{$date_format}')));
|
|
||||||
}
|
|
||||||
|
|
||||||
$(function() {
|
|
||||||
var translated_dates = {
|
|
||||||
days: ["{l s='Sunday'}", "{l s='Monday'}", "{l s='Tuesday'}", "{l s='Wednesday'}", "{l s='Thursday'}", "{l s='Friday'}", "{l s='Saturday'}", "{l s='Sunday'}"],
|
|
||||||
daysShort: ["{l s='Sun'}", "{l s='Mon'}", "{l s='Tue'}", "{l s='Wed'}", "{l s='Thu'}", "{l s='Fri'}", "{l s='Sat'}", "{l s='Sun'}"],
|
|
||||||
daysMin: ["{l s='Su'}", "{l s='Mo'}", "{l s='Tu'}", "{l s='We'}", "{l s='Th'}", "{l s='Fr'}", "{l s='Sa'}", "{l s='Su'}"],
|
|
||||||
months: ["{l s='January'}", "{l s='February'}", "{l s='March'}", "{l s='April'}", "{l s='May'}", "{l s='June'}", "{l s='July'}", "{l s='August'}", "{l s='September'}", "{l s='October'}", "{l s='November'}", "{l s='December'}"],
|
|
||||||
monthsShort: ["{l s='Jan'}", "{l s='Feb'}", "{l s='Mar'}", "{l s='Apr'}", "{l s='May'}", "{l s='Jun'}", "{l s='Jul'}", "{l s='Aug'}", "{l s='Sep'}", "{l s='Oct'}", "{l s='Nov'}", "{l s='Dec'}"]
|
|
||||||
};
|
|
||||||
|
|
||||||
{literal}
|
|
||||||
var datepickerStart = $('.datepicker1').daterangepicker({
|
|
||||||
"dates": translated_dates,
|
|
||||||
"weekStart": 1,
|
|
||||||
"start": $("#date-start").val(),
|
|
||||||
"end": $("#date-end").val()
|
|
||||||
}).on('changeDate', function(ev){
|
|
||||||
if (ev.date.valueOf() >= datepickerEnd.date.valueOf()){
|
|
||||||
datepickerEnd.setValue(ev.date.setMonth(ev.date.getMonth()+1));
|
|
||||||
}
|
|
||||||
}).data('daterangepicker');
|
|
||||||
{/literal}
|
|
||||||
|
|
||||||
startDate = parseDate($("#date-start").val(), parseFormat('{$date_format}'));
|
|
||||||
endDate = parseDate($("#date-end").val(), parseFormat('{$date_format}'));
|
|
||||||
|
|
||||||
if (startDate.getFullYear() == endDate.getFullYear() && startDate.getMonth() == endDate.getMonth())
|
|
||||||
datepickerStart.setValue(startDate.setMonth(startDate.getMonth()-1));
|
|
||||||
|
|
||||||
{literal}
|
|
||||||
var datepickerEnd = $('.datepicker2').daterangepicker({
|
|
||||||
"dates": translated_dates,
|
|
||||||
"weekStart": 1,
|
|
||||||
"start": $("#date-start").val(),
|
|
||||||
"end": $("#date-end").val()
|
|
||||||
}).on('changeDate', function(ev){
|
|
||||||
if (ev.date.valueOf() <= datepickerStart.date.valueOf()){
|
|
||||||
datepickerStart.setValue(ev.date.setMonth(ev.date.getMonth()-1));
|
|
||||||
}
|
|
||||||
}).data('daterangepicker');
|
|
||||||
|
|
||||||
$("#date-start").focus(function() {
|
|
||||||
datepickerStart.setCompare(false);
|
|
||||||
datepickerEnd.setCompare(false);
|
|
||||||
$(".date-input").removeClass("input-selected");
|
|
||||||
$(this).addClass("input-selected");
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#date-end").focus(function() {
|
|
||||||
datepickerStart.setCompare(false);
|
|
||||||
datepickerEnd.setCompare(false);
|
|
||||||
$(".date-input").removeClass("input-selected");
|
|
||||||
$(this).addClass("input-selected");
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#date-start-compare").focus(function() {
|
|
||||||
datepickerStart.setCompare(true);
|
|
||||||
datepickerEnd.setCompare(true);
|
|
||||||
$('#compare-options').val(3);
|
|
||||||
$(".date-input").removeClass("input-selected");
|
|
||||||
$(this).addClass("input-selected");
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#date-end-compare").focus(function() {
|
|
||||||
datepickerStart.setCompare(true);
|
|
||||||
datepickerEnd.setCompare(true);
|
|
||||||
$('#compare-options').val(3);
|
|
||||||
$(".date-input").removeClass("input-selected");
|
|
||||||
$(this).addClass("input-selected");
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#datepicker-cancel').click(function() {
|
|
||||||
$('#datepicker').slideUp(200);
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#datepicker').show(function() {
|
|
||||||
$('#date-start').focus();
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#datepicker-compare').click(function() {
|
|
||||||
if ($(this).attr("checked")) {
|
|
||||||
$('#compare-options').trigger('change');
|
|
||||||
$('#form-date-body-compare').show();
|
|
||||||
$('#compare-options').prop('disabled', false);
|
|
||||||
} else {
|
|
||||||
datepickerStart.setStartCompare(null);
|
|
||||||
datepickerStart.setEndCompare(null);
|
|
||||||
datepickerEnd.setStartCompare(null);
|
|
||||||
datepickerEnd.setEndCompare(null);
|
|
||||||
$('#form-date-body-compare').hide();
|
|
||||||
$('#compare-options').prop('disabled', true);
|
|
||||||
$('#date-start').focus();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
$('#compare-options').change(function() {
|
|
||||||
if (this.value == 1)
|
|
||||||
setPreviousPeriod();
|
|
||||||
|
|
||||||
if (this.value == 2)
|
|
||||||
setPreviousYear();
|
|
||||||
|
|
||||||
datepickerStart.setStartCompare($("#date-start-compare").val());
|
|
||||||
datepickerStart.setEndCompare($("#date-end-compare").val());
|
|
||||||
datepickerEnd.setStartCompare($("#date-start-compare").val());
|
|
||||||
datepickerEnd.setEndCompare($("#date-end-compare").val());
|
|
||||||
datepickerStart.setCompare(true);
|
|
||||||
datepickerEnd.setCompare(true);
|
|
||||||
|
|
||||||
if (this.value == 3)
|
|
||||||
$('#date-start-compare').focus();
|
|
||||||
});
|
|
||||||
|
|
||||||
if ($('#datepicker-compare').attr("checked"))
|
|
||||||
{
|
|
||||||
if ($("#date-start-compare").val().replace(/^\s+|\s+$/g, '').length == 0)
|
|
||||||
$('#compare-options').trigger('change');
|
|
||||||
|
|
||||||
datepickerStart.setStartCompare($("#date-start-compare").val());
|
|
||||||
datepickerStart.setEndCompare($("#date-end-compare").val());
|
|
||||||
datepickerEnd.setStartCompare($("#date-start-compare").val());
|
|
||||||
datepickerEnd.setEndCompare($("#date-end-compare").val());
|
|
||||||
datepickerStart.setCompare(true);
|
|
||||||
datepickerEnd.setCompare(true);
|
|
||||||
}
|
|
||||||
{/literal}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
@@ -212,13 +212,19 @@ class HelperCalendarCore extends Helper
|
|||||||
$bo_theme = 'default';
|
$bo_theme = 'default';
|
||||||
|
|
||||||
if ($context->controller->ajax)
|
if ($context->controller->ajax)
|
||||||
|
{
|
||||||
$html = '<script type="text/javascript" src="'.__PS_BASE_URI__.$admin_webpath
|
$html = '<script type="text/javascript" src="'.__PS_BASE_URI__.$admin_webpath
|
||||||
.'/themes/'.$bo_theme.'/js/date-range-picker.js"></script>';
|
.'/themes/'.$bo_theme.'/js/date-range-picker.js"></script>';
|
||||||
|
$html .= '<script type="text/javascript" src="'.__PS_BASE_URI__.$admin_webpath
|
||||||
|
.'/themes/'.$bo_theme.'/js/calendar.js"></script>';
|
||||||
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
$html = '';
|
$html = '';
|
||||||
$context->controller->addJs(__PS_BASE_URI__.$admin_webpath
|
$context->controller->addJs(__PS_BASE_URI__.$admin_webpath
|
||||||
.'/themes/'.$bo_theme.'/js/date-range-picker.js');
|
.'/themes/'.$bo_theme.'/js/date-range-picker.js');
|
||||||
|
$context->controller->addJs(__PS_BASE_URI__.$admin_webpath
|
||||||
|
.'/themes/'.$bo_theme.'/js/calendar.js');
|
||||||
}
|
}
|
||||||
|
|
||||||
$this->tpl = $this->createTemplate($this->base_tpl);
|
$this->tpl = $this->createTemplate($this->base_tpl);
|
||||||
|
|||||||
Reference in New Issue
Block a user