date sorting in datatables using moment js

Sorting dates could be tricky because of various date and time format used. Fortunately there is awsome js lib called moment.js library avaliable, this is free and open source. I have made a small demo of how moment.js is used with datatables. for date sorting. First let have a look into how many date time types which moment.js supports.

Format Dates

moment().format('MMMM Do YYYY, h:mm:ss a'); // March 12th 2019, 6:46:42 pm
moment().format('dddd');                    // Tuesday
moment().format("MMM Do YY");               // Mar 12th 19
moment().format('YYYY [escaped] YYYY');     // 2019 escaped 2019
moment().format();                          // 2019-03-12T18:46:42+05:30
                                            // undefined

Relative Time

moment("20111031", "YYYYMMDD").fromNow(); // 7 years ago
moment("20120620", "YYYYMMDD").fromNow(); // 7 years ago
moment().startOf('day').fromNow();        // 19 hours ago
moment().endOf('day').fromNow();          // in 5 hours
moment().startOf('hour').fromNow();       // an hour ago
                                          // undefined

Calendar Time

moment().subtract(10, 'days').calendar(); // 03/02/2019
moment().subtract(6, 'days').calendar();  // Last Wednesday at 6:46 PM
moment().subtract(3, 'days').calendar();  // Last Saturday at 6:46 PM
moment().subtract(1, 'days').calendar();  // Yesterday at 6:46 PM
moment().calendar();                      // Today at 6:46 PM
moment().add(1, 'days').calendar();       // Tomorrow at 6:46 PM
moment().add(3, 'days').calendar();       // Friday at 6:46 PM
moment().add(10, 'days').calendar();      // 03/22/2019
                                          // undefined

Multiple Locale Support

moment.locale();         // en
moment().format('LT');   // 6:46 PM
moment().format('LTS');  // 6:46:42 PM
moment().format('L');    // 03/12/2019
moment().format('l');    // 3/12/2019
moment().format('LL');   // March 12, 2019
moment().format('ll');   // Mar 12, 2019
moment().format('LLL');  // March 12, 2019 6:46 PM
moment().format('lll');  // Mar 12, 2019 6:46 PM
moment().format('LLLL'); // Tuesday, March 12, 2019 6:46 PM
moment().format('llll'); // Tue, Mar 12, 2019 6:46 PM
                        

I have used the following libs to make this demo:

  • jquery
  • data table
  • moment.js
  • datetime-moment.js

HTML source


<h3 class="ui_title">Employee joining data</h3>
<div class="ui_block">
<table id="myTable1" class="ui_table">
<thead id="table_head">
<tr>
<th style="width:150px;">Name</th>
<th style="width:50px;">Designation</th>
<th>Joining date</th>
</tr>
</thead>
<tbody>
<tr>
	<td>Ram</td>	
	<td>Engineer</td>
	<td>18/10/2015</td>	
</tr>
<tr>
	<td>Shyam</td>	
	<td>Engineer</td>
	<td>05/01/2012</td>	
</tr>
<tr>
	<td>Suresh</td>	
	<td>Sr. Engineer</td>
	<td>22/06/2010</td>	
</tr>
<tr>
	<td>Ahmed</td>	
	<td>Manager</td>
	<td>02/02/2002</td>	
</tr>
<tr>
	<td>Leena</td>	
	<td>Sr. Manager</td>
	<td>01/01/2018</td>	
</tr>
<tr>
	<td>Pradeep</td>	
	<td>Architect</td>
	<td>21/05/2012</td>	
</tr>
</tbody>
</table>
</div>

jQuery

jQuery(document).ready(function() {
$.fn.dataTableExt.oPagination.iFullNumbersShowPages = 3;
$.fn.dataTable.moment('DD/MM/YYYY');
		$("#myTable1").DataTable({	
		"autoWidth": false,
		"destroy": true,
		"order": [[2, 'desc']],
		"pageLength": 15,
		"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
		"pagingType": "full_numbers"
});
});	

CSS

/* 1. GENERAL */
* {
	font-family: /* 'Roboto', */ Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	box-sizing: border-box;
}

body {
	font-family: /* 'Roboto', */ Verdana, Arial, sans-serif;
	background: #f8f8f8; /* e2dbc5; */
	margin: 1em;
}

.ui_title {
	font-family: /* 'Open Sans', */ Verdana, sans-serif;
	color: #2A3F54;
	font-weight: 400;
	font-size: 24px;
	line-height:26.4px;
	border-bottom: 1px solid  #2A3F54;
}

.ui_title i {
	font-size: 24px;
}

/* BLOCKS */
.ui_block {
	min-width: 20px;
	background: white;
	border: 0; /* 1px solid #ebebeb;*/
	padding: 1em 1em;
	margin-bottom: 2em;
	box-shadow: 0 4px 6px 0 hsla(0,0%,0%,0.2);
}

.ui_block h3,
.ui_block h3 i {
	font-family: /* 'Open Sans', */ Verdana, sans-serif;
	border-bottom: 2px solid rgb(230,233,237);
	color: rgb(115,135,156);
	font-weight: 400;
	font-size: 16px;
	line-height: 18.7px;
	padding: 0;
	margin: 1em 0 0.5em 0;
}
.ui_block h3:first-child {
	margin: 0.5em 0 0.5em 0;
}

/* 3. TABLE */
.ui_table {
	border: 1px solid black;
	border-collapse: collapse;
	width:100%;
	margin-bottom: 1em;
}
.ui_table th {
	text-align: left;
	background: lightgray;
}
.ui_table td,
.ui_table th {
	border: 1px solid gray;
	padding: 3px 5px;
	font-size: 10pt;
	font-weight: 400;
}

Demo

jsFiddle
https://jsfiddle.net/ppant/efL3pvq2/3/
Github
https://github.com/ppant/jshacks/blob/master/data-table-date-sorting.html

References:


git amend scenerios

Sometimes we need to change the commit message of already committed/committed-pushed files. See below some of the scenarios might arise..

Scenerio 1-> Committed but not pushed

$ git commit –amend

This will open an editor with the commit message. If you are using vi editor edit the commit message and save using !wq: Check with $git log if the message has been amended correctly.

Scenerio 2-> Already pushed + most recent commit

It might be the case that if a user has already pushed the changes to git central repository, in this type of scenario we need to first amend the most recent local commit and afterward apply –force push which will forcefully push the changes to the server. In this process, one thing to keep in mind is that if in between any other user who has already synced local copy with the central repository needs to re-pull.

$ git commit –amend
Edit the message in vi and save and exit
$ git push origin <branch_name> –force


Scenerio 3-> Not pushed + old commit

$ git rebase –i HEAD~X

where X is the number of commits to go back then move to the line of your commit, change pick and edit then change your commit message

$ git commit –amend

Finish the rebase with:

$ git rebase –continue

Rebase opened your history and let you pick what to change. With edit, you tell that you want to change the message. Git moves you to a new branch to let you –amend the message. git rebase — continue puts you back in your previous branch with the message changes.

alternatively, you can choose reword instead of edit when rebasing to change the commit directly. Then you can skip the amend and rebase continue. You may check this link from git book for more on this.

Scenerio 4-> Already pushed + old commit
Edit your message with the same 3 steps process as menined in scenerios 2 ( rebase –i, commit –amend, rebase –continue). Then force push the commit

$git push <branch_name> master –force

But! please remember re-pushing your commit after changing it will very likely to prevent others to sync with the repo, if they already pulled a copy. You should first check with them.


References:
https://gist.github.com/nepsilon/156387acf9e1e72d48fa35c4fabef0b4

https://git-scm.com/book/en/v2/Git-Tools-Rewriting-History


jQuery accordion with fontawsome icons

a small imple of jQuery accordion (show/hide blocks)

Accordions (extend/collapse) are useful when you want to toggle between hiding and showing a large amount of content. I have made a small demo using jQuery accordion lib. Check my code at github.

You can also check a live demo here

References and links:
Code: https://github.com/ppant/jshacks

Live jfiddle demo: https://jsfiddle.net/ppant/mk2n9c8t/

jQuery ui web site: https://jqueryui.com/accordion/

Books recommendation series: Elements of statistical learning

Since long I was thinking to write down my recommendation of the books I have read recently or in past as well. The plan is to post atleast one book recommendation weekly.

Check below my first recommendation.

Book

Elements of statistical learning
Hastie, Tibshirani, and Friedman (2009 )
https://web.stanford.edu/~hastie/ElemStatLearn/

Theme

During the past decade has been an explosion in computation and information technology. With it has come vast amounts of data in a variety of fields such as medicine, biology, finance, and marketing. The challenge of understanding these data has led to the development of new tools in the field of statistics and spawned new areas such as data mining, machine learning, and bioinformatics. Many of these tools have common underpinnings but are often expressed with different terminology. This book describes the important ideas in these areas in a common conceptual framework. While the approach is statistical, the emphasis is on concepts rather than mathematics. The book’s coverage is broad, from supervised learning (prediction) to unsupervised learning. The many topics include neural networks, support vector machines, classification trees and boosting–the first comprehensive treatment of this topic in any book. 

Takeaway

It is a rigorous and mathematically dense book on machine learning techniques. It gives a very good explanation of how the correlation between Bias, Variance and Model Complexity works. If you have the mathematical background (calculus, linear algebra etc) this is a very good introduction to Machine Learning and covers most of the MI topics. I can say that it has a nice balance between mathematical concepts and intuitive reasoning.
I highly recommend this book for anyone entering to the field of AI/ML.

Suggestions

  • What this book doesn’t provide? is a pragmatic approach or Hands-on practice.
  • Deep analysis of why a specific method works (but it gives you some intuition about what a method is trying to do)
  • If you are doing self-study and don’t have any background in machine learning or statistics advice to refine your understanding of linear algebra and calculus before reading this book.
  • Free PDF is available but suggest to buy a print book.

Download and purchase link

Buy: https://web.stanford.edu/~hastie/ElemStatLearn/
PDF: https://web.stanford.edu/~hastie/ElemStatLearn/printings/ESLII_print12.pdf