7

zu dimmen. Die von mir unterstützte Organisation schreibt vor, dass alle Daten im Format dd-MON-yyyy angezeigt werden (10-SEP-2006, 08-MAY- 2013). Ein Beispieldatensatz finden Sie unter http://jsfiddle.net/jhfrench/zpWWa/.Gibt es eine Möglichkeit, das Datumsformat "dd-MON-yyyy" für IE

Bei Ausführung in Chrome erkennt dataTables dieses Muster korrekt als Datum.

Wenn DataTables (oder IE?) Auf IE7 ausgeführt wird, erkennt dieses Muster nicht als ein Datum. Unfortunately, we have to support IE7. Gibt es eine Möglichkeit, das Format "dd-MON-yyyy" für den IE zu shimpen, aber nicht für Chrome oder andere Browser, die dieses Format nativ unterstützen?

Ich verwende IE-Bedingungen, um das HTML-Tag anzugeben, also könnte ich von <HTML class="lt-ie9"> abwählen; Ich verwende auch Modernizr auf dieser Seite (wenn es einen relevanten Test gibt).

+0

IE wird dieses Format erkennen, ohne die Bindestriche. Sind sie auch erforderlich? –

+0

Oh! BTW - Gehen Sie Sox! –

+1

[diese Frage] (http://stackoverflow.com/questions/12003222/datatable-date-sorting-dd-mm-yyyy-issue) scheint sehr ähnlich zu sein. Hast du diesen Ansatz versucht? FWIW, dd-MON-yyyy ist in Kulturen wie Japan, in denen Monatszahlen (keine Namen) verwendet werden, immer noch nicht eindeutig. – explunit

Antwort

0

Erweiterung auf Shaun's fine answer, gibt es mindestens zwei Möglichkeiten, um die Prüfung der Notwendigkeit zu gehen für dd-MMM-yyyy Format Shim. Ich habe Shauns Code nach intensiver Rücksprache mit JSLint geändert (ich schwöre, es hasst jede ECMA-Zeile, die ich schreibe).

IE Mit conditionals

Wenn Sie bereits IE conditionals mit (<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->), dann können Sie nur für HTML.lt-ie9 testen und bedingt den neuen Sortieralgorithmus definieren, dann rufen Tables:

//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)-\d{4}/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(); 

Siehe IE conditionals example at http://jsfiddle.net/jhfrench/nEsCt/

Testen mit Modernizr

Auf der anderen Seite, wenn Sie mit Modernizr auf die Fähigkeit testen möchten, können wir den Modernizr-Test definieren, dann verwenden Sie Modernizr, um den Test auszuführen und die Shim-Magie (von a.js-Datei), dann Tables nennen:

//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(); 
      }); 
     } 
    } 
]); 

Siehe Modernizr approach at http://jsfiddle.net/jhfrench/tNkGC/

4

Anstatt zu versuchen, IE7 Shim, ich denke, die einfachste Lösung wäre, Ihre eigene Sortierfunktion schreiben und rufen Sie dann für alle Spalten, in denen das Datumsformat verwendet wird. Das ist ziemlich einfach, mit Tables zu tun, hier skizzierte:

http://www.datatables.net/plug-ins/sorting

Sie manuell die Tabelle definieren kann die neue Sortieralgorithmus für Ihre Spalte zu verwenden, aber das ist ein wenig unbeholfen, wie Sie dies tun müssen, wo immer Sie das Format verwenden. Stattdessen können Sie automatisch erkennen, wie hier beschrieben:

http://www.datatables.net/plug-ins/type-detection

habe ich eine Gabel Ihrer Geige mit einer schnellen Lösung hier - ich konvertiert nur die Daten auf eine einfache Zahl - solange Sie die Daten vertrauen, Das sollte in Ordnung sein. Andernfalls möchten Sie möglicherweise zu tatsächlichen Datumsobjekten konvertieren, was wahrscheinlich eine robustere Methode ist.

http://jsfiddle.net/pFdyK/

Code:

// 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(/\d{2}-[A-Za-z]{3}-\d{4}/)) 
      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(); 
}); 
+0

NB-Code nimmt Dinge im Datumsformat wie die Großschreibung, aber Sie sollten die Idee –

+0

Schöne Arbeit, Shaun bekommen. –