Working with date and time can be a confusing task for developers beginning with JavaScript. In this tutorial, you'll learn about a new JavaScript library called Luxon which makes it a breeze to work with date and time in JavaScript.
Throughout the course of this tutorial, you'll learn about the different features of the Luxon library and how to use it in your web application projects.
You'll be creating an Angular project and will see how to use the Luxon library for date and time manipulation in Angular. Let's get started by creating an Angular web app.
ng new AngularLuxon
Once you have the project created, navigate to the project directory and create a new component called luxdate
.
ng g component luxdate
You will have the LuxdateComponent
created and added to the application module in the app.module.ts
file. Remove the default AppComponent
from the application by deleting the component files from the src/app
folder. Here is how the app.module.ts
file looks:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { LuxdateComponent } from './luxdate/luxdate.component'; @NgModule({ declarations: [ LuxdateComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [LuxdateComponent] }) export class AppModule { }
Modify the src/index.html
file to add the LuxdateComponent
.
<body> <app-luxdate></app-luxdate> </body>
Save the above changes and start the server.
npm start
You will have the application running at http://localhost:4200/.
Let's import the Luxon library into your application.
npm install --save luxon
Once you have Luxon installed in the Angular application, import it in the LuxdateComponent
component. Now you are ready to use the Luxon library in your project.
Let's have a look at how to get the local time using the Luxon
library. Import DateTime
from the Luxon library.
import { DateTime } from 'luxon';
Inside the LuxdateComponent
, define a variable called localDatetime
.
public localDatetime;
Set the value of the localDatetime
variable as shown:
this.localDatetime = DateTime.local();
Render the localDatetime
variable in the luxdate.component.html
file.
<div class="container"> <div> <div class="local"> <span> {{localDatetime}} </span> </div> </div> </div>
Save the changes and you will have the local time displayed on the web page.
2017-12-31T15:55:12.761+05:30
The date and time displayed above is the local time with the time zone attached. You can format the date and time further to make it more intuitive.
Format the date and time to display using the below line of code.
this.localDatetime = DateTime.local().toLocaleString(DateTime.DATETIME_FULL);
Save the above line of code, and you will have the following date and time displayed.
December 31, 2017, 10:35 PM GMT+5:30
Similarly, the .utc
method in the DateTime
object gives the UTC time.
Add a new variable in the LuxdateComponent
to set the UTC time.
public utcDatetime;
Set the value of the utcDatetime
variable using the Luxon Datetime
object.
this.utcDatetime = DateTime.utc().toLocaleString(DateTime.DATETIME_FULL);
Render the utcDatetime
variable in the luxdate.component.html
file as shown:
<div class="container"> <h2>Luxon Library</h2> <div class="time"> <div class="local"> <span class="label"> Local time : </span> <span> {{localDatetime}} </span> </div> <div class="utc"> <span class="label"> UTC time : </span> <span> {{utcDatetime}} </span> </div> </div> </div>
Add the following CSS style to the luxdate.component.css
file.
.container{ text-align: center; width: 100%; } .time{ display: inline-block; } .local{ border: 1px solid #8c8282; text-align: left; background-color: burlywood; padding: 10px; } .utc{ margin-top: 30px; border: 1px solid #8c8282; text-align: left; background-color: burlywood; padding: 10px; } .label{ font-family: serif; font-size: 22px; font-style: initial; }
Save the above changes, and you will be able to view the local time and the UTC time using the Luxon library.
In order to display the local time and UTC time with seconds included, you can use DATETIME_FULL_WITH_SECONDS
. Here is how it will look:
ngOnInit() { this.localDatetime = DateTime.local().toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS); this.utcDatetime = DateTime.utc().toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS); }
Save the changes, and you will have the local time and UTC time displayed with seconds.
The Luxon library provides an Info
class which helps in getting some general information regarding date and time.
When dealing with date and time, it's quite common that you may need the list of months in a year. Using the Info
class, you can get the list of months as an array.
Import the Info
class in the luxdate.component.ts
file.
import { DateTime, Info } from 'luxon';
Declare a variable for the list of months and initialize it.
public months; constructor() { this.months = []; }
Set the month list from the Info
class.
this.months = Info.months();
Add the following HTML to the luxdate.component.html
file to display the months
variable content.
<div class="month"> <span class="label"> Month : </span> <span> <select> <option *ngFor="let month of months; let i = index"> {{month}} </option> </select> </span> </div>
Save the above changes, and you will have the month list populated.
Similarly, using the weekdays
method gives you a list of the weekdays.
this.weeks = Info.weekdays();
Save the changes, and you will have the weekdays listed on the screen.
Luxon also provides an option to get the list of meridiems
using the meridiems
method.
this.meridians = Info.meridiems();
Modify the HTML code in the luxdate.component.html
to display the weeks
and meridians
.
<div class="month"> <span> <select> <option *ngFor="let month of months; let i = index"> {{month}} </option> </select> </span> <span> <select> <option *ngFor="let week of weeks; let i = index"> {{week}} </option> </select> </span> <span> <select> <option *ngFor="let meridian of meridians; let i = index"> {{meridian}} </option> </select> </span> </div>
Save the changes, and you will be able to view the weeks and meridians displayed.
Luxon provides a Setting
class, using which you can handle Luxon's overall behavior. Let's set the default locale setting of Luxon to el
.
Import the Settings
class in the luxdate.component.ts
file.
import { DateTime, Settings, Info } from 'luxon';
In the constructor method of LuxdateComponent
, set the default locale as shown:
constructor() { Settings.defaultLocale = 'el'; }
Save the changes, and you will have the default locale set to el
.
The Luxon library provides an interface to get the details related to the zone of a particular DateTime
object. To use it, you need to import Zone
from the Luxon library.
import { DateTime, Settings, Info, Zone } from 'luxon';
Let's try to use Zone on a Luxon DateTime
object. Create a local DateTime
Luxon object.
let dateObj = DateTime.local();
You can use the Zone
interface on the dateObj
to get the zone name. Add the following code to log the zone name.
console.log('Zone name is ', dateObj.zone.name);
Save the changes, and on running the app, you will be able to view the zone name logged in the browser console.
Zone name is Asia/Kolkata
Let's try to print the zone name of a UTC DateTime object.
let utcObj = DateTime.utc(); console.log('Zone name is ', utcObj.zone.name);
The above code will print the zone name as UTC
.
Zone name is UTC
The Luxon Zone
interface provides a method to compare two timezones
. Let's try to compare the timezone
of the DateTime
objects localObj
and utcObj
.
if(localObj.zone.equals(utcObj.zone)){ console.log('Both zones are equal'); } else{ console.log('Both zones are different'); }
As seen in the above code, you have used the zone.equals
method to compare the zones. Save the changes and try running the app, and you will have the result logged.
Both zones are different
Interval
in Luxon is a wrapper for two DateTime
endpoints which can be manipulated using the Luxon methods. From the official documentation:
An Interval object represents a half-open interval of time, where each endpoint is a DateTime. Conceptually, it's a container for those two endpoints, accompanied by methods for creating, parsing, interrogating, comparing, transforming, and formatting them.
There are a couple of different ways of creating an interval using Luxon. Let's look at how to create an interval using a start and end DateTime
object.
Import Interval
from Luxon in LuxdateComponent
.
import { Interval } from 'luxon';
Create a start
DateTime
object and an end
DateTime
object.
let startDate = DateTime.local(); let endDate = DateTime.local().plus({minutes : 15});
As seen in the above code, you created the startDate
using the current local time and endDate
by incrementing the local time by 15 minutes.
Create an interval using the fromDateTimes
method.
let intv = Interval.fromDateTimes(startDate, endDate); console.log('Interval is ',intv);
Save the above changes, and on running the application, you will have the interval logged.
Now you can apply the Luxon method to manipulate or format the start and end time in the interval object. Let's say you want to check the zone name of the start time in the interval. You can do so by using the zone.name
property as shown:
console.log('Start date zone is ',intv.s.zone.name);
You will have the following output logged in the browser console:
Start date zone is Asia/Kolkata
Luxon provides a couple of methods to create duration. To get started with creating duration, you need to import Duration
in your LuxdateComponent
.
import { Duration } from 'luxon';
Once it's imported, you can use the fromMillis
method to create a duration by specifying the milliseconds.
let fiveMinute = Duration.fromMillis(5 * 60 * 1000); console.log('Five minutes is ', fiveMinute);
Save the changes, and on running the application, you will have the above fiveMinute
duration logged.
You can also use another DateTime
object to create a duration using the fromObject
method. Here is how the code looks:
let startDate = DateTime.local(); let dur = Duration.fromObject(startDate); console.log('Duration from object is ', dur);
Save the changes, and you will have the duration logged in the browser console.
In this tutorial, you saw how to get started with using the Luxon library for working with date and time in an Angular web project. You learnt how to deal with local time and UTC time, and how to create an interval and duration using Luxon.
For in-depth information on using the Luxon library, I would recommend reading the official documentation.
How was your experience learning to work with Luxon? Do let us know your thoughts in the comments below.
This text is invaluable. How can I find out more?
I needed to thank you for this great read!! I definitely loved every little bit of it. I have got you saved as a favorite to check out new stuff you post…
Hi, for all time i used to check website posts here early in the dawn, since i enjoy to find out more and more.
Pretty! This was an extremely wonderful article. Many thanks for supplying these details.
I’m not that much of a online reader to be honest but your sites really nice, keep it up! I'll go ahead and bookmark your site to come back later. Cheers
14 Best PHP Event Calendar and Booking Scripts
/20 Best WordPress Calendar Plugins and Widgets
/Create a Blog for Each Category or Department in Your WooCommerce Store
/Best Affiliate WooCommerce Plugins Compared
/8 Best WordPress Booking and Reservation Plugins
/Best Exit Popups for WordPress Compared
/Best Exit Popups for WordPress Compared
/12 Best Tab & Accordion WordPress Widgets & Plugins
1 /New Course: Practical React Fundamentals
/20 WordPress Video Plugins and Players to Add Engagement
1 /Short Course: Better Angular App Architecture With Modules
/Preview Our New Course on Angular Material
/Build Your Own CAPTCHA and Contact Form in PHP
/Object-Oriented PHP With Classes and Objects
/Best Practices for ARIA Implementation
/Accessible Apps: Barriers to Access and Getting Started With Accessibility
/Dramatically Speed Up Your React Front-End App Using Lazy Loading
/15 Best Modern JavaScript Admin Templates for React, Angular, and Vue.js
/15 Best Modern JavaScript Admin Templates for React, Angular and Vue.js
Hands-on With ARIA: Accessibility Recipes for Web Apps
/10 Best WordPress Facebook Widgets
13 /Hands-on With ARIA: Accessibility for eCommerce
/New eBooks Available for Subscribers
/Hands-on With ARIA: Homepage Elements and Standard Navigation
/Site Accessibility: Getting Started With ARIA
/How Secure Are Your JavaScript Open-Source Dependencies?
/New Course: Secure Your WordPress Site With SSL
/Testing Components in React Using Jest and Enzyme
/15 Best PHP Event Calendar and Booking Scripts
/Set Up Routing in PHP Applications Using the Symfony Routing Component
1 /Creating Pretty Popup Messages Using SweetAlert2
/Create Interactive Gradient Animations Using Granim.js
/How to Build Complex, Large-Scale Vue.js Apps With Vuex
1 /Creating Stylish and Responsive Progress Bars Using ProgressBar.js
/Getting Started With Redux: Connecting Redux With React
/Getting Started With Redux: Learn by Example
/Introduction to API Calls With React and Axios
/A Beginner’s Guide to Regular Expressions in JavaScript
/Introduction to Popmotion: Custom Animation Scrubber
/Introduction to Popmotion: Pointers and Physics
/New Course: Connect to a Database With Laravel’s Eloquent ORM
/How Laravel Broadcasting Works
/Getting Started With Redux: Why Redux?
/Building the DOM faster: speculative parsing, async, defer and preload
1 /20 Useful PHP Scripts Available on CodeCanyon
3 /How to Find and Fix Poor Page Load Times With Raygun
/Introduction to the Stimulus Framework
/Single-Page React Applications With the React-Router and React-Transition-Group Modules
/12 Best Contact Form PHP Scripts
1 /Getting Started With the Mojs Animation Library: The ShapeSwirl and Stagger Modules
/Getting Started With the Mojs Animation Library: The Shape Module
/Getting Started With the Mojs Animation Library: The HTML Module
/Project Management Considerations for Your WordPress Project
/Introduction to the CSS Grid Layout With Examples
1 /8 Things That Make Jest the Best React Testing Framework
/Creating an Image Editor Using CamanJS: Layers, Blend Modes, and Events
/New Short Course: Code a Front-End App With GraphQL and React
/Creating an Image Editor Using CamanJS: Applying Basic Filters
/Creating an Image Editor Using CamanJS: Creating Custom Filters and Blend Modes
/Modern Web Scraping With BeautifulSoup and Selenium
/Challenge: Create a To-Do List in React
1 /Deploy PHP Web Applications Using Laravel Forge
/Getting Started With the Mojs Animation Library: The Burst Module
/A Gentle Introduction to Higher-Order Components in React: Best Practices
/Challenge: Build a React Component
/Eloquent Mutators and Accessors in Laravel
1 /A Gentle Introduction to HOC in React: Learn by Example
/A Gentle Introduction to Higher-Order Components in React
/Understanding Recursion With JavaScript
/Creating a Blogging App Using Angular & MongoDB: Delete Post
/Creating a Blogging App Using Angular & MongoDB: Edit Post
/Creating a Blogging App Using Angular & MongoDB: Add Post
/Introduction to Mocking in Python
/Creating a Blogging App Using Angular & MongoDB: Show Post
/Creating a Blogging App Using Angular & MongoDB: Home
/Creating a Blogging App Using Angular & MongoDB: Login
/Creating Your First Angular App: Implement Routing
/Persisted WordPress Admin Notices: Part 4
/Creating Your First Angular App: Components, Part 2
/Persisted WordPress Admin Notices: Part 3
/Persisted WordPress Admin Notices: Part 2
/Create Your First Angular App: Storing and Accessing Data
/Creating Your First Angular App: Basics
/Persisted WordPress Admin Notices: Part 1
/Error and Performance Monitoring for Web & Mobile Apps Using Raygun
/Using Luxon for Date and Time in JavaScript
7 /How to Create an Audio Oscillator With the Web Audio API
/How to Cache Using Redis in Django Applications
/20 Essential WordPress Utilities to Manage Your Site
/Beginner’s Guide to Angular 4: HTTP
/Rapid Web Deployment for Laravel With GitHub, Linode, and RunCloud.io
/Beginners Guide to Angular 4: Routing
/Beginner’s Guide to Angular 4: Services
/Beginner’s Guide to Angular 4: Components
/Creating a Drop-Down Menu for Mobile Pages
/Introduction to Forms in Angular 4: Writing Custom Form Validators
/10 Best WordPress Booking & Reservation Plugins
/How to Auto Update WordPress Salts
/How to Download Files in Python
/10 Best WordPress Star Rating Plugins
/10 Best HTML5 Sliders for Images and Text
/Creating a Task Manager App Using Ionic: Part 2
/Introduction to Forms in Angular 4: Reactive Forms
/Deferring Tasks in Laravel Using Queues
/Introduction to Forms in Angular 4: Template-Driven Forms
/Get Rid of Bugs Quickly Using BugReplay
1 /Manipulating HTML5 Canvas Using Konva: Part 1, Getting Started
/10 Must-See Easy Digital Downloads Extensions for Your WordPress Site
/Understanding ExpressJS Routing
/Inheritance and Extending Objects With JavaScript
/Performant Animations Using KUTE.js: Part 5, Easing Functions and Attributes
/Performant Animations Using KUTE.js: Part 4, Animating Text
/Performant Animations Using KUTE.js: Part 3, Animating SVG
/New Course: Code a Quiz App With Vue.js
/Performant Animations Using KUTE.js: Part 2, Animating CSS Properties
/Performant Animations Using KUTE.js: Part 1, Getting Started
/Single-Page Applications With ngRoute and ngAnimate in AngularJS
/Working With Tables in React, Part Two
/Working With Tables in React, Part One
/How to Set Up a Scalable, E-Commerce-Ready WordPress Site Using ClusterCS
/Build Web Applications Using Node.js
/New Course on WordPress Conditional Tags
/Stateful vs. Stateless Functional Components in React
/TypeScript for Beginners, Part 5: Generics
/Building With Vue.js 2 and Firebase
6 /Best Unique Bootstrap JavaScript Plugins
/Essential JavaScript Libraries and Frameworks You Should Know About
Vue.js Crash Course: Create a Simple Blog Using Vue.js
/Build a React App With a Laravel Back End: Part 2, React
/Build a React App With a Laravel RESTful Back End: Part 1, Laravel 5.5 API
/Bulk Import a CSV File Into MongoDB Using Mongoose With Node.js
/API Authentication With Node.js
/Command Line Basics and Useful Tricks With the Terminal
/Learn Computer Science With JavaScript: Part 3, Loops
/Learn Computer Science With JavaScript: Part 4, Functions
/Learn Computer Science With JavaScript: Part 2, Conditionals
/Learn Computer Science With JavaScript: Part 1, The Basics
/Create Interactive Charts Using Plotly.js, Part 5: Pie and Gauge Charts
/Create Interactive Charts Using Plotly.js, Part 4: Bubble and Dot Charts
/Create Interactive Charts Using Plotly.js, Part 3: Bar Charts
/Create Interactive Charts Using Plotly.js, Part 2: Line Charts
/Create Interactive Charts Using Plotly.js, Part 1: Getting Started
/Build a To-Do API With Node, Express, and MongoDB
/Getting Started With End-to-End Testing in Angular Using Protractor
/Make Your JavaScript Code Robust With Flow
/Build a To-Do API With Node and Restify
/Testing Components in Angular Using Jasmine: Part 2, Services
/Testing Components in Angular Using Jasmine: Part 1
/Creating a Blogging App Using React, Part 6: Tags
/React Crash Course for Beginners, Part 3
/React Crash Course for Beginners, Part 1
/Set Up a React Environment, Part 4
1 /Set Up a React Environment, Part 3
/New Course: Get Started With Phoenix
/Set Up a React Environment, Part 2
/Set Up a React Environment, Part 1
/How to Create a Real-Time Feed Using Phoenix and React
/Creating a Blogging App Using React, Part 5: Profile Page
/Pagination in CodeIgniter: The Complete Guide
/JavaScript-Based Animations Using Anime.js, Part 4: Callbacks, Easings, and SVG
/JavaScript-Based Animations Using Anime.js, Part 3: Values, Timeline, and Playback
/JavaScript-Based Animations Using Anime.js, Part 2: Parameters
JavaScript-Based Animations Using Anime.js, Part 1: Targets and Properties
/20 Popular WordPress User Interface Elements
/Angular vs. React: 7 Key Features Compared
/10 Elegant CSS Pricing Tables for Your Latest Web Project
/Getting Started With the Flux Architecture in React
/Getting Started With Matter.js: The Composites and Composite Modules
/Getting Started With Matter.js: The Body Module
/Getting Started With Matter.js: The Engine and World Modules
/Getting Started With Matter.js: Introduction
/10 More Popular HTML5 Projects for You to Use and Study
/Understand the Basics of Laravel Middleware
/Iterating Fast With Django & Heroku
/Creating a Blogging App Using React, Part 4: Update & Delete Posts
/Creating a jQuery Plugin for Long Shadow Design
/How to Register & Use Laravel Service Providers
2 /Unit Testing in React: Shallow vs. Static Testing
/Creating a Blogging App Using React, Part 3: Add & Display Post
/Creating a Blogging App Using React, Part 2: User Sign-Up
20 /Creating a Blogging App Using React, Part 1: User Sign-In
/Creating a Grocery List Manager Using Angular, Part 2: Managing Items
Using Celery With Django for Background Task Processing
/Dynamic Page Templates in WordPress, Part 3
/Creating a Grocery List Manager Using Angular, Part 1: Add & Display Items
/The 5 Best IDEs for WordPress Development (And Why)
/New Course: How to Hack Your Own App
/How to Install Yii on Windows or a Mac
/What Is a JavaScript Operator?
/Building Your Startup: Approaching Major Feature Enhancements
/Extending HTML by Creating Custom Tags
/How to Define State With Angular UI-Router
/Dynamic Page Templates in WordPress, Part 2
/Dynamic Page Templates in WordPress, Part 1
1 /Building Your Startup: Securing an API
/How to Draw Bar Charts Using JavaScript and HTML5 Canvas
/What Is WP-CLI? A Beginner’s Guide
/How to Zip and Unzip Files in CodeIgniter
/Programming With Yii2: Building Community With Voting, Comments, and Sharing
/How to Work With Session Data in CodeIgniter
/How to Use the jQuery Function to Select Elements
/How to Create Animations in AngularJS With ngAnimate
/AngularJS Form Validation With ngMessages
/15 Best PHP Calendar, Booking & Events Scripts
/Building Your Startup: Using Routes for Schedule With Me
/A Quick Guide to Dependency Management With Bower
/Using the Twitter API to Tweet Repetitive Content
/Getting Started With Chart.js: Scales
/New Short Course: React State Management With MobX
/Building Your Startup: Leveraging Bootstrap, Ajax, and jQuery
/How to Create a Laravel Helper
/Getting Started With Chart.js: Pie, Doughnut, and Bubble Charts
/Getting Started With Chart.js: Radar and Polar Area Charts
/How to Set Up a Project in Angular 2
/Getting Started With Chart.js: Line and Bar Charts
/Getting Started With Chart.js: Introduction
3 /Building Your Startup With PHP: Bootstrap Your Home Page
/How to Build a User Tour With Shepherd in JavaScript
/Building With the Twitter API: Analyzing Your Followers
/How to Use the WordPress REST API’s Index Route
/Programming With Yii2: Building a RESTful API
/New Course: How to Use the Google Maps API
/Uploading With Rails and Carrierwave
/How to Use OmniAuth-Twitter in a Rails Application
/Uploading Files With Rails and Dragonfly
/Making a Sliding Side Navigation Menu for Responsive Designs
/Building With the Twitter API: Creating Friends to Follow
/Building Your Startup: Running Multiple Domains
/Using the Requests Module in Python
5 /Acuity Scheduling Developer Platform: OAuth, Webhooks, and Reporting
/Decoding the Proxy Class in OpenCart
/Acuity Scheduling: Embedding and Developer Integration
1 /Custom Controllers in OpenCart 2
/Building Your Startup: Error Logging
/Acuity Scheduling’s Developer-Friendly Scheduling Service
/New Short Course: Essential Gulp Tasks
/Erlang and Elixir, Part 5: Phoenix Framework
/Add a Website Calendar Using Jalendar 2
/Getting Started With Cassandra: Using CQL API and CQLSH
/Using the New York Times API to Scrape Metadata
1 /New Coffee Break Course: How to Animate Your Angular 2 App
/Make Creating Websites Fun Again With Hugo
/Get a Fake REST API Up and Running Using json-server
/Understanding Nested Routing in React
/Authentication in Rails Using Clearance
/Using Illuminate Database With Eloquent in Your PHP App Without Laravel
/New Coffee Break Course: How to Use the Angular 2 HTTP Service
/Get Started Building Your Blog With Parse.js: Migration to Your Own Parse Server
/Building Your Startup: Automatic Time-Zone Detection
/Adding Custom Fields to Simple Products With WooCommerce
/New Coffee Break Course: Reactive Programming With RxJS
/Using Namespaces and Autoloading in WordPress Plugins, Part 4
/New Code eBooks Available for Subscribers
/
harriett What's up, after reading this awesome…