Hello,
I have a dhtmlxGrid with two dhxCalendarA columns,
I need to configure eachone with diffrent Date format, as follow :
The first one should have the format “month year” example : “January 2016”. And the second with the classic format “dd/mm/yyyy”.
I have tried mygrid.setDateFormat("%F %Y"); and that changes the format of all calendars.
How can i configue each of calendars separately ?
Unfortunately only a single date format for the grid can be used.
Thank you for the quick response 
.i hope this feature will be added to the next version of dhtmlx.
Hi ,
i think it’s possible to have a specific format for each calendar in a grid. for that, you have to create a specific column type for each date format you need.
the following code demonstrate that :
<script type="text/javascript">
dhtmlx.image_path = "codebase/codebase_suite/imgs/";
dhtmlxEvent(window,"load",function(){
var layout = new dhtmlXLayoutObject(document.body,"1C"); //specifying the format
layout.cells("a").setText("HEADER");
var dts = new dhtmlXDataStore();
dts.data.scheme({
$init : function(obj) {
obj.c3 = new Date();
}
});
var data = [
{
c1:"messi",
c2:"01/01/1991",
c4: "13/08/1991",
c5:"messi@barca.com"
},
{
c1:"ronaldo",
c2:"11/07/2003",
c4:"18/07/2014",
c5:"ronaldo@realmadrid.com"
}
];
dts.parse(data);
var contactsGrid = layout.cells("a").attachGrid();
contactsGrid.setHeader("C1,C2,C3,C4,C5"); //sets the headers of columns
contactsGrid.setColumnIds("c1,c2,c3,c4,c5"); //sets the columns' ids
contactsGrid.setInitWidths("250,250,200,200,200"); //sets the initial widths of columns
contactsGrid.setColAlign("left,left,left,left,left"); //sets the alignment of columns
contactsGrid.setColTypes("ro,myCal2,dhxCalendar,myCal3,ro");
contactsGrid.init();
contactsGrid.sync(dts);
});
function eXcell_myCal2(a) {
if (a) {
this.cell = a;
this.grid = this.cell.parentNode.grid;
if (!this.grid._grid_calendarA) {
var e = this.grid._grid_calendarA = new dhtmlxCalendarObject();
this.grid.callEvent("onDhxCalendarCreated", [e]);
var c = this.grid;
e.attachEvent("onClick", function() {
this._last_operation_calendar = true;
window.setTimeout(function() {
c.editStop()
}, 1);
return true
});
var g = function(h) {
(h || event).cancelBubble = true
};
dhtmlxEvent(e.base, "click", g);
e = null
}
}
}
eXcell_myCal2.prototype = new eXcell;
eXcell_myCal2.prototype.edit = function() {
var c = this.grid.getPosition(this.cell);
this.grid._grid_calendarA._show(false, false);
this.grid._grid_calendarA.setPosition(c[0], c[1] + this.cell.offsetHeight);
this.grid._grid_calendarA._last_operation_calendar = false;
this.grid.callEvent("onCalendarShow", [this.grid._grid_calendarA, this.cell.parentNode.idd, this.cell._cellIndex]);
this.cell._cediton = true;
this.val = this.cell.val;
this._val = this.cell.innerHTML;
var a = this.grid._grid_calendarA.draw;
this.grid._grid_calendarA.draw = function() {};
this.grid._grid_calendarA.setDateFormat((this.grid._dtmask || "%F %Y"));
this.grid._grid_calendarA.setDate(this.val || (new Date()));
this.grid._grid_calendarA.draw = a
};
eXcell_myCal2.prototype.getDate = function() {
if (this.cell.val) {
return this.cell.val
}
return null
};
eXcell_myCal2.prototype.getValue = function() {
if (this.cell._clearCell) {
return ""
}
if (this.grid._dtmask_inc && this.cell.val) {
return this.grid._grid_calendarA.getFormatedDate(this.grid._dtmask_inc, this.cell.val).toString()
}
return this.cell.innerHTML.toString()._dhx_trim()
};
eXcell_myCal2.prototype.detach = function() {
if (!this.grid._grid_calendarA) {
return
}
this.grid._grid_calendarA.hide();
if (this.cell._cediton) {
this.cell._cediton = false
} else {
return
}
if (this.grid._grid_calendarA._last_operation_calendar) {
var e = this.grid._grid_calendarA.getFormatedDate((this.grid._dtmask || "%d/%m/%Y"));
var c = this.grid._grid_calendarA.getDate();
this.cell.val = new Date(c);
this.setCValue(e, c);
this.cell._clearCell = !e;
var a = this.val;
this.val = this._val;
return (this.cell.val.valueOf() != a)
}
return false
};
eXcell_myCal2.prototype.setValue = function(a) {
/** var myCalendar = new dhtmlXCalendarObject();
myCalendar.setFormatedDate("%d/%m/%Y", a);
var value=myCalendar.getFormatedDate("%F %Y");
this.setCValue(value); **/
if (a && typeof a == "object") {
this.cell.val = a;
this.cell._clearCell = false;
this.setCValue(this.grid._grid_calendarA.getFormatedDate((this.grid._dtmask || "%F %Y"), a).toString(), this.cell.val);
return
}
if (!a || a.toString()._dhx_trim() == "") {
a = " ";
this.cell._clearCell = true;
this.cell.val = ""
} else {
if (this.grid._grid_calendarA._last_operation_calendar == undefined || this.grid._grid_calendarA._last_operation_calendar != false){
this.cell._clearCell = false;
this.cell.val = new Date(this.grid._grid_calendarA.setFormatedDate((this.grid._dtmask_inc || this.grid._dtmask || "%d/%m/%Y"), a.toString(), null, true));
//if (this.grid._dtmask_inc) {
a = this.grid._grid_calendarA.getFormatedDate((this.grid._dtmask || "%F %Y"), this.cell.val)
}
if (!((this.cell.val == "NaN") || (this.cell.val == "Invalid Date"))) {
this.setCValue((a || "").toString(), this.cell.val)
} else {
this.cell._clearCell = true;
this.cell.val = new Date();
//this.setCValue(" ", 0)
}
}
};
function eXcell_myCal3(a) {
if (a) {
this.cell = a;
this.grid = this.cell.parentNode.grid;
if (!this.grid._grid_calendarA) {
var e = this.grid._grid_calendarA = new dhtmlxCalendarObject();
this.grid.callEvent("onDhxCalendarCreated", [e]);
var c = this.grid;
e.attachEvent("onClick", function() {
this._last_operation_calendar = true;
window.setTimeout(function() {
c.editStop()
}, 1);
return true
});
var g = function(h) {
(h || event).cancelBubble = true
};
dhtmlxEvent(e.base, "click", g);
e = null
}
}
}
eXcell_myCal3.prototype = new eXcell;
eXcell_myCal3.prototype.edit = function() {
var c = this.grid.getPosition(this.cell);
this.grid._grid_calendarA._show(false, false);
this.grid._grid_calendarA.setPosition(c[0], c[1] + this.cell.offsetHeight);
this.grid._grid_calendarA._last_operation_calendar = false;
this.grid.callEvent("onCalendarShow", [this.grid._grid_calendarA, this.cell.parentNode.idd, this.cell._cellIndex]);
this.cell._cediton = true;
this.val = this.cell.val;
this._val = this.cell.innerHTML;
var a = this.grid._grid_calendarA.draw;
this.grid._grid_calendarA.draw = function() {};
this.grid._grid_calendarA.setDateFormat((this.grid._dtmask || "%F,%D %Y"));
this.grid._grid_calendarA.setDate(this.val || (new Date()));
this.grid._grid_calendarA.draw = a
};
eXcell_myCal3.prototype.getDate = function() {
if (this.cell.val) {
return this.cell.val
}
return null
};
eXcell_myCal3.prototype.getValue = function() {
if (this.cell._clearCell) {
return ""
}
if (this.grid._dtmask_inc && this.cell.val) {
return this.grid._grid_calendarA.getFormatedDate(this.grid._dtmask_inc, this.cell.val).toString()
}
return this.cell.innerHTML.toString()._dhx_trim()
};
eXcell_myCal3.prototype.detach = function() {
if (!this.grid._grid_calendarA) {
return
}
this.grid._grid_calendarA.hide();
if (this.cell._cediton) {
this.cell._cediton = false
} else {
return
}
if (this.grid._grid_calendarA._last_operation_calendar) {
var e = this.grid._grid_calendarA.getFormatedDate((this.grid._dtmask || "%d/%m/%Y"));
var c = this.grid._grid_calendarA.getDate();
this.cell.val = new Date(c);
this.setCValue(e, c);
this.cell._clearCell = !e;
var a = this.val;
this.val = this._val;
return (this.cell.val.valueOf() != a)
}
return false
};
eXcell_myCal3.prototype.setValue = function(a) {
/** var myCalendar = new dhtmlXCalendarObject();
myCalendar.setFormatedDate("%d/%m/%Y", a);
var value=myCalendar.getFormatedDate("%F %Y");
this.setCValue(value); **/
if (a && typeof a == "object") {
this.cell.val = a;
this.cell._clearCell = false;
this.setCValue(this.grid._grid_calendarA.getFormatedDate((this.grid._dtmask || "%F,%D %Y"), a).toString(), this.cell.val);
return
}
if (!a || a.toString()._dhx_trim() == "") {
a = " ";
this.cell._clearCell = true;
this.cell.val = ""
} else {
if (this.grid._grid_calendarA._last_operation_calendar == undefined || this.grid._grid_calendarA._last_operation_calendar != false){
this.cell._clearCell = false;
this.cell.val = new Date(this.grid._grid_calendarA.setFormatedDate((this.grid._dtmask_inc || this.grid._dtmask || "%d/%m/%Y"), a.toString(), null, true));
//if (this.grid._dtmask_inc) {
a = this.grid._grid_calendarA.getFormatedDate((this.grid._dtmask || "%F,%D %Y"), this.cell.val)
}
if (!((this.cell.val == "NaN") || (this.cell.val == "Invalid Date"))) {
this.setCValue((a || "").toString(), this.cell.val)
} else {
this.cell._clearCell = true;
this.cell.val = new Date();
//this.setCValue(" ", 0)
}
}
};
</script>