Bermain Format DateTime dengan Javascript Dan Moment.js

MomentJS

Dalam post sebelumnya tentang Bermain Format DateTime dengan PHP dijelaskan bahwa PHP mempunyai Relative Format yang mempermudahkan developer dalam memanipulasi DateTime format.

Berbeda dengan Javascript, tidak ada built-in class yang dapat membantu memanipulasi DateTime format. Untuk itu kita butuh class tambahan/plugin yang dapat menghandle semua hal tersebut. Salah satu library yang pernah saya pakai adalah Moment.js

Untuk membuat format yang kurang umum seperti 31/12/16 saja perlu perjuangan keras. Apalagi seperti ini January 1, 2016. Belum lagi manipulasi seperti +1 minggu, +60 jam, +2 bulan susahnya minta ampun.

Dibawah ini contoh menggunakan moment.js untuk melalukan hal-hal diatas.

Bermain dengan format()

$(document).ready(function() {
	var $scope = {};
  $scope.date = new Date();
	$scope.moment = moment($scope.date);
  
  // DateTime Format
 	$('#date1').html($scope.moment.format('DD-MM-YYYY'));
  $('#date2').html($scope.moment.format('DD-MM-YYYY hh:mm:ss'));
  
  // DateTime Manipulation
  $scope.temp = $scope.moment.add(1, 'weeks');
 	$('#date3').html($scope.temp.format('DD-MM-YYYY hh:mm:ss'));
  $scope.temp = $scope.moment.add(1, 'months');  
  $('#date4').html($scope.temp.format('DD-MM-YYYY hh:mm:ss'));
});

Full Script: JSFiddle

Cukup mudahkan? Hampir mirip penggunaannya dengan Relative Format pada PHP.