dinislage/PrestaShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

// fixs date range picker Wip

Browse Source
This commit is contained in:
Kevin Granger
2013-10-29 10:40:33 +01:00
parent dd10301413
commit b3d7b8754b
5 changed files with 124 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dev/themes/default/css/admin-theme.css
+1 -1
View File
File diff suppressed because one or more lines are too long
admin-dev/themes/default/css/admin-theme/_admin-date-range-picker.sass
+17 -10
View File
@@ -81,20 +81,16 @@ $color-calendar-range-compare: lighten($color-calendar-compare,10%)
margin: 0
border-spacing: 1px
thead
tr th:after
content: ""
border-top: 1px solid darken($color-calendar,10%)
width: 100%
display: block
tr th
background-color: darken($color-calendar,5%)
color: darken($color-calendar,25%)
color: white
font-size: 0.7em
font-weight: 700
border-bottom: solid 1px lighten($color-calendar,7%)
height: 1.5em
text-transform: uppercase
tr:first-child th
background-color: $color-bright
border-bottom: 1px solid darken($color-calendar,5%)
font-weight: 200
font-size: 1.4em
color: $color-calendar-day-selected
@@ -102,10 +98,15 @@ $color-calendar-range-compare: lighten($color-calendar-compare,10%)
text-align: center
padding: 0
position: relative
tr
border-bottom: solid 1px white
td
color: $color-calendar-day-selected
height: 2.4em
padding: 0 8px
@include transition-property(all)
@include transition-duration(0.2s)
@include transition-timing-function(ease-out)
&.day:after
content: ""
position: absolute
@@ -205,6 +206,7 @@ $color-calendar-range-compare: lighten($color-calendar-compare,10%)
text-transform: uppercase
cursor: pointer
&:hover
color: white
background-color: $color-calendar-day-selected
&.active
background-color: $color-calendar-day-selected
@@ -212,10 +214,15 @@ $color-calendar-range-compare: lighten($color-calendar-compare,10%)
&.old
color: $color-calendar-outrange
th
&.switch
width: 145px
&.next, &.prev
width: 2em
&.next, &.prev, &.month-switch
font-size: 1.3em
line-height: 2em
height: 2em
&:hover
background-color: darken($color-calendar,5%)
color: white
thead tr:first-child th
cursor: pointer
admin-dev/themes/default/js/calendar.js
+5
View File
@@ -377,6 +377,11 @@ $( document ).ready(function() {
datepickerEnd.setCompare(true);
}
$('#datepickerExpand').click(function() {
$('#datepicker').removeClass('hide');
$('#date-start').focus();
});
$('#datepickerFrom').click(function() {
$('#datepicker').removeClass('hide');
$('#date-start').focus();
admin-dev/themes/default/js/date-range-picker.js
+94 -142
View File
@@ -56,14 +56,11 @@
this.format = DPGlobal.parseFormat(options.format||this.element.data('date-format')||'Y-m-d');
this.picker = $(DPGlobal.template).appendTo(this.element).show()
.on({
click: $.proxy(this.click, this),
mouseover: $.proxy(this.mouseover, this),
mouseout: $.proxy(this.mouseout, this)
});
//click: $.proxy(this.click, this),
//focus: $.proxy(this.show, this),
//keyup: $.proxy(this.update, this)
.on({
click: $.proxy(this.click, this),
mouseover: $.proxy(this.mouseover, this),
mouseout: $.proxy(this.mouseout, this)
});
this.minViewMode = options.minViewMode||this.element.data('date-minviewmode')||0;
if (typeof this.minViewMode === 'string') {
@@ -236,9 +233,7 @@
nextMonth.setDate(nextMonth.getDate() + 42);
nextMonth = nextMonth.valueOf();
var html = [];
var clsName,
prevY,
prevM;
var clsName, prevY, prevM;
while(prevMonth.valueOf() < nextMonth) {
if (prevMonth.getDay() === this.weekStart) {
html.push('<tr>');
@@ -251,10 +246,12 @@
} else if ((prevM > month && prevY === year) || prevY > year) {
clsName += ' new';
}
// if (prevMonth.valueOf() === currentDate) {
// clsName += ' active';
// }
html.push('<td class="day '+clsName+'" data-val="'+prevMonth.getTime()+'">'+prevMonth.getDate() + '</td>');
if (!clsName){
html.push('<td class="day" data-val="'+prevMonth.getTime()+'">' + prevMonth.getDate() + '</td>');
} else {
html.push('<td class="'+clsName+'"></td>');
}
if (prevMonth.getDay() === this.weekEnd) {
html.push('</tr>');
}
@@ -286,46 +283,7 @@
}
yearCont.html(html);
this.updateRange();
click = 2;
},
updateRange: function() {
$("#datepicker .day").each(function(){
var date_val = parseInt($(this).data('val'),10);
if (end && start)
{
if(date_val > start && date_val < end) {
$(this).not(".old").not(".new").addClass("range");
}
if(date_val === start) {
$(this).not(".old").not(".new").addClass("start-selected");
}
if(date_val === end) {
$(this).not(".old").not(".new").addClass("end-selected");
}
}
if (endCompare && startCompare) {
$(this).removeClass("range-compare")
.removeClass("start-selected-compare")
.removeClass("end-selected-compare");
if(date_val > startCompare && date_val < endCompare) {
$(this).not(".old").not(".new").addClass("range-compare");
}
if(date_val === startCompare) {
$(this).not(".old").not(".new").addClass("start-selected-compare");
}
if(date_val === endCompare) {
$(this).not(".old").not(".new").addClass("end-selected-compare");
}
} else {
$(this).not(".old").not(".new").removeClass("range-compare")
.removeClass("start-selected-compare")
.removeClass("end-selected-compare");
}
});
//click = 2;
},
click: function(e) {
@@ -383,20 +341,17 @@
case 'td':
//reset
if (target.is('.day') && !target.is('.disabled') && !target.is('.old') && !target.is('.new')){
if (target.is('.day') && !target.is('.disabled')){
// reset process for a new range
if(click === 2) {
if (compare)
{
if (compare) {
startCompare = null;
endCompare = null;
}
else
{
else {
start = null;
end = null;
}
click = null;
switched = false;
if (compare) {
@@ -425,7 +380,7 @@
}
if(!switched) {click = 1;} else {click = 2;}
if(!switched){
if(!switched) {
if (compare) {
$("#date-end-compare").val(null).focus().addClass("input-selected");
target.addClass("start-selected-compare").addClass("end-selected-compare");
@@ -435,10 +390,12 @@
}
}
if (compare)
if (compare) {
$("#date-start-compare").removeClass("input-selected").addClass("input-complete");
else
}
else {
$("#date-start").removeClass("input-selected").addClass("input-complete");
}
}
//define end
else {
@@ -460,57 +417,68 @@
}
}
}
if (target.is('.old')||target.is('.new')){
var day = parseInt(target.text(), 10)||1;
var month = this.viewDate.getMonth();
var year = this.viewDate.getFullYear();
if (target.is('.old')) {
month -= 1;
} else if (target.is('.new')) {
month += 1;
}
this.viewDate = new Date(year, month, Math.min(28, day),0,0,0,0);
this.fill();
this.set();
}
break;
}
}
},
range: function(){
updateRange: function() {
console.log("update");
$("#datepicker .day").each(function(){
var date_val = parseInt($(this).data('val'),10);
if (end && start) {
if(date_val > start && date_val < end) {
$(this).addClass("range");
}
if(date_val === start) {
$(this).addClass("start-selected");
}
if(date_val === end) {
$(this).addClass("end-selected");
}
}
if (endCompare && startCompare) {
$(this).removeClass("range-compare").removeClass("start-selected-compare").removeClass("end-selected-compare");
if(date_val > startCompare && date_val < endCompare) {
$(this).addClass("range-compare");
}
if(date_val === startCompare) {
$(this).addClass("start-selected-compare");
}
if(date_val === endCompare) {
$(this).addClass("end-selected-compare");
}
} else {
$(this).removeClass("range-compare").removeClass("start-selected-compare").removeClass("end-selected-compare");
}
});
},
mouseoverRange: function(){
//range
$("#datepicker .day").each(function(){
val = parseInt($(this).data('val'),10);
if (compare)
{
if (!endCompare)
{
if( val > startCompare && val < over)
$(this).not(".old").not(".new").addClass("range-compare");
var date_val = parseInt($(this).data('val'),10);
if (compare) {
if (!endCompare && date_val > startCompare && date_val < over) {
$(this).not(".old").not(".new").addClass("range-compare");
}
else if (!startCompare)
{
if( val > over && val < endCompare)
$(this).not(".old").not(".new").addClass("range-compare");
else if (!startCompare && date_val > over && date_val < endCompare) {
$(this).not(".old").not(".new").addClass("range-compare");
}
else if (startCompare && endCompare)
else if (startCompare && endCompare) {
$(this).addClass("range-compare");
}
}
else
{
if (!end)
{
if( val > start && val < over)
$(this).not(".old").not(".new").addClass("range");
else {
if (!end && date_val > start && date_val < over) {
$(this).not(".old").not(".new").addClass("range");
}
else if (!start)
{
if( val > over && val < end)
$(this).not(".old").not(".new").addClass("range");
else if (!start && date_val > over && date_val < end) {
$(this).not(".old").not(".new").addClass("range");
}
else if (start && end)
$(this).addClass("range");
}
});
},
@@ -519,19 +487,12 @@
//data-val from day overed
over = $(e.target).data("val");
//this condition will focus start just after mouseover on datepicker, but it's weird...
//if(click==2){
//$("#date-start").focus().addClass("input-selected")
//}
//action after first click
//action when one of two dates has been set
if(click === 1 && over){
if (compare)
{
if (compare) {
$("#datepicker .range-compare").removeClass("range-compare");
if (startCompare && over < startCompare)
{
if (startCompare && over < startCompare) {
endCompare = startCompare;
$("#date-end-compare").val(DPGlobal.formatDate(new Date(startCompare), DPGlobal.parseFormat('Y-m-d'))).removeClass("input-selected");
$("#date-start-compare").val(null).focus().addClass("input-selected");
@@ -539,8 +500,7 @@
startCompare = null;
switched = true;
}
else if (endCompare && over > endCompare)
{
else if (endCompare && over > endCompare) {
startCompare = endCompare;
$("#date-start-compare").val(DPGlobal.formatDate(new Date(endCompare), DPGlobal.parseFormat('Y-m-d'))).removeClass("input-selected");
$("#date-end-compare").val(null).focus().addClass("input-selected");
@@ -549,23 +509,19 @@
switched = false;
}
if(startCompare)
{
if (startCompare) {
$(".end-selected-compare").removeClass("end-selected-compare");
$(e.target).addClass("end-selected-compare");
}
else if(endCompare)
{
else if (endCompare) {
$(".start-selected-compare").removeClass("start-selected-compare");
$(e.target).addClass("start-selected-compare");
}
}
else
{
else {
$("#datepicker .range").removeClass("range");
if (start && over < start)
{
if (start && over < start) {
end = start;
$("#date-end").val(DPGlobal.formatDate(new Date(start), DPGlobal.parseFormat('Y-m-d'))).removeClass("input-selected");
$('#date-end').trigger('change');
@@ -574,8 +530,7 @@
start = null;
switched = true;
}
else if (end && over > end)
{
else if (end && over > end) {
start = end;
$("#date-start").val(DPGlobal.formatDate(new Date(end), DPGlobal.parseFormat('Y-m-d'))).removeClass("input-selected");
$('#date-start').trigger('change');
@@ -585,45 +540,42 @@
switched = false;
}
if(start)
{
if (start) {
$(".end-selected").removeClass("end-selected");
$(e.target).addClass("end-selected");
}
else if(end)
{
else if (end) {
$(".start-selected").removeClass("start-selected");
$(e.target).addClass("start-selected");
}
}
//switch
$(".date-input").removeClass("input-complete");
this.range();
this.mouseoverRange();
}
},
mouseout: function(){
if (compare)
{
if (!startCompare||!endCompare)
if (compare) {
if (!startCompare||!endCompare) {
$("#datepicker .range-compare").removeClass("range-compare");
if (!endCompare)
}
if (!endCompare) {
$(".end-selected-compare").removeClass("end-selected-compare");
}
else if (!startCompare)
$(".start-selected-compare").removeClass("start-selected-compare");
}
else
{
if (!start||!end)
else {
if (!start||!end) {
$("#datepicker .range").removeClass("range");
if (!end)
}
if (!end) {
$(".end-selected").removeClass("end-selected");
else if (!start)
}
else if (!start) {
$(".start-selected").removeClass("start-selected");
}
}
},
admin-dev/themes/default/template/controllers/dashboard/helpers/view/view.tpl
+7 -16
View File
@@ -64,32 +64,23 @@
</div>
<div class="col-lg-6">
<div class="form-group">
<div class="input-group fixed-width-lg">
<div class="input-group fixed-width-lg hide">
<label class="input-group-addon">{l s='From'}</label>
<input type="text" name="datepickerFrom" id="datepickerFrom" value="{$datepickerFrom|escape}" class="form-control">
</div>
</div>
<div class="form-group">
<div class="input-group fixed-width-lg inline-form-element">
<div class="input-group fixed-width-lg hide">
<label class="input-group-addon">{l s='To'}</label>
<input type="text" name="datepickerTo" id="datepickerTo" value="{$datepickerTo|escape}" class="form-control">
</div>
</div>
<div class="form-group">
<p class="form-control-static">
13 Days
</p>
</div>
<div class="form-group">
<p class="checkbox">
<label>
<input type="checkbox">
Compare
</label>
</p>
</div>
<div class="form-group pull-right">
<button class="btn btn-default" type="button">
<button id="datepickerExpand" class="btn btn-default" type="button">
<strong class="text-info">{$datepickerFrom|escape}</strong>
-
<strong class="text-info">{$datepickerTo|escape}</strong>
- 13 Days
<i class="icon-calendar-empty"></i>
<i class="icon-caret-down"></i>
</button>