Using Moment.js for date and time handling

Moment.js is a powerful JavaScript library for parsing, validating, manipulating, and formatting dates. It works well with AngularJS, simplifying date operations in web applications.

---

1. Installing Moment.js in an AngularJS Project

Using a CDN (Recommended)

Add the Moment.js script in your HTML file before AngularJS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

Using npm or Yarn

If using a module bundler:

npm install moment --save

or

yarn add moment

Then, import it in your JavaScript file:

import moment from 'moment';

---

2. Using Moment.js in an AngularJS Controller

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

app.controller('DateController', function($scope) {
    $scope.currentDate = moment().format('YYYY-MM-DD HH:mm:ss'); // Current Date & Time
    $scope.relativeTime = moment("2024-01-01").fromNow(); // Time from a given date
});

HTML Usage

<div ng-app="myApp" ng-controller="DateController">
    <p>Current Date: {{ currentDate }}</p>
    <p>Time Ago: {{ relativeTime }}</p>
</div>

• moment().format('YYYY-MM-DD HH:mm:ss') → Displays current date & time.
• moment("2024-01-01").fromNow() → Shows “3 months ago” (relative time).

---

3. Formatting Dates in AngularJS with Moment.js

Moment.js provides multiple formatting options:

jsCopyEdit$scope.formattedDate = moment("2025-03-26").format("dddd, MMMM Do YYYY, h:mm:ss a");

Formatted Date Example

<p>Formatted Date: {{ formattedDate }}</p>

Output:
Wednesday, March 26th 2025, 3:45:10 pm

---

4. Parsing and Manipulating Dates

Parsing a Date String

$scope.parsedDate = moment("2024-03-01", "YYYY-MM-DD").format("MMMM Do, YYYY");

Output: "March 1st, 2024"

Adding/Subtracting Days, Months, and Years

$scope.newDate = moment().add(10, 'days').format("YYYY-MM-DD"); // Add 10 days
$scope.previousMonth = moment().subtract(1, 'months').format("YYYY-MM-DD"); // Subtract 1 month

---

5. Displaying Relative Time (Time Ago)

Example:

$scope.pastDate = moment("2024-01-01").fromNow();
$scope.futureDate = moment().add(7, 'days').fromNow();

HTML Usage

<p>Past Date: {{ pastDate }}</p>  <!-- Output: "3 months ago" -->
<p>Future Date: {{ futureDate }}</p> <!-- Output: "in 7 days" -->

---

6. Converting Timezones with Moment.js

Moment.js can handle timezone conversions using Moment Timezone.

Install Moment Timezone

npm install moment-timezone --save

Using Timezones in AngularJS

$scope.newYorkTime = moment().tz("America/New_York").format("YYYY-MM-DD HH:mm:ss");
$scope.londonTime = moment().tz("Europe/London").format("YYYY-MM-DD HH:mm:ss");

HTML Usage

<p>New York Time: {{ newYorkTime }}</p>
<p>London Time: {{ londonTime }}</p>

Converts current time to New York and London time zones.

---

7. Custom AngularJS Filter for Moment.js

You can create an AngularJS filter to format dates dynamically.

Custom Moment.js Filter

app.filter('momentFormat', function() {
    return function(date, format) {
        return moment(date).format(format);
    };
});

Using the Filter in HTML

<p>Formatted Date: {{ '2025-04-10' | momentFormat:'MMMM Do YYYY' }}</p>

Output: "April 10th, 2025"

---

8. Comparing Two Dates with Moment.js

$scope.isBefore = moment("2024-03-01").isBefore("2024-04-01"); // true
$scope.isAfter = moment("2024-05-01").isAfter("2024-04-01"); // true
$scope.isSame = moment("2024-06-01").isSame("2024-06-01"); // true

HTML Usage

<p>Is Before: {{ isBefore }}</p>  <!-- Output: true -->
<p>Is After: {{ isAfter }}</p>  <!-- Output: true -->
<p>Is Same: {{ isSame }}</p>  <!-- Output: true -->

---

9. Working with Unix Timestamps

Convert Unix Timestamp to Readable Date

$scope.timestamp = moment.unix(1713456000).format("YYYY-MM-DD HH:mm:ss");

Convert Date to Unix Timestamp

$scope.unixTime = moment("2024-04-10").unix();

---

10. Handling Date Differences (Duration & Diff)

Calculating Time Difference Between Two Dates

$scope.daysDiff = moment("2024-04-10").diff(moment("2024-04-01"), 'days'); // Output: 9

Displaying Duration in Human Readable Format

$scope.duration = moment.duration(3600, 'seconds').humanize(); // Output: "an hour"

---

11. Localizing Dates with Moment.js

Moment.js supports localization for different languages.

Example: Setting Locale to French

moment.locale('fr');
$scope.frenchDate = moment().format('LLLL'); // Output in French

Output: "Mercredi 26 mars 2025 15:45"

Available Locales

moment.locale('es'); // Spanish
moment.locale('de'); // German
moment.locale('hi'); // Hindi