Error: Object doesn't support property or method 'moment'

Question

I'm using Visual Studio 2017 Community on a Windows 10 laptop and working with the Contoso University example program from here: Contoso tutorial

I added my own controller and view to display emails that have a date using the DataTables Table plug-in for jQuery. I'm trying to get the date to display using the datetime helper from here: datetime helper

Everything works and displays fine until I try to format the EmailDate in this piece of Javascript:

var detailsTableOpt = {
  'serverSide': true,
  'processing': true,
  'ajax': {
    'url': '/Mailbox/GetEmailsData',
    'data': function(d) {
      d.MailboxID = selected;
    }
  },
  'destroy': true,
  'columns': [{
      'data': 'From'
    },
    {
      'data': 'To'
    },
    {
      'data': 'Subject'
    },
    {
      'data': 'EmailDate',
      columnDefs: [{
        targets: 3,
        render: $.fn.dataTable.render.moment('YYYY/MM/DD', 'Do MMM YY')
      }]
    },
    {
      'data': 'Size',
      render: $.fn.dataTable.render.number(',', '.', 0)
    }
  ]
};

It gives the error "Object doesn't support property or method 'moment'".

I installed the moment.js 2.18.2 by executing this package manager command "Install-Package Moment.js". It installed the moment.js script in the Scripts folder of my MVC project.

I also put this in the App_Start\BundleConfig.cs file(the first add was already there):

       bundles.Add(new StyleBundle("~/Content/datatables").Include(
                 "~/Content/DataTables/css/dataTables.bootstrap.css"));

       bundles.Add(new ScriptBundle("~/bundles/moment").Include(
                   "~/Scripts/moment.js"));

I read in some articles that I should try to figure out if the moment.js plugin is getting loaded, but I don't know how to do that.

Can anybody explain how to determine if the moment.js is getting loaded?

I'm getting this error when I debug in IE 11. When I try it in Firefox, it does not give an error, but the program does not function the way it should.

Does anyone know how to resolve this issue after doing all of the steps to start using it?

Any help would be gratefully appreciated.

Thanks, Tony

Answer 1

I added the Plugin code that Aluan Haddad suggested to a file named momentPlugin.js and put it in the Scripts folder of my project.

I added these lines to the end of the App_Start\BundleConfig.cs file:

           bundles.Add(new ScriptBundle("~/bundles/momentPlugin").Include(
                       "~/Scripts/momentPlugin.js"));

           bundles.Add(new ScriptBundle("~/bundles/moment").Include(
                       "~/Scripts/moment.js"));

I added these lines to the end of the _Layout.cshtml file:

@Scripts.Render("~/bundles/momentPlugin")
@Scripts.Render("~/bundles/moment")

That allowed me to run the application without getting the error.

Answer 2

You need to load the code for the datatables momentjs plugin for that to work.

The link CDN and project links in the example are actually broken but fortunately, it contains the actual code itself which I will paste here for posterity (I did not write this code)

// UMD
(function( factory ) {
    "use strict";
 
    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery'], function ( $ ) {
            return factory( $, window, document );
        } );
    }
    else if ( typeof exports === 'object' ) {
        // CommonJS
        module.exports = function (root, $) {
            if ( ! root ) {
                root = window;
            }
 
            if ( ! $ ) {
                $ = typeof window !== 'undefined' ?
                    require('jquery') :
                    require('jquery')( root );
            }
 
            return factory( $, root, root.document );
        };
    }
    else {
        // Browser
        factory( jQuery, window, document );
    }
}
(function( $, window, document ) {
 
 
$.fn.dataTable.render.moment = function ( from, to, locale ) {
    // Argument shifting
    if ( arguments.length === 1 ) {
        locale = 'en';
        to = from;
        from = 'YYYY-MM-DD';
    }
    else if ( arguments.length === 2 ) {
        locale = 'en';
    }
 
    return function ( d, type, row ) {
        var m = window.moment( d, from, locale, true );
 
        // Order and type get a number value from Moment, everything else
        // sees the rendered value
        return m.format( type === 'sort' || type === 'type' ? 'x' : to );
    };
};
 
 
}));

Add that code to a JavaScript file and include it in your bundles after momentjs and datatables.