How to import Luxon

Learn different methods to import luxon on an HTML page. To import Luxon either you can use CDN or you can download the Luxon library and use it.

Method 1: Use CDN to import luxon in the HTML page.

Step 1: Go to this website.

Step 2: Copy the Luxon Script code from there.

Step 3: Paste it in the head section or above the script tag on your HTML page.

OR

I have made it simple for you. Just copy the below code and paste it into your HTML page.

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

After copying above code you are ready to execute functions which are provided by Luxon.

Method 2: Download the Luxon code and use it on the HTML page.

This process is a little bit more difficult than the previous method, In this method first, you will need to download the Luxon library code then you will need to import it into your HTML page.

Step 1: To download the Luxon library please click here, you will be redirected to the Luxon download page. where you will need to download Luxon minified or full version, both files will work for you.

Step 2: Once the Luxon library download gets completed you are ready to use it on the HTML page. Now paste the downloaded file to a folder where your HTML page is located.

Step 3: No need for step 3 you are ready to check wheater it is working or not.

Below I am showing an example of how it will look after adding a downloaded file to it

<head>
	<title>
		Luxon Example
	</title>
	<script src="luxon.min.js"></script>
</head>

After This, we will check whether the Luxon library is imported or not. Let’s check the example.

Luxon Example

Now we will check wheater the Luxon is properly imported or not, for that let’s check with an example.

Luxon import example image
<!DOCTYPE html>
<html>
<head>
	<title>
		Luxon Example
	</title>
	<script src="luxon.min.js"></script>
</head>
<body>



<h1>Check if Luxon is properly imported or not.</h1>
<h2>We will use Luxon date format function for checking.</h2>


<script>
	const DateTime = luxon.DateTime;	
	alert(DateTime.now().toFormat('dd/MMM/yyyy'));
	
</script>

</body>
</html>

In the above example, I am taking the current date and time, after that, I am changing the date format of it. To change date format I have used toFormat function of the Luxon library. if format functionality is working correctly then we can assume that the Luxon library is correctly imported into the HTML page.

Important Links

Leave a Comment

Your email address will not be published. Required fields are marked *