Sort Bootstrap Table Date Column By Using Moment.js In ASP.NET MVC

Hello,

In this tutorial, I'll demonstrate on how to sort a date column of a Bootstrap Table by Wenzhixin using Moment.js. First is to create an empty ASP.NET MVC project and then add an ADO.NET Entity Model that references the Employee table of Northwinds database. Next is to define an Employee ViewModel class that will hold the information to be utilized by the Bootstrap table.

public class EmployeeViewModel
{
 public int EmployeeID { get; set; }
 public string EmployeeName { get; set; }
 public DateTime BirthDate { get; set; }
 public DateTime HireDate { get; set; }
 public string Address { get; set; }
 public string PostalCode { get; set; }
 public string Country { get; set; }
}

Then add a new controller called Employee that declares a Northwind context object, queries the database and returns the model object as JSON.

public class EmployeeController : Controller
{
 private NorthwindEntities _context;

 public EmployeeController()
 {
  _context = new NorthwindEntities();
 }

 // GET: Employee
 public ActionResult Index()
 {
  return View();
 }

 public ActionResult GetEmployees()
 {
  var model = (from emp in _context.Employees.AsEnumerable()
     select new EmployeeViewModel()
     {
      EmployeeID = emp.EmployeeID,
      EmployeeName = string.Format("{0},{1}", emp.LastName, emp.FirstName),
      BirthDate =  Convert.ToDateTime(emp.BirthDate),
      HireDate = Convert.ToDateTime(emp.HireDate),
      Address = emp.Address,
      PostalCode = emp.PostalCode,
      Country = emp.Country
     });

  return Json(model, JsonRequestBehavior.AllowGet);
 }
}

Last is to add an Index view based from the Employee controller that references the jQuery, moment.js and bootstrap table .js and .css files.

@model IEnumerable<BootstrapTableNWind.Models.EmployeeViewModel>

@{
    ViewBag.Title = "Index";
}

<script src="~/Scripts/jquery-2.1.1.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.js"></script>
<link href="~/Content/bootstrap-table.min.css" rel="stylesheet" />
<script type="text/javascript">

    $(function () {
        $("#tblEmployee").bootstrapTable({
            url: '/Employee/GetEmployees',
            pageSize: '5',
            pagination: true,
            method: 'get',
            columns: [
                {
                    field: 'EmployeeID',
                    title: 'Employee ID',
                    sortable: true
                },
                {
                    field: 'EmployeeName',
                    title: 'Employee Name',
                    sortable: true
                },
                {
                    field: 'BirthDate',
                    title: 'Birth Date',
                    sortable: true,
                    formatter: DateFormat,
                    sorter: DateSorter
                },
                {
                    field: 'HireDate',
                    title: 'Hire Date',
                    sortable: true,
                    formatter: DateFormat,
                    sorter: DateSorter
                },
                {
                    field: 'Address',
                    title: 'Address',
                    sortable: false
                },
                {
                    field: 'PostalCode',
                    title: 'PostalCode'
                },
                {
                    field: 'Country',
                    title: 'Country'
                }
            ]
        });

        function DateSorter(a, b) {    
            var dateA = new Date(moment(a).format('MM/DD/YYYY'));
            var dateB = new Date(moment(b).format('MM/DD/YYYY'));
            return dateA - dateB;
        }

        function DateFormat(value, row, index) {          
            return moment(value).format('MM/DD/YYYY');
        }
    });

</script>

<div class="container">
    <br />
    <div class="row">
        <table id="tblEmployee"></table>
    </div>
</div>

The application of moment.js is found on the DataSorter() function.

function DateSorter(a, b) {    
            var dateA = new Date(moment(a).format('MM/DD/YYYY'));
            var dateB = new Date(moment(b).format('MM/DD/YYYY'));
            return dateA - dateB;
        }

Screenshot


Cheers!