Data table support by default "YYYY-MM-DD" so to support date format "dd-MMM-yyyy" and "MMM-yyyy" we need to include a plugin code below:-
(function () {
var customDateDDMMMYYYYToOrd = function (date) {
"use strict"; //let's avoid tom-foolery in this function
// Convert to a number YYYYMMDD which we can use to order
var dateParts = date.split(/-/);
return (dateParts[2] * 10000) + ($.inArray(dateParts[1].toUpperCase(), ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]) * 100) + (dateParts[0]*1);
};
// This will help DataTables magic detect the "dd-MMM-yyyy" format; Unshift
// so that it's the first data type (so it takes priority over existing)
jQuery.fn.dataTableExt.aTypes.unshift(
function (sData) {
"use strict"; //let's avoid tom-foolery in this function
if (/^([0-2]?\d|3[0-1])-(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)-\d{4}/i.test(sData)) {
return 'date-dd-mmm-yyyy';
}
return null;
}
);
// define the sorts
jQuery.fn.dataTableExt.oSort['date-dd-mmm-yyyy-asc'] = function (a, b) {
"use strict"; //let's avoid tom-foolery in this function
var ordA = customDateDDMMMYYYYToOrd(a),
ordB = customDateDDMMMYYYYToOrd(b);
return (ordA < ordB) ? -1 : ((ordA > ordB) ? 1 : 0);
};
jQuery.fn.dataTableExt.oSort['date-dd-mmm-yyyy-desc'] = function (a, b) {
"use strict"; //let's avoid tom-foolery in this function
var ordA = customDateDDMMMYYYYToOrd(a),
ordB = customDateDDMMMYYYYToOrd(b);
return (ordA < ordB) ? 1 : ((ordA > ordB) ? -1 : 0);
};
})();
and we have to specify the new introduced type to column of date as below:-
var costRevenueGraph = $('#costRevenueGraphTbl').dataTable({
"sPaginationType": "full_numbers",
"paging": true,
"bSort": true,
"ordering": false,
"info": false,
"iDisplayLength": 10,
"aaData": costRevenueGraphData,
"sImgDirPath": "http://assets.cms.gov/resources/libs/datatables/1.9.1/images/",
"aoColumns": [
{ "mDataProp": "day","sType":'date-dd-mmm-yyyy' },
{ "mDataProp": 'cost',"sType":'formatted-num' },
{ "mDataProp": 'costOFInternalFailure',"sType":'formatted-num' },
{ "mDataProp": 'costOFExternalFailure',"sType":'formatted-num' },
{ "mDataProp": 'costOFPreventiveInvestment',"sType":'formatted-num' },
{ "mDataProp": 'costOFAssessmentInvestment',"sType":'formatted-num' },
{ "mDataProp": 'costOfRedHerringInvestment',"sType":'formatted-num' },
{ "mDataProp": 'revenue',"sType":'formatted-num' }
],
"aoColumnDefs": [{
"aTargets": [0],
"fnRender": function(data, type, row) {
return $filter('date')(data.aData[data.mDataProp], 'dd-MMM-yyyy');
}
},{
"aTargets": [1,2,3,4,5,6,7],
"aType":'formatted-num',
"fnRender": function(data, type, row) {
return $filter('currency')(data.aData[data.mDataProp], '$');
}
}]
});
As same above if we want to support format "MMM-yyyy" we need to do a little hack
(function () {
var customDateDDMMMYYYYToOrd = function (date) {
"use strict"; //let's avoid tom-foolery in this function
// Convert to a number YYYYMMDD which we can use to order
date= "01-"+date
var dateParts = date.split(/-/);
return (dateParts[2] * 10000) + ($.inArray(dateParts[1].toUpperCase(), ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]) * 100) + (dateParts[0]*1);
};
// This will help DataTables magic detect the "dd-MMM-yyyy" format; Unshift
// so that it's the first data type (so it takes priority over existing)
jQuery.fn.dataTableExt.aTypes.unshift(
function (sData) {
sData= "01-"+date
"use strict"; //let's avoid tom-foolery in this function
if (/^([0-2]?\d|3[0-1])-(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)-\d{4}/i.test(sData)) {
return 'date-dd-mmm-yyyy';
}
return null;
}
);
// define the sorts
jQuery.fn.dataTableExt.oSort['date-dd-mmm-yyyy-asc'] = function (a, b) {
"use strict"; //let's avoid tom-foolery in this function
var ordA = customDateDDMMMYYYYToOrd(a),
ordB = customDateDDMMMYYYYToOrd(b);
return (ordA < ordB) ? -1 : ((ordA > ordB) ? 1 : 0);
};
jQuery.fn.dataTableExt.oSort['date-dd-mmm-yyyy-desc'] = function (a, b) {
"use strict"; //let's avoid tom-foolery in this function
var ordA = customDateDDMMMYYYYToOrd(a),
ordB = customDateDDMMMYYYYToOrd(b);
return (ordA < ordB) ? 1 : ((ordA > ordB) ? -1 : 0);
};
})();
and how to implement here is a demo
var costRevenueGraph = $('#fcSimulationGraphTbl').dataTable({
"sPaginationType": "full_numbers",
"paging": true,
"bSort": true,
"ordering": false,
"info": false,
"iDisplayLength": 10,
"aaData": forecastingGraphObjTblData,
"sImgDirPath": "http://assets.cms.gov/resources/libs/datatables/1.9.1/images/",
"aoColumns": [
{ "mDataProp": "day","sType":'date-dd-mmm-yyyy' },
{ "mDataProp": 'forecastDemand',"sType":'formatted-num' },
{ "mDataProp": 'actualDemand',"sType":'formatted-num' },
{ "mDataProp": 'actualAbsolutePercentageError',"sType":'percent' },
{ "mDataProp": 'trackingSignal',"sType":'percent' }
],
"aoColumnDefs": [{
"aTargets": [0],
"fnRender": function(data, type, row) {
return $filter('date')(data.aData[data.mDataProp], 'MMM-yyyy');
}
},{
"aTargets": [1,2],
"aType":'formatted-num',
"fnRender": function(data, type, row) {
return $filter('number')(data.aData[data.mDataProp]);
}
},{
"aTargets": [3,4],
"aType":'percent',
"fnRender": function(data, type, row) {
return data.aData[data.mDataProp]+'%';
}
}]
});