有没有办法为 IE 填充“dd-MON-yyyy”日期格式
Posted
技术标签:
【中文标题】有没有办法为 IE 填充“dd-MON-yyyy”日期格式【英文标题】：Is there a way to shim the "dd-MON-yyyy" date format for IE 【发布时间】：2013-05-03 05:31:11 【问题描述】：我支持的组织规定所有日期都将以 dd-MON-yyyy 格式显示（10-SEP-2006、08-MAY-2013）。请参阅http://jsfiddle.net/jhfrench/zpWWa/ 获取示例数据集。
在 Chrome 上运行时，dataTables 可以正确将此模式识别为日期。
在 IE7 上运行时，dataTables（或 IE？）无法将此模式识别为日期。 Unfortunately, we have to support IE7。 有没有办法为 IE 填充“dd-MON-yyyy”格式，但不适用于 Chrome 或其他原生支持该格式的浏览器？
我正在使用 IE 条件来指定 html 标签，所以我可以关闭<HTML class="lt-ie9">；我也在此页面上使用 Modernizr（如果有相关测试）。
【问题讨论】：
IE 将识别没有连字符的格式。他们也需要吗？ this question 似乎非常相似。你试过这种方法吗？ FWIW，dd-MON-yyyy 在日本等使用月份数字（而不是名称）的文化中仍然模棱两可。 这是一个类似的问题，但该解决方案引入了问题，因为我必须预先定义哪些列是日期。 【参考方案1】：与其尝试填充 IE7，我认为最简单的解决方案是编写自己的排序函数，然后为使用日期格式的所有列调用它。使用 DataTables 很容易做到这一点，如下所述：
http://www.datatables.net/plug-ins/sorting
您可以手动定义表格以对您的列使用新的排序算法，但这有点笨拙，因为您需要在使用该格式的任何地方执行此操作。相反，您可以自动检测，如下所述：
http://www.datatables.net/plug-ins/type-detection
我在这里创建了一个带有快速解决方案的小提琴分支 - 我只是将日期转换为一个简单的数字 - 只要你相信数据，这应该没问题。否则，您可能希望转换为实际的日期对象，这可能是一种更可靠的方法。
http://jsfiddle.net/pFdyK/
代码：
// Put these somewhere better than a global :)
var months = "JAN_FEB_MAR_APR_MAY_JUN_JUL_AUG_SEP_OCT_NOV_DEC".split("_");
function monthToOrd(month)
return $.inArray(month, months);
function customDateToOrd(date)
// Convert to a number YYYYMMDD which we can use to order
var dateParts = date.split(/-/);
var day = dateParts[0];
var month = monthToOrd(dateParts[1]);
var year = dateParts[2];
var numericDate = (year * 10000) + (month * 100) + day;
return numericDate;
// This will help DataTables magic detect your custom format
// Unshift so that it's the first data type (overridding in built ones)
jQuery.fn.dataTableExt.aTypes.unshift(
function ( sData )
// You might want to make this check a little tighter so you don't match
// invalid dates, but this should do for now
if (sData.match(/\d2-[A-Za-z]3-\d4/))
return 'custom-date';
else
return null;
);
// define the sorts
jQuery.fn.dataTableExt.oSort['custom-date-asc'] = function(a,b)
var ordA = customDateToOrd(a);
var ordB = customDateToOrd(b);
return (ordA < ordB) ? -1 : ((ordA > ordB) ? 1 : 0);
;
jQuery.fn.dataTableExt.oSort['custom-date-desc'] = function(a,b)
var ordA = customDateToOrd(a);
var ordB = customDateToOrd(b);
return (ordA < ordB) ? 1 : ((ordA > ordB) ? -1 : 0);
;
$(document).ready(function()
$('html').addClass('lt-ie9');
$('table.datatable').dataTable();
);
【讨论】：
NB 代码假定日期格式为大写，但你应该明白【参考方案2】：在Shaun's fine answer 上扩展，至少有两种方法可以测试需要以填充 dd-MMM-yyyy 格式。在与JSLint 密切协商后，我修改了 Shaun 的代码（我发誓它讨厌我写的每一行 ECMA）。
使用 IE 条件句
如果您已经在使用 IE 条件 (<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->)，那么您只需测试 HTML.lt-ie9 并有条件地定义新的排序算法，然后调用 dataTables：
//test for html.lt-ie9
if ($('html.lt-ie9').length)
//create the new magic sorting
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];
;
// 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)-\d4/i.test(sData))
return 'custom-date-dd-mmm-yyyy';
return null;
);
// define the sorts
jQuery.fn.dataTableExt.oSort['custom-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['custom-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);
;
;
//now call the dataTable plugin against the target tables (in this case, any table with `class="dataTable"`)
$('table.datatable').dataTable();
见IE conditionals example at http://jsfiddle.net/jhfrench/nEsCt/
使用Modernizr进行测试
另一方面，如果您倾向于使用 Modernizr 来测试功能，我们可以定义 Modernizr 测试，然后使用 Modernizr 执行测试并有条件地加载 shim 魔法（来自 .js 文件），然后调用dataTables：
//define the Modernizr test
Modernizr.addTest('valid_date_dd_mmm_yyyy', function()
return !isNaN(Date.parse("17-MAY-2013"));
);
//if Modernizr determines "dd-mmm-yyyy" dates are not supported, load the following javascript resources
Modernizr.load([
test: Modernizr.valid_date_dd_mmm_yyyy,
nope: 'http://appliedinter.net/Workstream/common_files/js/dataTable_shim_dd-MMM-yyyy.js',
complete: function ()
$(document).ready(function ()
//now call the dataTable plugin against the target tables (in this case, any table with `class="dataTable"`)
$('table.datatable').dataTable();
);
]);
见Modernizr approach at http://jsfiddle.net/jhfrench/tNkGC/
【讨论】：
以上是关于有没有办法为 IE 填充“dd-MON-yyyy”日期格式的主要内容，如果未能解决你的问题，请参考以下文章
如何在sql中将dd-mm-yyyy转换为DD-MON-yyyy