My Collections: August 2014

Monday, August 25, 2014

AngularJS sortable table

CodePen - Pen

<section ng-app="app" ng-controller="MainCtrl">

<span class="label">Ordered By: {{orderByField}}, Reverse Sort: {{reverseSort}}</span><br><br>

<table class="table table-bordered">

<thead>

<tr>

<th>

<a href="#" ng-click="orderByField='firstName'; reverseSort = !reverseSort">

First Name <span ng-show="orderByField == 'firstName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>

</a>

</th>

<th>

<a href="#" ng-click="orderByField='lastName'; reverseSort = !reverseSort">

Last Name <span ng-show="orderByField == 'lastName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>

</a>

</th>

<th>

<a href="#" ng-click="orderByField='age'; reverseSort = !reverseSort">

Age <span ng-show="orderByField == 'age'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>

</a>

</th>

</tr>

</thead>

<tbody>

<tr ng-repeat="emp in data.employees|orderBy:orderByField:reverseSort">

<td>{{emp.firstName}}</td>

<td>{{emp.lastName}}</td>

<td>{{emp.age}}</td>

</tr>

</tbody>

</table>

</section>

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {

$scope.orderByField = 'firstName';

$scope.reverseSort = false;

$scope.data = {

employees: [{

firstName: 'John',

lastName: 'Doe',

age: 30

},{

firstName: 'Frank',

lastName: 'Burns',

age: 54

},{

firstName: 'Sue',

lastName: 'Banter',

age: 21

}]

};

});

Wednesday, August 13, 2014

jQuery Get Todays Date dd/mm/yyyy

JavaScript code snippet to get the current date in the format dd/mm/yyyy. The month is formatted to prefix with a zero (ie “04″) for single month figures. Also, here is how you can get a future date using jQuery

var fullDate = new Date()
console.log(fullDate);
//Thu May 19 2011 17:25:38 GMT+1000 {}
  
//convert month to 2 digits
var twoDigitMonth = ((fullDate.getMonth().length+1) === 1)? (fullDate.getMonth()+1) : '0' + (fullDate.getMonth()+1);
  
var currentDate = fullDate.getDate() + "/" + twoDigitMonth + "/" + fullDate.getFullYear();
console.log(currentDate);
//19/05/2011

Note: the console.log() commands are just for use with firebug.

If the above code doesn’t work try this (thanks pnilesh):

var fullDate = new Date();console.log(fullDate);
var twoDigitMonth = fullDate.getMonth()+"";if(twoDigitMonth.length==1)  twoDigitMonth="0" +twoDigitMonth;
var twoDigitDate = fullDate.getDate()+"";if(twoDigitDate.length==1) twoDigitDate="0" +twoDigitDate;
var currentDate = twoDigitDate + "/" + twoDigitMonth + "/" + fullDate.getFullYear();console.log(currentDate);

How To Convert JavaScript Local Date to UTC And UTC To Local Datelearn(n*share(n,learn(n+1)))

DST is such a pain when it comes to programming. I wish they just get rid of it. It’d be helpful, however, the programmers will still have to deal with the timezones. I was answering questions related to the timers on this website and I keep getting a lot of questions on DST and the timezones. Even though it seems easy, this topic is very confusing. There are lot many sources on the Internet and reading them confuses the hell out of me.

To avoid conflicts when dealing with the transactions from many different timezones, it is essential to normalize the dates and by normalizing I mean converting it to UTC. Let me take an example in JavaScript.

Let the date in question be in Indian Standard Time (IST)

1	`January 02, 2012 22:00:00 GMT+0530`

How to convert the date into a local time(CST)?

1 2	`var` `now =` `new` `Date("January 02, 2012 22:00:00 GMT+0530");` `// now = Mon Jan 02 2012 10:30:00 GMT-0600 (CST)`

How to convert a date to UTC? This is where many of the online sources go wrong. The simple answer is to convert the date into milliseconds since Epoch and add the timezone offset and convert it back to a date object. Simple? No, this is partially correct. When the calculated milliseconds are converted back to a date, you get a local date.

1 2	`var` `nowUtc =` `new` `Date( now.getTime() + (now.getTimezoneOffset() * 60000));` `//nowUtc = Mon Jan 02 2012 16:30:00 GMT-0600 (CST)`

Notice the GMT-0600 (CST) part at the end. That means the resulting date is not GMT, it is CST. If you convert this date to GMT it will read – Mon Jan 02 2012 22:30:00 GMT but we want it to be Mon Jan 02 2012 16:30:00 GMT.

There is also another incorrect way mentioned all over the Internet –

1	`var` `nowUtc =` `new` `Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());`

The result will be no different than the one that you see above.

How to convert the local date to UTC date?

1 2	`now.toUTCString()` `//now = Mon, 02 Jan 2012 16:30:00 GMT`

How to get the local date from the UTC date?

1 2	`now =` `new` `Date(now.toUTCString());` `//now = Mon Jan 02 2012 10:30:00 GMT-0600 (CST)`

That is a long string to store, is there any alternative to store the UTC time? Just store the number of milliseconds since Epoch converted to UTC by adding the timezone offset.

1 2	`var` `millis = now.getTime() + (now.getTimezoneOffset() * 60000)` `//millis = 1325543400000`

How to convert the milliseconds in UTC to local date? Subtract the timezone offset.

1 2	`now.setTime(millis - (now.getTimezoneOffset() * 60000))` `//now = Mon Jan 02 2012 10:30:00 GMT-0600 (CST)`

Let me know if you have any questions or comments.

I just used the below HTML to test the above mentioned code. If you wish, create an HTML file out of it and open it in a browser.

<html>
<body>
<script type="text/javascript">
document.write("IST time - January 02, 2012 22:00:00 GMT+0530");
 
var now = new Date("January 02, 2012 22:00:00 GMT+0530");
document.write("<br/>IST converted to local time: " + now);
 
var nowUtc = new Date( now.getTime() + (now.getTimezoneOffset() * 60000));
document.write("<br/>Local time converted to UTC:" + nowUtc);
 
nowUtc = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(),  now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
document.write("<br/>Local time converted to UTC:" + nowUtc);
 
document.write("<br/>Local to GMT " + now.toUTCString());
 
document.write("<br/>GMT to Local " + new Date(now.toUTCString()));
 
var millis = (now.getTime() + (now.getTimezoneOffset() * 60000));
document.write("<br/>GMT in millis " + millis);
 
document.write("<br/>Local in millis " + ( millis - (now.getTimezoneOffset() * 60000)));
 
now.setTime(( millis - (now.getTimezoneOffset() * 60000)));
document.write("<br/>Local from millis " + now);
</script>
</body>
</html>

This code prints the following –
IST time – January 02, 2012 22:00:00 GMT+0530
IST converted to local time: Mon Jan 02 2012 10:30:00 GMT-0600 (CST)
Local time converted to UTC:Mon Jan 02 2012 16:30:00 GMT-0600 (CST)
Local time converted to UTC:Mon Jan 02 2012 16:30:00 GMT-0600 (CST)
Local to GMT Mon, 02 Jan 2012 16:30:00 GMT
GMT to Local Mon Jan 02 2012 10:30:00 GMT-0600 (CST)
GMT in millis 1325543400000
Local in millis 1325521800000
Local from millis Mon Jan 02 2012 10:30:00 GMT-0600 (CST)