将.NET日期/时间格式字符串转换为Javascript日期/时间格式字符串

Question

Is there a javascript library or some other mechanism that will allow me to pass a .NET date/ time format string (ie, yyyy-MM-dd HH:mm:ss ) to a javascript function and have it parse a supplied datetime value accordingly? I've been looking for a while but I can't seem to find exactly what I am looking for.

My imagined usage will allow me to provide a custom format string from a .NET provider, and allow my existing javascript libraries (like Kendo) to render the date/time consistently.

Since there seem to be some confusion about what I am asking, I will try to be more detailed:

I have a User Preferences table that allows my users to choose the format of their dates, their timestamps, and their times, among other things, and it is completely customizable using .NET string formatting. Rendering these is easy from my .NET application.

However, I am also using Kendo, and it will collect raw date/time data from my server; I need to have the data it renders formatted consistently between the javascript library and the .NET rendering engine.

Answer 1

So the short answer seems to be, there is not a means to standardize date formats, so... I wrote one. There are several limitations with this little library; for example, I'm completely ignoring time zones (all my work is UTC anyway) and I am not checking for escaped special characters, but it should do for my purposes:

/************************************************************
Feel free to use this as you like.
************************************************************/
var shortMonths = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec'
];

var fullMonths = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
];

var shortDays = [
    'Sun',
    'Mon',
    'Tue',
    'Wed',
    'Thu',
    'Fri',
    'Sat'
];

var fullDays = [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday'
];

var shortAmPm = [
    'A',
    'P'
];

var fullAmPm = [
    'AM',
    'PM'
];

function dotNetDateTimeFormat(date, format) {
    //we need a date
    if (!(date instanceof Date && !isNaN(date.valueOf()))) return '';

    //if no format is given, send back default yyyy-MM-dd
    format = format || '';
    if (format == '')
        return d.getFullYear + '-' + padZeroes(d.getMonth(), 2) + '-' + padZeroes(d.getDate(), 2);

    //check for standard formats
    switch (format) {
        case 'd': //short date pattern
            return formatDateString(date, 'M/d/yyyy');
        case 'D': //long date pattern
            return formatDateString(date, 'dddd, MMMM d, yyyy');
        case 'f': //Full date/time pattern (short time)
            return formatDateString(date, 'dddd, MMMM d, yyyy h:mm tt');
        case 'F': //Full date/time pattern (long time)
            return formatDateString(date, 'dddd, MMMM d, yyyy h:mm:ss tt');
        case 'g': //General date/time pattern (short time)
            return formatDateString(date, 'M/d/yyyy h:mm tt');
        case 'G': //General date/time pattern (long time)
            return formatDateString(date, 'M/d/yyyy h:mm:ss tt');
        case 'M': //Month/day pattern
        case 'm': //Month/day pattern
            return formatDateString(date, 'MMMM d');
        case 'O': //Round-trip date/time pattern
        case 'o': //Round-trip date/time pattern
            return formatDateString(date, 'yyyy-MM-ddTHH:mm:ss.fff-00:00');
        case 'R': //RFC1123 pattern
        case 'r': //RFC1123 pattern
            return formatDateString(date, 'ddd, d MMM yyyy HH:mm:ss GMT');
        case 's': //Sortable date/time pattern
            return formatDateString(date, 'yyyy-MM-ddTHH:mm:ss');
        case 't': //Short time pattern
            return formatDateString(date, 'h:mm tt');
        case 'T': //Long time pattern
            return formatDateString(date, 'h:mm:ss tt');
        case 'u': //Universal sortable date/time pattern
            return formatDateString(date, 'yyyy-MM-dd HH:mm:ssZ');
        case 'U': //Universal full date/time pattern
            return formatDateString(date, 'dddd, MMMM d, yyyy h:mm:ss tt');
        case 'Y': //Year month pattern
        case 'y': //Year month pattern
            return formatDateString(date, 'MMMM, yyyy');
        default: // custom string, no standard format.
            return formatDateString(date, format);
    }
}

function formatDateString(date, format) {
    var yyyy = date.getFullYear();
    var M = date.getMonth();
    var d = date.getDate();
    var day = date.getDay();
    var H = date.getHours();
    var h = H;
    var pm = h > 12;
    if (pm) h = H - 12;
    var m = date.getMinutes();
    var s = date.getSeconds();
    var f = date.getMilliseconds();

    format = format
        .replace(/GMT/g, '*00*')
        .replace(/yyyy/g, '*01*')
        .replace(/yyy/g, '*02*')
        .replace(/yy/g, '*03*')
        .replace(/y/g, '*04*')
        .replace(/MMMM/g, '*05*')
        .replace(/MMM/g, '*06*')
        .replace(/MM/g, '*07*')
        .replace(/M/g, '*08*')
        .replace(/dddd/g, '*09*')
        .replace(/ddd/g, '*10*')
        .replace(/dd/g, '*11*')
        .replace(/d/g, '*12*')
        .replace(/HH/g, '*13*')
        .replace(/H/g, '*14*')
        .replace(/hh/g, '*15*')
        .replace(/h/g, '*16*')
        .replace(/mm/g, '*17*')
        .replace(/m/g, '*18*')
        .replace(/ss/g, '*19*')
        .replace(/s/g, '*20*')
        .replace(/fff/g, '*21*')
        .replace(/ff/g, '*22*')
        .replace(/f/g, '*23*')
        .replace(/FFF/g, '*24*')
        .replace(/FF/g, '*25*')
        .replace(/F/g, '*26*')
        .replace(/tt/g, pm ? 'PM' : 'AM')
        .replace(/t/g, pm ? 'P' : 'A')
        .replace('*00*', 'GMT')
        .replace('*01*', yyyy)
        .replace('*02*', yyyy.toString().substr(-3, 3))
        .replace('*03*', yyyy.toString().substr(-2, 2))
        .replace('*04*', yyyy.toString().substr(-1, 1))
        .replace('*05*', getFullMonth(M.toString()))
        .replace('*06*', getShortMonth(M.toString()))
        .replace('*07*', padZeroes(M.toString(), 2))
        .replace('*08*', M.toString())
        .replace('*09*', getFullDay(day.toString()))
        .replace('*10*', getShortDay(day.toString()))
        .replace('*11*', padZeroes(d.toString(), 2))
        .replace('*12*', d.toString())
        .replace('*13*', padZeroes(H.toString(), 2))
        .replace('*14*', H.toString())
        .replace('*15*', padZeroes(h.toString(), 2))
        .replace('*16*', h.toString())
        .replace('*17*', padZeroes(m.toString(), 2))
        .replace('*18*', m.toString())
        .replace('*19*', padZeroes(s.toString(), 2))
        .replace('*20*', s)
        .replace('*21*', padZeroes(f.toString(), 3))
        .replace('*22*', padZeroes(Math.round(f / 10), 2).toString())
        .replace('*23*', Math.round(f / 100).toString())
        .replace('*24*', blankZero(padZeroes(f.toString(), 3)))
        .replace('*25*', blankZero(padZeroes(Math.round(f / 10), 2).toString()))
        .replace('*26*', blankZero(Math.round(f / 100).toString()))
    ;

    return format;
}

function getShortMonth(month) {
    return shortMonths[month];
}

function getFullMonth(month) {
    return fullMonths[month];
}

function getShortDay(day) {
    return shortDays[day];
}

function getFullDay(day) {
    return fullDays[day];
}

function padZeroes(toPad, numDigits) {
    toPad = toPad || '';
    var zeroes = Array(numDigits).join('0');
    return (zeroes + toPad).substr(-numDigits, numDigits);
}

function blankZero(number) {
    var n = parseFloat(number);
    if (isNaN(number)) return '';
    if (n == 0.0) return '';
    return n;
}

You can use it like so:

<div id="test-format"></div>

<script type="text/javascript">
    var date = new Date(2009, 6, 15, 13, 45, 30, 660);
    var formats = [
        dotNetDateTimeFormat(date, 'd'),
        dotNetDateTimeFormat(date, 'D'),
        dotNetDateTimeFormat(date, 'f'),
        dotNetDateTimeFormat(date, 'F'),
        dotNetDateTimeFormat(date, 'g'),
        dotNetDateTimeFormat(date, 'G'),
        dotNetDateTimeFormat(date, 'm'),
        dotNetDateTimeFormat(date, 'M'),
        dotNetDateTimeFormat(date, 'o'),
        dotNetDateTimeFormat(date, 'O'),
        dotNetDateTimeFormat(date, 'r'),
        dotNetDateTimeFormat(date, 'R'),
        dotNetDateTimeFormat(date, 's'),
        dotNetDateTimeFormat(date, 't'),
        dotNetDateTimeFormat(date, 'T'),
        dotNetDateTimeFormat(date, 'u'),
        dotNetDateTimeFormat(date, 'U'),
        dotNetDateTimeFormat(date, 'y'),
        dotNetDateTimeFormat(date, 'Y'),
        dotNetDateTimeFormat(date, 'yyyyMMddHHmmss')
    ];

    $(function () {
        var f = formats.join('<br />');
        $('#test-format').html(f);
    });

</script>

Improvements are welcome.

Answer 2

If you can in your .NET application, when you convert the DateTime object to a string do it like this:

dtStr = dt.ToString("o"); // ISO 8601 standard date time format

That way you won't have to worry about locale based differences on date time strings and most languages should be able to handle this format without a problem

Answer 3

momentjs has worked well with dealing with dates in javascript for us. It should fit both your needs.

UPDATE: momentjs will allow you to use your own formatting string 'MM-DD-YYYY' or any variation thereof to display the date.