// Date range picker improvements

This commit is contained in:
Jerome Nadaud
2013-10-21 17:07:57 +02:00
parent aefa821d7f
commit 5f75439a6b
4 changed files with 384 additions and 225 deletions
+361
View File
@@ -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="col-lg-6">
<div class="btn-group">
<input type="submit" name="submitDateDay" class="btn btn-default submitDateDay" value="{$translations.Day}">
<input type="submit" name="submitDateMonth" class="btn btn-default submitDateMonth" value="{$translations.Month}">
<input type="submit" name="submitDateYear" class="btn btn-default submitDateYear" value="{$translations.Year}">
<input type="submit" name="submitDateDayPrev" class="btn btn-default submitDateDayPrev" value="{$translations.Day}-1">
<input type="submit" name="submitDateMonthPrev" class="btn btn-default submitDateMonthPrev" value="{$translations.Month}-1">
<input type="submit" name="submitDateYearPrev" class="btn btn-default submitDateYearPrev" value="{$translations.Year}-1">
<button type="button" name="submitDateDay" class="btn btn-default submitDateDay" onclick="setDayPeriod()">{$translations.Day}</button>
<button type="button" name="submitDateMonth" class="btn btn-default submitDateMonth" onclick="setMonthPeriod()">{$translations.Month}</button>
<button type="button" name="submitDateYear" class="btn btn-default submitDateYear" onclick="setYearPeriod()">{$translations.Year}</button>
<button type="button" name="submitDateDayPrev" class="btn btn-default submitDateDayPrev" onclick="setPreviousDayPeriod()">{$translations.Day}-1</button>
<button type="button" name="submitDateMonthPrev" class="btn btn-default submitDateMonthPrev" onclick="setPreviousMonthPeriod()">{$translations.Month}-1</button>
<button type="button" name="submitDateYearPrev" class="btn btn-default submitDateYearPrev" onclick="setPreviousYearPeriod()">{$translations.Year}-1</button>
</div>
</div>
<div class="col-lg-6">
@@ -39,9 +39,9 @@
</div>
<div class='form-date-body'>
<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>
<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>
@@ -61,9 +61,9 @@
</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}>
<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>
<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 class='form-date-actions'>
@@ -82,219 +82,11 @@
</div>
<script type="text/javascript">
{literal}
function parseFormat(format){
var separator = format.match(/[.\/\-\s].*?/),
parts = format.split(/\W+/);
if (!separator || !parts || parts.length === 0){
throw new Error("Invalid date format.");
}
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}
});
translated_dates = {
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}'],
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}'],
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}'],
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}'],
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}']
};
</script>
+6
View File
@@ -212,13 +212,19 @@ class HelperCalendarCore extends Helper
$bo_theme = 'default';
if ($context->controller->ajax)
{
$html = '<script type="text/javascript" src="'.__PS_BASE_URI__.$admin_webpath
.'/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
{
$html = '';
$context->controller->addJs(__PS_BASE_URI__.$admin_webpath
.'/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);