Date format in SlickGrid - slickgrid

Question

SlickGrid launches the calendar using a default US date format of mm/dd/yyyy. I store dates in my database in Australian format dd/mm/yyyy. how can I change the format of the calendar to take dd/mm/yyyy?

Answer 1

You can use the DatePicker of your choice by writing a new custom editor. The default date editor uses jQueryUI DatePicker.
Personally (I'm in Australia too), I use the default with the following settings:
function DateFormatter(rowIndex, cell, value, columnDef, grid, dataProvider) {
if (value == null || value === "") { return "-"; }
return moment.utc(value).format('ddd, D MMM YYYY');
}
... using moment.js to format the date, and in the DateEditor ...
$input.datepicker({
showOn: "button",
changeMonth: true,
changeYear: true,
dateFormat: 'd/m/yy',
buttonImageOnly: true,
buttonImage: "../images/calendar.gif"
});
Also you could just localise

Answer 2

You can write formatter for row (i use moment.js too):
function dateTimeFormatter (row, cell, value, columnDef, dataContext) {
var dateTime = Date.parse(value);
var result = moment(dateTime);
return result.format('DD.MM.YYYY hh:mm:ss');
}

Answer 3

First, add code to the slick.formatters.js file in your local library:
Add the custom date formatter in two spots:
$.extend(true, window, {
"Slick": {
"Formatters": {
"PercentComplete": PercentCompleteFormatter,
"PercentCompleteBar": PercentCompleteBarFormatter,
"YesNo": YesNoFormatter,
"Checkmark": CheckmarkFormatter,
"Checkbox": CheckboxFormatter,
"Date": Dateformatter //<< this one
}
}
});
and on the end of the file:
function Dateformatter(row, cell, value, columndef, datacontext) {
if (value === null) {
return "";
} else {
var d = new Date(value);
var m = d.getMonth() + 1;
return (d.getDate() + "/" + m + "/" + d.getFullYear());
}
}
})(jQuery); //<< this line is already present
Now you can add the date formatter in your column definitions:
{
id: "lastLoginDate", name: "LastLoginDate", field: "lastLoginDate", formatter: Slick.Formatters.Date
},