Date format/timestamps?

[Florian]

Hi,

I tried slickgrid and really like it!

I want to show an "event" table which has a "date" field. Is there any
way to customize the way the date is displayed? (I don't want m/d/Y,
but d.m.Y).
Can the date formatter work with timestamps, too? It should still show
the datepicker when you try to edit it...

Sorry if I ask stupid questions, but I'm new in using slickgrid and
can't find much documentation about it ;-)

[Chris]

Hi,

I'm new to slickgrid, and like it a lot too! I'm not sure this is the
easiest solution, but here's how I solved a similar problem:

If you want to source the data and use (edit) the data in the same
format of d.m.Y, the easiest way would probably be to make a version
of the DateCellEditor (code in slick.editors.js) with the init
function modified as such:

this.init = function() {
$input = $("<INPUT type=text class='editor-text' />");
$input.appendTo(args.container);
$input.focus().select();
$input.datepicker({
showOn: "button",
buttonImageOnly: true,
buttonImage: "../images/calendar.gif",
beforeShow: function() { calendarOpen = true },
onClose: function() { calendarOpen = false },
dateFormat: "dd.mm.yy"
});
$input.width($input.width() - 18);
};

If this doesn't quite give the format you want, try
http://docs.jquery.com/UI/Datepicker/formatDate for date format
strings. All the magic here is in the jquery datepicker.

If you want to be able to source the data in one format, but display
it in another, that can be done by using the altFormat option for
jquery datepicker and by also writing a formatter. I can post example
if you like.

[Florian]

Hi,

thanks for your solution. Not that makes sense. ;-)

I now have to use altFormat and altField for the "original data", but
where is the "plain data" field inside slickgrid? Or do i have to make
slickgrid show 2 fields, one with timestamp (from database), one with
date (calculated by js from timespamp) and hide the first one?

I'm pretty confused ;-)

Florian

Can you post an example where you see only the date

On 22 Aug., 06:35, Chris <crwty...@gmail.com> wrote:
> Hi,
>
> I'm new to slickgrid, and like it a lot too! I'm not sure this is the
> easiest solution, but here's how I solved a similar problem:
>
> If you want to source the data and use (edit) the data in the same
> format of d.m.Y, the easiest way would probably be to make a version
> of the DateCellEditor (code in slick.editors.js) with the init
> function modified as such:
>
>             this.init = function() {
>                 $input = $("<INPUT type=text class='editor-text' />");
>                 $input.appendTo(args.container);
>                 $input.focus().select();
>                 $input.datepicker({
>                     showOn: "button",
>                     buttonImageOnly: true,
>                     buttonImage: "../images/calendar.gif",
>                     beforeShow: function() { calendarOpen = true },
>                     onClose: function() { calendarOpen = false },
>                     dateFormat: "dd.mm.yy"
>                 });
>                 $input.width($input.width() - 18);
>             };
>

> If this doesn't quite give the format you want, tryhttp://docs.jquery.com/UI/Datepicker/formatDatefor date format

[Chris]

Hi,

So, after I replied to your question, I looked over my code and
realized that using the altFormat was not the best way to do this (to
use one format from the datasource and another to show), and was in
fact causing a bug in my code. I hope I didn't throw you too far off
with that. However, I think I have a solution, which I'll cut and
past below. (I haven't tested this too much yet, but I think its the
right path)

Basically, the way this works is to define a formatter, for converting
the date from source format to the format we want to display (I'll
call this show format). Then, we also define an editor which converts
from source format to show format when loading data, and from show
format to source format when putting it back (serializing it). The
formats are defined in the coumn definitions, using an attribute
ShowDateFormat and SourceDateFormat.

Here's an example of the column definition part:
{id:"hiredate" , name:"hiredate" , field:"hiredate" , width:"120" ,
formatter: DateCellFormatter,
editor: DateCellEditor2 , DateSourceFormat: "yy-mm-dd" ,
DateShowFormat: "mm/dd/yy" },

Now, here's the formatter part that I used (add to the similar looking
parts in slick.editors.js)

DateCellFormatter : function(row, cell, value, columnDef,
dataContext){
if(value != '0000-00-00'){
var thedate = $.datepicker.parseDate(columnDef.DateSourceFormat,
value);
return $.datepicker.formatDate( columnDef.DateShowFormat,
thedate );
}else{
return '';
}
},



And, heres the part I used for an editor (DateCellEditor2). Most is
the same as DateCellEditor.

DateCellEditor2 : function(args) {
var $input;
var defaultValue;
var scope = this;
var calendarOpen = false;
var showFormat = "yy-mm-dd";
var sourceFormat = "yy-mm-dd";

this.init = function() {
if(args.column.DateSourceFormat != undefined){
sourceFormat = args.column.DateSourceFormat;
}
if(args.column.DateShowFormat != undefined){
showFormat = args.column.DateShowFormat;

}
$input = $("<INPUT type=text class='editor-text' />");
$input.appendTo(args.container);
$input.focus().select();
$input.datepicker({
showOn: "button",

beforeShow: function() { calendarOpen = true },
onClose: function() { calendarOpen = false },

dateFormat: showFormat

});
$input.width($input.width() - 18);
};

this.destroy = function() {
$.datepicker.dpDiv.stop(true,true);
$input.datepicker("hide");
$input.datepicker("destroy");
$input.remove();
};

this.show = function() {
if (calendarOpen) {
$.datepicker.dpDiv.stop(true,true).show();
}
};

this.hide = function() {
if (calendarOpen) {
$.datepicker.dpDiv.stop(true,true).hide();
}
};

this.position = function(position) {
if (!calendarOpen) return;
$.datepicker.dpDiv
.css("top", position.top + 30)
.css("left", position.left);
};

this.focus = function() {
$input.focus();
};

this.loadValue = function(item) {
defaultValue = item[args.column.field];
var thedate = $.datepicker.parseDate(sourceFormat, defaultValue);
defaultValue = $.datepicker.formatDate( showFormat, thedate );

$input.val(defaultValue);
$input[0].defaultValue = defaultValue;
$input.select();
};

this.serializeValue = function() {
var thedate = $.datepicker.parseDate(showFormat, $input.val());
return $.datepicker.formatDate( sourceFormat,
thedate );
};

this.applyValue = function(item,state) {
item[args.column.field] = state;
};

this.isValueChanged = function() {
return (!($input.val() == "" && defaultValue == null))
&& ($input.val() != defaultValue);
};

this.validate = function() {
return {
valid: true,
msg: null
};
};

this.init();
},

Sorry to throw you off the first time, but I hope this might help!

-Chris

> > If this doesn't quite give the format you want, tryhttp://docs.jquery.com/UI/Datepicker/formatDatefordate format

[Florian]

Hi!

No problem, I pre-formatted the timestamp to dd.mm.yy before pushing
it into data and worked on other parts of the script ;-)

Will look at your code today. Thanks!

Do you have any idea if - and how enableAddRow works? When I set it to
true, I see the last row, but can't edit one field. I can input
something in one field, but can't quit the editor and select the next
field.

Florian

[Florian]

Okay, I added your ideas to my TimestampCellEditor and
TimestampCellFormatter.
Was a bit tricky to debug, because Javascript timestamps are
milliseconds and unix timestamps are seconds, but now it works.

I hope you can also help me with the enableAddRow-problem :-)

Code of formatters and editors:
TimestampCellFormatter : function(row, cell, value, columnDef,
dataContext) {
if (value == null || value === "")
return "";
var thedate = $.datepicker.parseDate("@", value * 1000);

return $.datepicker.formatDate("dd.mm.yy", thedate);
},
TimestampCellEditor : function(args) {

var $input;
var defaultValue;
var scope = this;
var calendarOpen = false;

this.init = function() {
$input = $("<INPUT type=text class='editor-text' />");
$input.appendTo(args.container);
$input.focus().select();
$input.datepicker({
showOn: "button",
buttonImageOnly: true,
buttonImage: "../images/calendar.gif",
beforeShow: function() { calendarOpen = true },
onClose: function() { calendarOpen = false },
dateFormat: "dd.mm.yy"
});
$input.width($input.width() - 18);
};

...

this.loadValue = function(item) {
defaultValue = item[args.column.field];

var thedate = $.datepicker.parseDate("@", defaultValue * 1000);
defaultValue = $.datepicker.formatDate( "dd.mm.yy", thedate);

$input.val(defaultValue);
$input[0].defaultValue = defaultValue;
$input.select();
};

this.serializeValue = function() {

var thedate = $.datepicker.parseDate("dd.mm.yy", $input.val());
return $.datepicker.formatDate("@", thedate) / 1000;
};
...