<!DOCTYPE html>
<html ng-app="momentApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moment.js in AngularJS</title>
</head>
<body ng-controller="MomentController">
<div class="container">
<div class="header">
<h1>⏰ Moment.js with AngularJS</h1>
<p>Powerful date and time manipulation library</p>
</div>
<!-- Current Time Display -->
<div class="card" style="grid-column: 1 / -1;">
<h2 class="card-title">🕐 Current Date & Time</h2>
<div class="display-box">
{{currentTime}}
</div>
<div class="relative-time">
Last updated: {{lastUpdate}}
</div>
</div>
<div class="grid">
<!-- Date Formatting -->
<div class="card">
<h2 class="card-title">📅 Date Formatting</h2>
<div class="format-grid">
<div class="format-example">
<span class="format-pattern">MMMM Do YYYY</span>
<span class="format-result">{{formatDate('MMMM Do YYYY')}}</span>
</div>
<div class="format-example">
<span class="format-pattern">dddd, h:mm A</span>
<span class="format-result">{{formatDate('dddd, h:mm A')}}</span>
</div>
<div class="format-example">
<span class="format-pattern">YYYY-MM-DD</span>
<span class="format-result">{{formatDate('YYYY-MM-DD')}}</span>
</div>
<div class="format-example">
<span class="format-pattern">MM/DD/YYYY</span>
<span class="format-result">{{formatDate('MM/DD/YYYY')}}</span>
</div>
<div class="format-example">
<span class="format-pattern">HH:mm:ss</span>
<span class="format-result">{{formatDate('HH:mm:ss')}}</span>
</div>
<div class="format-example">
<span class="format-pattern">LLL</span>
<span class="format-result">{{formatDate('LLL')}}</span>
</div>
</div>
</div>
<!-- Date Info -->
<div class="card">
<h2 class="card-title">📊 Date Information</h2>
<div class="info-box">
<strong>Day of Week</strong>
<span>{{getDayOfWeek()}}</span>
</div>
<div class="info-box">
<strong>Day of Year</strong>
<span>Day {{getDayOfYear()}} of {{getDaysInYear()}}</span>
</div>
<div class="info-box">
<strong>Week Number</strong>
<span>Week {{getWeekNumber()}}</span>
</div>
<div class="info-box">
<strong>Quarter</strong>
<span>Q{{getQuarter()}} {{getYear()}}</span>
</div>
<div class="info-box">
<strong>Unix Timestamp</strong>
<span>{{getUnixTimestamp()}}</span>
</div>
</div>
<!-- Date Calculator -->
<div class="card">
<h2 class="card-title">🧮 Date Calculator</h2>
<div class="form-group">
<label>Add/Subtract</label>
<select ng-model="calcOperation">
<option value="add">Add</option>
<option value="subtract">Subtract</option>
</select>
</div>
<div class="form-group">
<label>Amount</label>
<input type="number" ng-model="calcAmount" min="1" value="1">
</div>
<div class="form-group">
<label>Unit</label>
<select ng-model="calcUnit">
<option value="days">Days</option>
<option value="weeks">Weeks</option>
<option value="months">Months</option>
<option value="years">Years</option>
<option value="hours">Hours</option>
<option value="minutes">Minutes</option>
</select>
</div>
<button class="btn" ng-click="calculateDate()">Calculate</button>
<div class="relative-time" ng-if="calculatedDate">
{{calculatedDate}}
</div>
</div>
<!-- Relative Time -->
<div class="card">
<h2 class="card-title">⏱️ Relative Time (From Now)</h2>
<div class="result-grid">
<div class="result-item">
<span class="result-label">1 hour ago</span>
<span class="result-value">{{getRelativeTime(-1, 'hours')}}</span>
</div>
<div class="result-item">
<span class="result-label">2 days ago</span>
<span class="result-value">{{getRelativeTime(-2, 'days')}}</span>
</div>
<div class="result-item">
<span class="result-label">1 week ago</span>
<span class="result-value">{{getRelativeTime(-1, 'weeks')}}</span>
</div>
<div class="result-item">
<span class="result-label">1 month ago</span>
<span class="result-value">{{getRelativeTime(-1, 'months')}}</span>
</div>
<div class="result-item">
<span class="result-label">In 3 hours</span>
<span class="result-value">{{getRelativeTime(3, 'hours')}}</span>
</div>
<div class="result-item">
<span class="result-label">In 5 days</span>
<span class="result-value">{{getRelativeTime(5, 'days')}}</span>
</div>
</div>
</div>
<!-- Date Difference -->
<div class="card">
<h2 class="card-title">📏 Date Difference</h2>
<div class="form-group">
<label>Start Date</label>
<input type="date" ng-model="startDate">
</div>
<div class="form-group">
<label>End Date</label>
<input type="date" ng-model="endDate">
</div>
<button class="btn" ng-click="calculateDifference()">Calculate Difference</button>
<div class="result-grid" ng-if="difference" style="margin-top: 20px;">
<div class="result-item">
<span class="result-label">Days</span>
<span class="result-value">{{difference.days}}</span>
</div>
<div class="result-item">
<span class="result-label">Weeks</span>
<span class="result-value">{{difference.weeks}}</span>
</div>
<div class="result-item">
<span class="result-label">Months</span>
<span class="result-value">{{difference.months}}</span>
</div>
<div class="result-item">
<span class="result-label">Years</span>
<span class="result-value">{{difference.years}}</span>
</div>
</div>
</div>
<!-- Countdown Timer -->
<div class="card">
<h2 class="card-title">⏳ Countdown</h2>
<div class="form-group">
<label>Target Date & Time</label>
<input type="datetime-local" ng-model="targetDate">
</div>
<button class="btn" ng-click="startCountdown()">Start Countdown</button>
<div class="countdown" ng-if="countdown">
<div class="countdown-label">Time Remaining</div>
<div class="countdown-time">{{countdown}}</div>
</div>
</div>
</div>
<!-- World Clocks -->
<div class="card">
<h2 class="card-title">🌍 World Clocks</h2>
<div class="timezone-list">
<div class="timezone-item" ng-repeat="tz in timezones">
<div class="timezone-name">{{tz.name}}</div>
<div class="timezone-time">{{tz.time}}</div>
</div>
</div>
</div>
<!-- Special Dates -->
<div class="card">
<h2 class="card-title">🎯 Special Dates</h2>
<div class="result-grid">
<div class="result-item">
<span class="result-label">Start of Year</span>
<span class="result-value">{{getStartOfYear()}}</span>
</div>
<div class="result-item">
<span class="result-label">End of Year</span>
<span class="result-value">{{getEndOfYear()}}</span>
</div>
<div class="result-item">
<span class="result-label">Start of Month</span>
<span class="result-value">{{getStartOfMonth()}}</span>
</div>
<div class="result-item">
<span class="result-label">End of Month</span>
<span class="result-value">{{getEndOfMonth()}}</span>
</div>
<div class="result-item">
<span class="result-label">Start of Week</span>
<span class="result-value">{{getStartOfWeek()}}</span>
</div>
<div class="result-item">
<span class="result-label">End of Week</span>
<span class="result-value">{{getEndOfWeek()}}</span>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.43/moment-timezone-with-data.min.js"></script>
<script>
angular.module('momentApp', [])
.controller('MomentController', ['$scope', '$interval', function($scope, $interval) {
// Initialize
$scope.currentTime = moment().format('LLLL');
$scope.lastUpdate = moment().fromNow();
// Date calculator defaults
$scope.calcOperation = 'add';
$scope.calcAmount = 1;
$scope.calcUnit = 'days';
// Timezones
$scope.timezones = [
{ name: 'New York (EST)', zone: 'America/New_York' },
{ name: 'Los Angeles (PST)', zone: 'America/Los_Angeles' },
{ name: 'London (GMT)', zone: 'Europe/London' },
{ name: 'Paris (CET)', zone: 'Europe/Paris' },
{ name: 'Tokyo (JST)', zone: 'Asia/Tokyo' },
{ name: 'Sydney (AEST)', zone: 'Australia/Sydney' },
{ name: 'Dubai (GST)', zone: 'Asia/Dubai' },
{ name: 'Singapore (SGT)', zone: 'Asia/Singapore' }
];
// Update current time every second
$interval(function() {
$scope.currentTime = moment().format('LLLL');
$scope.lastUpdate = moment().startOf('second').fromNow();
// Update timezones
$scope.timezones.forEach(function(tz) {
tz.time = moment().tz(tz.zone).format('h:mm:ss A');
});
// Update countdown
if ($scope.targetDate) {
updateCountdown();
}
}, 1000);
// Format date
$scope.formatDate = function(format) {
return moment().format(format);
};
// Date information
$scope.getDayOfWeek = function() {
return moment().format('dddd');
};
$scope.getDayOfYear = function() {
return moment().dayOfYear();
};
$scope.getDaysInYear = function() {
return moment().isLeapYear() ? 366 : 365;
};
$scope.getWeekNumber = function() {
return moment().week();
};
$scope.getQuarter = function() {
return moment().quarter();
};
$scope.getYear = function() {
return moment().year();
};
$scope.getUnixTimestamp = function() {
return moment().unix();
};
// Date calculator
$scope.calculateDate = function() {
var result = moment();
if ($scope.calcOperation === 'add') {
result = result.add($scope.calcAmount, $scope.calcUnit);
} else {
result = result.subtract($scope.calcAmount, $scope.calcUnit);
}
$scope.calculatedDate = result.format('MMMM Do YYYY, h:mm A');
};
// Relative time
$scope.getRelativeTime = function(amount, unit) {
return moment().add(amount, unit).format('MMMM Do YYYY');
};
// Date difference
$scope.calculateDifference = function() {
if ($scope.startDate && $scope.endDate) {
var start = moment($scope.startDate);
var end = moment($scope.endDate);
$scope.difference = {
days: Math.abs(end.diff(start, 'days')),
weeks: Math.abs(end.diff(start, 'weeks')),
months: Math.abs(end.diff(start, 'months')),
years: Math.abs(end.diff(start, 'years', true)).toFixed(2)
};
}
};
// Countdown
$scope.startCountdown = function() {
if ($scope.targetDate) {
updateCountdown();
}
};
function updateCountdown() {
var target = moment($scope.targetDate);
var now = moment();
var diff = target.diff(now);
if (diff > 0) {
var duration = moment.duration(diff);
$scope.countdown =
Math.floor(duration.asDays()) + 'd ' +
duration.hours() + 'h ' +
duration.minutes() + 'm ' +
duration.seconds() + 's';
} else {
$scope.countdown = 'Time\'s up!';
}
}
// Special dates
$scope.getStartOfYear = function() {
return moment().startOf('year').format('MMMM Do YYYY');
};
$scope.getEndOfYear = function() {
return moment().endOf('year').format('MMMM Do YYYY');
};
$scope.getStartOfMonth = function() {
return moment().startOf('month').format('MMMM Do YYYY');
};
$scope.getEndOfMonth = function() {
return moment().endOf('month').format('MMMM Do YYYY');
};
$scope.getStartOfWeek = function() {
return moment().startOf('week').format('MMMM Do YYYY');
};
$scope.getEndOfWeek = function() {
return moment().endOf('week').format('MMMM Do YYYY');
};
// Initialize timezones
$scope.timezones.forEach(function(tz) {
tz.time = moment().tz(tz.zone).format('h:mm:ss A');
});
}]);
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #03045e 0%, #0077b6 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
color: white;
margin-bottom: 40px;
animation: fadeInDown 0.8s ease;
}
.header h1 {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.header p {
font-size: 1.1rem;
opacity: 0.95;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
margin-bottom: 25px;
}
.card {
background: white;
border-radius: 16px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
animation: fadeInUp 0.6s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card-title {
font-size: 1.5rem;
color: #2c3e50;
margin-bottom: 20px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
.display-box {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 12px;
font-size: 1.8rem;
font-weight: 700;
text-align: center;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.info-box {
background: #f8f9fa;
padding: 15px 20px;
border-radius: 10px;
margin-bottom: 15px;
border-left: 4px solid #27ae60;
}
.info-box strong {
color: #2c3e50;
display: block;
margin-bottom: 5px;
font-size: 14px;
}
.info-box span {
color: #555;
font-size: 16px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
color: #555;
font-weight: 600;
margin-bottom: 8px;
font-size: 14px;
}
.form-group input,
.form-group select {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 15px;
font-family: inherit;
transition: all 0.3s;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #27ae60;
box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1);
}
.btn {
padding: 12px 24px;
background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
width: 100%;
box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
}
.result-grid {
display: grid;
gap: 12px;
}
.result-item {
background: #f8f9fa;
padding: 15px;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.result-label {
color: #7f8c8d;
font-size: 14px;
font-weight: 600;
}
.result-value {
color: #2c3e50;
font-size: 16px;
font-weight: 700;
}
.countdown {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
padding: 30px;
border-radius: 12px;
text-align: center;
margin-top: 15px;
}
.countdown-label {
font-size: 1rem;
margin-bottom: 15px;
opacity: 0.9;
}
.countdown-time {
font-size: 2.5rem;
font-weight: 700;
font-family: 'Courier New', monospace;
}
.timezone-list {
max-height: 400px;
overflow-y: auto;
}
.timezone-item {
background: #f8f9fa;
padding: 15px;
border-radius: 10px;
margin-bottom: 10px;
border-left: 4px solid #27ae60;
}
.timezone-name {
font-weight: 700;
color: #2c3e50;
margin-bottom: 5px;
}
.timezone-time {
color: #555;
font-size: 1.1rem;
}
.relative-time {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
padding: 20px;
border-radius: 12px;
text-align: center;
font-size: 1.3rem;
font-weight: 600;
margin-top: 10px;
}
.format-grid {
display: grid;
gap: 10px;
}
.format-example {
background: #fff3cd;
padding: 12px 15px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
border-left: 4px solid #ffc107;
}
.format-pattern {
font-family: 'Courier New', monospace;
color: #856404;
font-weight: 600;
font-size: 14px;
}
.format-result {
color: #2c3e50;
font-weight: 600;
}
@media (max-width: 768px) {
.header h1 {
font-size: 2rem;
}
.grid {
grid-template-columns: 1fr;
}
.display-box {
font-size: 1.4rem;
}
.countdown-time {
font-size: 2rem;
}
}
No comments yet. Be the first!