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

// Some improvement for range datepicker

Browse Source
This commit is contained in:
Jerome Nadaud
2013-10-15 18:04:28 +02:00
parent 6c6c3b240e
commit 2157311f11
4 changed files with 103 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dev/themes/default/js/date-range-picker.js
+58 -30
View File
@@ -20,11 +20,33 @@
//click action
!function( $ ) {
var click, switched, val, start, end, over;
// Picker object
var Datepicker = function(element, options){
this.element = $(element);
this.format = DPGlobal.parseFormat(options.format||this.element.data('date-format')||'mm/dd/yyyy');
if (typeof options.dates != 'undefined')
DPGlobal.dates = options.dates;
if (typeof options.start != 'undefined'){
if (options.start.constructor === String)
start = DPGlobal.parseDate(options.start, DPGlobal.parseFormat('Y-m-d')).getTime();
else if (options.start.constructor === Number)
start = options.start;
else if (options.start.constructor === Date)
start = options.start.getTime();
}
if (typeof options.end != 'undefined'){
if (options.end.constructor === String)
end = DPGlobal.parseDate(options.end, DPGlobal.parseFormat('Y-m-d')).getTime();
else if (options.end.constructor === Number)
end = options.end;
else if (options.end.constructor === Date)
end = options.end.getTime();
}
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),
@@ -72,10 +94,10 @@
this.update();
this.showMode();
};
Datepicker.prototype = {
constructor: Datepicker,
show: function(e) {
this.picker.show();
@@ -99,7 +121,7 @@
var formated = DPGlobal.formatDate(this.date, this.format);
this.element.data('date', formated);
},
setValue: function(newDate) {
if (typeof newDate === 'string') {
this.date = DPGlobal.parseDate(newDate, this.format);
@@ -110,7 +132,7 @@
this.viewDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1, 0, 0, 0, 0);
this.fill();
},
update: function(newDate){
this.date = DPGlobal.parseDate(
typeof newDate === 'string' ? newDate : (this.isInput ? this.element.prop('value') : this.element.data('date')),
@@ -119,7 +141,7 @@
this.viewDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1, 0, 0, 0, 0);
this.fill();
},
fillDow: function(){
var dowCnt = this.weekStart;
var html = '<tr>';
@@ -129,7 +151,7 @@
html += '</tr>';
this.picker.find('.datepicker-days thead').append(html);
},
fillMonths: function(){
var html = '';
var i = 0;
@@ -138,7 +160,7 @@
}
this.picker.find('.datepicker-months td').append(html);
},
fill: function() {
var d = new Date(this.viewDate),
year = d.getFullYear(),
@@ -180,7 +202,7 @@
}
this.picker.find('.datepicker-days tbody').empty().append(html.join(''));
var currentYear = this.date.getFullYear();
var months = this.picker.find('.datepicker-months')
.find('th:eq(1)')
.text(year)
@@ -189,7 +211,7 @@
if (currentYear === year) {
months.eq(this.date.getMonth()).addClass('active');
}
html = '';
year = parseInt(year/10, 10) * 10;
var yearCont = this.picker.find('.datepicker-years')
@@ -205,21 +227,23 @@
yearCont.html(html);
$("#datepicker .day").each(function(){
var date_val = $(this).data("val");
var date_val = parseInt($(this).data('val'),10);
if(end&&start){
if(date_val > start && date_val < end){
if(date_val > start && date_val < end) {
$(this).not(".old").not(".new").addClass("range");
}
if(date_val === start){
if(date_val === start) {
$(this).not(".old").not(".new").addClass("start-selected");
}
if(date_val === end){
if(date_val === end) {
$(this).not(".old").not(".new").addClass("end-selected");
}
}
});
},
click: function(e) {
e.stopPropagation();
e.preventDefault();
@@ -283,7 +307,7 @@
$(".start-selected").removeClass("start-selected");
target.addClass("start-selected");
start = target.data("val");
$("#date-start").val(start);
$("#date-start").val(DPGlobal.formatDate(new Date(start), DPGlobal.parseFormat('Y-m-d')));
if(!switched) {click = 1;} else {click = 2;}
if(!switched){
$("#date-end").val(null).focus().addClass("input-selected");
@@ -296,7 +320,7 @@
$(".end-selected").removeClass("end-selected");
target.addClass("end-selected");
end = target.data("val");
$("#date-end").val(end);
$("#date-end").val(DPGlobal.formatDate(new Date(end), DPGlobal.parseFormat('Y-m-d')));
click = 2;
$("#date-end").removeClass("input-selected").addClass("input-complete");
//this.range();
@@ -325,11 +349,11 @@
$("#datepicker .day").each(function(){
val = parseInt($(this).data('val'),10);
if (!end){
if( val > start && val < over){
if( val > start && val < over){
$(this).not(".old").not(".new").addClass("range");
}
} else if (!start){
if( val > over && val < end){
if( val > over && val < end){
$(this).not(".old").not(".new").addClass("range");
}
} else if (start&&end) {
@@ -337,11 +361,11 @@
}
});
},
mouseover: function(e){
//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")
@@ -353,14 +377,14 @@
//switch
if (start && over < start ){
end = start;
$("#date-end").val(start).removeClass("input-selected");
$("#date-end").val(DPGlobal.formatDate(new Date(start), DPGlobal.parseFormat('Y-m-d'))).removeClass("input-selected");
$("#date-start").val(null).focus().addClass("input-selected");
$("#datepicker .start-selected").removeClass("start-selected").addClass("end-selected");
start = null;
switched = true;
} else if (end && over > end ){
start = end;
$("#date-start").val(end).removeClass("input-selected");
$("#date-start").val(DPGlobal.formatDate(new Date(end), DPGlobal.parseFormat('Y-m-d'))).removeClass("input-selected");
$("#date-end").val(null).focus().addClass("input-selected");
$("#datepicker .end-selected").removeClass("end-selected").addClass("start-selected");
end = null;
@@ -395,7 +419,7 @@
e.stopPropagation();
e.preventDefault();
},
showMode: function(dir) {
if (dir) {
this.viewMode = Math.max(this.minViewMode, Math.min(2, this.viewMode + dir));
@@ -403,7 +427,7 @@
this.picker.find('>div').hide().filter('.datepicker-'+DPGlobal.modes[this.viewMode].clsName).show();
}
};
$.fn.datepicker = function ( option, val ) {
return this.each(function () {
var $this = $(this),
@@ -422,7 +446,7 @@
}
};
$.fn.datepicker.Constructor = Datepicker;
var DPGlobal = {
modes: [
{
@@ -485,10 +509,12 @@
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;
@@ -503,10 +529,12 @@
d: date.getDate(),
m: date.getMonth() + 1,
yy: date.getFullYear().toString().substring(2),
yyyy: date.getFullYear()
y: date.getFullYear().toString().substring(2),
yyyy: date.getFullYear(),
Y: date.getFullYear()
};
val.dd = (val.d < 10 ? '0' : '') + val.d;
val.mm = (val.m < 10 ? '0' : '') + val.m;
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]]);
admin-dev/themes/default/template/form_date_range_picker.tpl
+12 -6
View File
@@ -29,9 +29,6 @@
</div>
</div>
</div>
<div class="col-md-4">
<input type="submit" name="submitDatePicker" id="submitDatePicker" class="btn btn-default pull-right" value="{if isset($translations.Save)}{$translations.Save}{else}{l s='Save'}{/if}" />
</div>
</div>
</div>
</div>
@@ -40,15 +37,24 @@
{$calendar}
</div>
</div>
</form>
</form>
<script type="text/javascript">
$(document).ready(function() {
if ($("form#calendar_form .datepicker").length > 0)
/*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();
});
$('#datepickerTo').click(function() {
$('#datepicker').slideDown(200);
$('#date-start').focus();
});
});
</script>
</div>
admin-dev/themes/default/template/helpers/calendar/calendar.tpl
+31 -4
View File
@@ -47,7 +47,7 @@
<div class='form-date-heading clearfix'>
<span class="checkbox-title">
<label >
<input type='checkbox'>
<input type='checkbox' id="datepicker-compare">
{l s='Compare to'}
</label>
</span>
@@ -65,7 +65,7 @@
</div>
</div>
<div class='form-date-actions'>
<button class='btn btn-default' type='button'>
<button class='btn btn-default' type='button' id="datepicker-cancel">
<i class='icon-remove text-danger'></i>
{l s='Cancel'}
</button>
@@ -80,8 +80,35 @@
</div>
<script type="text/javascript">
$(function() {
$('.datepicker1').datepicker();
$('.datepicker2').datepicker();
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'}"]
};
var start = '{$date_from}';
var end = '{$date_to}';
{literal}
$('.datepicker1').datepicker({"dates": translated_dates, "weekStart": 1, "start": start, "end": end});
$('.datepicker2').datepicker({"dates": translated_dates, "weekStart": 1, "start": start, "end": end});
//$('.datepicker1').datepicker('range');
//$('.datepicker2').range();
{/literal}
$("#date-start").focus().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-date-start').focus();
})
});
</script>
classes/helper/HelperCalendar.php
+2 -2
View File
@@ -26,7 +26,7 @@
class HelperCalendarCore extends Helper
{
const DEFAULT_DATE_FORMAT = 'dd-mm-yyyy';
const DEFAULT_DATE_FORMAT = 'Y-m-d';
private $_actions;
private $_compare_date_from;
@@ -62,7 +62,7 @@ class HelperCalendarCore extends Helper
public function setCompareDateFrom($value)
{
if (!isset($value) || $value == '');
if (!isset($value) || $value == '')
$value = date('Y-m-d', strtotime("-31 days"));
if (!is_string($value))