Google+
4elements web design & consultancy

4elements

Blog

  • 02

    Using Luxon for Date and Time in JavaScript

    4elements | web design The Hague 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.

    Once you have the project created, navigate to the project directory and create a new component called 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:

    Modify the src/index.html file to add the LuxdateComponent.

    Save the above changes and start the server.

    You will have the application running at http://localhost:4200/.

    Let's import the Luxon library into your application.

    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.

    Inside the LuxdateComponent, define a variable called localDatetime.

    Set the value of the localDatetime variable as shown:

    Render the localDatetime variable in the luxdate.component.html file.

    Save the changes and you will have the local time displayed on the web page.

    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.

    Save the above line of code, and you will have the following date and time displayed.

    Similarly, the .utc method in the DateTime object gives the UTC time. 

    Add a new variable in the LuxdateComponent to set the UTC time.

    Set the value of the utcDatetime variable using the Luxon Datetime object. 

    Render the utcDatetime variable in the luxdate.component.html file as shown:

    Add the following CSS style to the luxdate.component.css file. 

    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:

    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.

    Declare a variable for the list of months and initialize it.

    Set the month list from the Info class.

    Add the following HTML to the luxdate.component.html file to display the months variable content.

    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.

    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.

    Modify the HTML code in the luxdate.component.html to display the weeks and meridians.

    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.

    In the constructor method of LuxdateComponent, set the default locale as shown:

    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.

    Let's try to use Zone on a Luxon DateTime object. Create a local DateTime Luxon object.

    You can use the Zone interface on the dateObj to get the zone name. Add the following code to log the zone name.

    Save the changes, and on running the app, you will be able to view the zone name logged in the browser console.

    Let's try to print the zone name of a UTC DateTime object.

    The above code will print the zone name as 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.

    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.

    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

    Create a start DateTime object and an end DateTime object.

    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.  

    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:

    You will have the following output logged in the browser console:

    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.

    Once it's imported, you can use the fromMillis method to create a duration by specifying the milliseconds.

    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:

    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. 

    martijn broeders

    founder/ strategic creative at 4elements web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 06 38 55 28 54
  • 1
    silhouette
    maurine halligan
    July 01, 2018 at

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

By - category

    By - date