Safari Date Gotcha

Sencha

As programmers we often get “sloppy” with our code. An extremely classic example is dates. Often we present dates like yyyy-mm-dd hh:mm:ss:ms, such as

2019-03-21 10:23:12

On the surface if we present this as a date object within our Ext JS models and then view this in Chrome, Firefox, Opera, etc. the date moves along as if nothing is wrong as these browsers are correcting our mistakes and present the date without error and in the format we would expect.

Unfortunately our formatting is correct. ISO 8601 specifies the date/time format is to be

2019-03-21T10:23:12

If you provide the date in the first format given and not the ISO standard then Safari will render nothing. It will also not generate an error.

Ext.application({
    name: 'Fiddle',

    launch: function () {
        let dataModel = Ext.define('datamodel', {
            extend: 'Ext.data.Model',

            fields: [{
                name: 'id',
                type: 'int'
            }, {
                name: 'paydate',
                type: 'date'
            }, {
                name: 'grossAmt',
                type: 'float'
            }, {
                name: 'netAmt',
                type: 'float'
            }]
        });

        let dataStore = Ext.create('Ext.data.Store', {
            model: dataModel,

            data: [{
                id: 1,
                paydate: "2019-01-04 00:00:00",
                grossAmt: 3459.96,
                netAmt: 2248.97
            }, {
                id: 2,
                paydate: "2019-01-11 00:00:00",
                grossAmt: 3459.96,
                netAmt: 2248.97
            }, {
                id: 3,
                paydate: "2019-01-18 00:00:00",
                grossAmt: 3459.96,
                netAmt: 2248.97
            }, {
                id: 4,
                paydate: "2019-01-25 00:00:00",
                grossAmt: 3459.96,
                netAmt: 2248.97
            }, {
                id: 5,
                paydate: "2019-02-01 00:00:00",
                grossAmt: 3459.96,
                netAmt: 2248.97
            }, {
                id: 6,
                paydate: "2019-02-08 00:00:00",
                grossAmt: 3459.96,
                netAmt: 2248.97
            }, {
                id: 7,
                paydate: "2019-02-15 00:00:00",
                grossAmt: 3459.96,
                netAmt: 2248.97
            }, {
                id: 8,
                paydate: "2019-02-22 00:00:00",
                grossAmt: 3459.96,
                netAmt: 2248.97
            }, {
                id: 9,
                paydate: "2019-03-01 00:00:00",
                grossAmt: 3459.96,
                netAmt: 2248.97
            }, {
                id: 10,
                paydate: "2019-03-08 00:00:00",
                grossAmt: 3459.96,
                netAmt: 2248.97
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Safari Date Display Issue',
            renderTo: Ext.getBody(),

            store: dataStore,
            columns: [{
                xtype: 'datecolumn',
                text: 'Date',
                dataIndex: 'paydate',
                flex: 1
            }, {
                xtype: 'numbercolumn',
                text: 'Gross',
                dataIndex: 'grossAmt',
                width: 100
            }, {
                xtype: 'numbercolumn',
                text: 'Net',
                dataIndex: 'netAmt',
                width: 100
            }]
        });

    }
});

The above as viewed in Firefox

The above code would work in both Chrome and Firefox and render correctly as seen going to the Sencha Fiddle (https://fiddle.sencha.com/#view/editor&fiddle/2qfu) in either browser, but when going there in Safari the following screenshot will be what results you can expect to see.

As you can see no dates.

Discussion can focus around asking ourselves why Safari doesn’t resolve this issue like is being done in both Firefox and Chrome, but to do so we need to reopen discussions held by Mozilla in the early years of development. They asked themselves should a browser make corrections to mistakes perpetuated by developers who don’t adhere to standards? Back then I sided with the Mozilla team in stating we must stop depending on browsers to resolve our inability to code to the standards.

We went through the browser wars where both Microsoft and Netscape were doing their own thing in order to get programmers to design and develop websites to fit their specific browser. We are currently seeing the same thing in both Chrome and Firefox. The best solution for them is a minimum of what Safari is doing; DO NOT DISPLAY THE DATE. There is something wrong with our code and it can and will break at some point in the future due to our being lazy to not generate proper ISO dates.

At best we can ask both Sencha, Firefox, Chrome and Safari developers why they aren’t throwing an error with dates that are not properly formatted. They are an error and we aren’t being notified of our errors.

At a much lower scale this was discussed where I work. One blamed Apple and Safari. I blamed the programmer who on this particular case was myself. To fix the issue so things appear correctly simply provide a valid ISO date and all browsers are happy and better yet, you’re happy because you’re not beating your head against the wall for an error you created and may not have even realized.

Author: aallord

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.