Google+
4elements web design & consultancy

4elements

web design & consultancy
4elements web design & consultancy

4elements

  1. web design en consultancy

blog

  1. Home
  2. blog
  3. lees
  4. Using Luxon for Date and Time in JavaScript
  • like 2 02

    Using Luxon for Date and Time in JavaScript

    1. February 2018
    2. Daily
    3. gelezen 394
    4. reactie(s) 7
    4elements | web design Den Haag blog • Using Luxon for Date and Time in JavaScript

    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.

    Getting Started

    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.

    Local Time & UTC Time Using Luxon

    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.

    Luxon Library - Local Time UTC Time

    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.

    Luxon Library - Local UTC Time With Seconds

    General Date and Time Information Using Luxon

    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.

    Luxon Library - Months

    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 Library - Weeks Meridians

    Handling Internationalization Using Luxon 

    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.

    Luxon - Setting Locale

    Zone Info Using Luxon

    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

    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.

    Luxon Library Interval

    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

    Creating Duration Using Luxon

    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.

    Duration Using MilliSeconds

    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.

    Duration Using DateTime Object

    Wrapping It Up

    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. 

    Photo

    martijn broeders

    founder/ strategic creative bij 4elements web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    telefoon: 06 38 55 28 54
    2
    Plaats reactie...
    4elements
    Comments
  • 1
    silhouette
    earlene
    23 September, 2018 om

    This text is invaluable. How can I find out more?

    4elements
    Comments
  • 2
    silhouette
    amelie
    14 September, 2018 om

    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…

    4elements
    Comments
  • 3
    silhouette
    noe vance
    09 September, 2018 om

    Hi, for all time i used to check website posts here early in the dawn, since i enjoy to find out more and more.

    4elements
    Comments
  • 4
    silhouette
    brayden
    05 September, 2018 om

    Pretty! This was an extremely wonderful article. Many thanks for supplying these details.

    4elements
    Comments
  • 5
    silhouette
    latesha
    22 August, 2018 om

    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

    4elements
    Comments
  • 6
    silhouette
    alena
    08 August, 2018 om

    This is my first time go to see at here and i am actually impressed to read all at single place.

    4elements
    Comments
  • 7
    silhouette
    maurine halligan
    01 July, 2018 om

    Hi there, its pleasant post concerning media print, we all be familiar with media is a fantastic source of data.

    4elements
    Comments

Per - categorie

    Op - datum

      Copyright © 1999 - 2020 4elements web design en consultancy, Alle rechten voorbehouden / Algemene voorwaarden / Sitemap: XML, HTML, Images, Mobile, News