From 5f75439a6b240dbdd26ce959fec2a6adbc43181b Mon Sep 17 00:00:00 2001
From: Jerome Nadaud <jerome.nadaud@prestashop.com>
Date: Mon, 21 Oct 2013 17:07:57 +0200
Subject: [PATCH] // Date range picker improvements

---
 admin-dev/themes/default/js/calendar.js       | 361 ++++++++++++++++++
 .../template/form_date_range_picker.tpl       |  12 +-
 .../template/helpers/calendar/calendar.tpl    | 230 +----------
 classes/helper/HelperCalendar.php             |   6 +
 4 files changed, 384 insertions(+), 225 deletions(-)
 create mode 100644 admin-dev/themes/default/js/calendar.js

diff --git a/admin-dev/themes/default/js/calendar.js b/admin-dev/themes/default/js/calendar.js
new file mode 100644
index 000000000..76815e5a4
--- /dev/null
+++ b/admin-dev/themes/default/js/calendar.js
@@ -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);
+	}
+});
\ No newline at end of file
diff --git a/admin-dev/themes/default/template/form_date_range_picker.tpl b/admin-dev/themes/default/template/form_date_range_picker.tpl
index 47d129064..367f6a177 100644
--- a/admin-dev/themes/default/template/form_date_range_picker.tpl
+++ b/admin-dev/themes/default/template/form_date_range_picker.tpl
@@ -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">
diff --git a/admin-dev/themes/default/template/helpers/calendar/calendar.tpl b/admin-dev/themes/default/template/helpers/calendar/calendar.tpl
index cffda609d..fc8e9e167 100644
--- a/admin-dev/themes/default/template/helpers/calendar/calendar.tpl
+++ b/admin-dev/themes/default/template/helpers/calendar/calendar.tpl
@@ -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>
\ No newline at end of file
diff --git a/classes/helper/HelperCalendar.php b/classes/helper/HelperCalendar.php
index cce35608e..4d1b0e9a1 100644
--- a/classes/helper/HelperCalendar.php
+++ b/classes/helper/HelperCalendar.php
@@ -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);