// Add compare system to daterange picker

This commit is contained in:
Jerome Nadaud
2013-10-16 16:30:41 +02:00
parent 37712f0193
commit c7f8b30e88
3 changed files with 310 additions and 94 deletions
@@ -40,12 +40,6 @@
</form>
<script type="text/javascript">
$(document).ready(function() {
/*if ($("form#calendar_form .datepicker").length > 0)
$("form#calendar_form .datepicker").datepicker({
prevText: '',
nextText: '',
dateFormat: 'yy-mm-dd'
});*/
$('#datepickerFrom').click(function() {
$('#datepicker').slideDown(200);
$('#date-start').focus();
@@ -53,7 +47,7 @@
$('#datepickerTo').click(function() {
$('#datepicker').slideDown(200);
$('#date-start').focus();
$('#date-end').focus();
});
});
</script>
@@ -57,7 +57,7 @@
</button>
</div>
<div class="form-date-body">
<div class="form-date-body" id="compare-form-date-body" style="display: none;">
<label>{l s='From'}</label>
<input id="compare-date-start" class="date-input form-control" type="text" placeholder="Start" name="compare_date_from" value="{$compare_date_from}" />
<label>{l s='to'}</label>
@@ -87,15 +87,13 @@
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'}"]
};
var start = '{$date_from}';
var end = '{$date_to}';
{literal}
var datepickerStart = $('.datepicker1').datepicker({
"dates": translated_dates,
"weekStart": 1,
"start": start,
"end": end
"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));
@@ -105,16 +103,42 @@
var datepickerEnd = $('.datepicker2').datepicker({
"dates": translated_dates,
"weekStart": 1,
"start":start,
"end": end
"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('datepicker');
{/literal}
}).data('datepicker');
$("#date-start").focus().addClass("input-selected");
$("#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");
});
$("#compare-date-start").focus(function() {
datepickerStart.setCompare(true);
datepickerEnd.setCompare(true);
$(".date-input").removeClass("input-selected");
$(this).addClass("input-selected");
});
$("#compare-date-end").focus(function() {
datepickerStart.setCompare(true);
datepickerEnd.setCompare(true);
$(".date-input").removeClass("input-selected");
$(this).addClass("input-selected");
});
$('#datepicker-cancel').click(function() {
$('#datepicker').slideUp(200);
});
@@ -124,8 +148,23 @@
});
$('#datepicker-compare').click(function() {
if ($(this).attr("checked"))
if ($(this).attr("checked")) {
datepickerStart.setStartCompare($("#compare-date-start").val());
datepickerStart.setEndCompare($("#compare-date-end").val());
datepickerEnd.setStartCompare($("#compare-date-start").val());
datepickerEnd.setEndCompare($("#compare-date-end").val());
$('#compare-form-date-body').show();
$('#compare-date-start').focus();
} else {
datepickerStart.setStartCompare(null);
datepickerStart.setEndCompare(null);
datepickerEnd.setStartCompare(null);
datepickerEnd.setEndCompare(null);
$('#compare-form-date-body').hide();
$('#date-start').focus();
}
})
{/literal}
});
</script>