Sort column on date format Monday, September 28 2:00 p.m.

sjw

Hello, I am trying to sort a date column with dates in the following format "Monday, September 28 2:00 p.m."
Is it possible to do this? I haven't found any examples using this specific format. My js isn't great and am wondering if anyone has any ideas?
thanks
Steve

tangerine

Try a forum search. Date sorting has been discussed many times in here.

sjw

Yes I have looked but haven't seen anything that sorts on specific times within a date.

ThomD

Here is a good post on one way to sort date fields.

https://www.datatables.net/blog/2014-12-18

sjw

I have the sort working in chrome but not in ie or ff. Any known bugs? The issue seems to be sorting on the first digit but not the second. ex September 12 sorts before August 22 when sorting ascending? thnx

$(document).ready(function() {
$.fn.dataTable.moment().format("dddd, MMMM DD, h:mm a");// "Sunday, February 14 3:25 pm"
$('#sort').dataTable();
} );

allan

Any known bugs?

Not as far as I'm aware.

Can you link to a page showing the issue so we can take a look and see what is happening please.

Allan

sjw

I was able to fix the problem in chrome. The dates were being wrapped in paragraph html tags. They have been removed and the sort is working. It still doesn't work in FF and IE. The code is in a staging enviro and I can't provide access. In IE and FF it appears to be sorting based on the first letter of the day of the week?

allan

Its possible - I'm afraid I can't say for sure without a test case.

Allan

sjw

If i remove the js snippet the sort in chrome is the same as in ff and ie. It's almost as though the script doesn't work in ff or ie?

sjw

It works in safari on win 7.

sjw

Am seeing an error "Unable to set property'moment' of undefined or null reference" in datetime-moment.js when the page loads in ie.

I have noticed that the sort works down to the minute in chrome and ff even with moment.min.js and datetime-moment.js both removed.I thought it needed moment.js for sorting to work based on full date formats like: "Sunday, February 14 3:25 pm" ?

allan

Have you loaded Moment.js?

Allan

sjw

yes I am linking to the CDN. Oddly enough, when I remove moment.js and datetime-moment.js the sort works perfectly in chrome and safari on win7 right down to the minute?

allan

Date / time parsing in Chrome is extremely forgiving. They make every possible effort to parse lots of different strings, while other browsers don't. Using Chrome as a bench mark probably isn't going to help you too much here - I'd suggest using IE...

We would need a link to the page using Moment.js and the sorting plug-in to understand why it isn't working I'm afraid.

Allan

sjw

Hi Allan, I have a js fiddle I can share. Tried it in IE and no luck. Thx
https://jsfiddle.net/Tiki16/3vLLvscr/15/

allan

A number of errors:

1. You need to apply the Moment sorting plug-in before you initialise the table
2. There is no $.fn.dataTable.moment.format function - it is $.fn.dataTable.moment
3. You had DD int he format for the date, which includes a leading zero - your dates don't always include a leading zero
4. You had a spare comma in the format which wasn't present in the data, so it was never being detected.

With all of them fixed it works no problem in IE: https://jsfiddle.net/3vLLvscr/19/ .

Allan

sjw

ok great, thanks for the help.

sjw

Hi Allan I have to add french time sorting. Do I just create another function under the existing one? The format is Mercredi, 4 Novembre à 9 h. thanks

allan

Yes. :-).

sjw

How do I handle the à and h character? This doesn't work:
$.fn.dataTable.moment("dddd, D MMMM [à] H [h]");// "Mercredi, 4 Novembre à 9 h"

allan

Have a read through the MomentJS i18n documentation - that discusses how to set the locale for their software.

Allan

sjw

Hi Allan, I am using the global locale script and have set it to the required date format. It's not sorting correctly. Can you see anything in my code that is wrong/missing? thanks

$(document).ready(function(){
   //$.fn.dataTable.moment("dddd, MMMM D, h:mm a");// "Sunday, February 14, 3:25 pm"
      moment.locale('fr', {
            months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
            monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
            weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
            weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
            weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
            longDateFormat : {
                LT : "HH:mm",
                LTS : "HH:mm:ss",
                L : "DD/MM/YYYY",
                LL : "D MMMM YYYY",
                LLL : "D MMMM YYYY LT",
                LLLL : "dddd D MMMM YYYY LT"
            },calendar : {
                sameDay: "[Aujourd'hui à] LT",
                nextDay: '[Demain à] LT',
                nextWeek: 'dddd [à] LT',
                lastDay: '[Hier à] LT',
                lastWeek: 'dddd [dernier à] LT',
                sameElse: 'L'
            },
            relativeTime : {
                future : "dans %s",
                past : "il y a %s",
                s : "quelques secondes",
                m : "une minute",
                mm : "%d minutes",
                h : "une heure",
                hh : "%d heures",
                d : "un jour",
                dd : "%d jours",
                M : "un mois",
                MM : "%d mois",
                y : "une année",
                yy : "%d années"
            },
            ordinalParse : /\d{1,2}(er|ème)/,
            ordinal : function (number) {
                return number + (number === 1 ? 'er' : 'ème');
            },
            meridiemParse: /PD|MD/,
            isPM: function (input) {
                return input.charAt(0) === 'M';
            },
            // in case the meridiem units are not separated around 12, then implement
            // this function (look at locale/id.js for an example)
            // meridiemHour : function (hour, meridiem) {
            //     return /* 0-23 hour, given meridiem token and hour 1-12 */
            // },
            meridiem : function (hours, minutes, isLower) {
                return hours < 12 ? 'PD' : 'MD';
            },
            week : {
                dow : 1, // Monday is the first day of the week.
                doy : 4  // The week that contains Jan 4th is the first week of the year.
            }
        });

    var d="Mercredi, 4 Novembre à 9 h";
    d=d.trim();
   var format = "dddd, D MMMM à H [h]";
   var locale="fr";
  
   var now = moment(d.replace ? d.replace(/<.*?>/g, '') : d, format, locale, true );
   
   var now = moment();
   
     $.fn.dataTable.moment("dddd, D MMMM [à] H [h]");// "Mercredi, 4 Novembre à 9 h"


    $('#sort').dataTable( {
        "paging": false,
        "info": false,   
    } );
}); 

allan

Hi,

The information on how to format code blocks is linked just below the "Post Comment" button. It is Markdown.

It looks like you might need to pass the locale to the $.fn.dataTable.moment function, which you can do as the second parameter to the function.

Allan

sjw

Not sure what I am doing wrong. Followed instructions on moment website. It currently sorts fine in English, but is only sorting on first character on the first word in the string for French? Thx
https://jsfiddle.net/Tiki16/3vLLvscr/47/

allan

1)

DataTables warning: table id=sort - Requested unknown parameter '4' for row 7. For more information about this error, please see http://datatables.net/tn/4

There is a missing cell in the table.

2) You were not passing the locale as I suggested above.

3) You were using:

$.fn.dataTable.moment("dddd, MMMM D, h:mm a");

Which doesn't match the format of the date on your page at all!

If you use the following, which does match the format, it works fine:

$.fn.dataTable.moment("dddd, D MMMM YYYY H:mm", 'fr');

See: https://jsfiddle.net/3vLLvscr/48/

If you run into further issues with this priority support is available.

Regards,
Allan