Educational

Date Formats

Written by

Saim Khalid

in

Date Formats

JavaScript offers us a variety of date formats ranging from elementary locale-specific formatting all the way up to sophisticated customization options. Understanding the different date formats is a fundamental and essential aspect of web development, irrespective of whether youre building a dynamic web application, managing time sensitive data or simply displaying dates in a user-friendly manner.

Here, we are going to cover different date formats of JavaScript and implement them with a few examples to understand them better. Below is a table explaining all the different date formats used in JavaScript.

FormatExampleDescription
ISO Format (UTC)2024-01-29T12:34:56.789ZStandardized format with the year, month, day, and time components. The ‘Z’ indicates the time is in UTC (Coordinated Universal Time).
Locale Date and Time1/29/2024, 12:34:56 PMIt is the localized date & time representation based on the users system or browsers settings and can vary in terms of symbols depending on the locale.
Custom Date FormatJan 29, 2024, 12:34:56 PM PSTThe custom format allows developers to specify which components of the date (year, month, day, hour, minute, second) are to be included and in what format they should be occurring.
Short Date Format01/29/24A short representation of the date with the month, day, and year. The order may vary based on the locale.
Long Date FormatJanuary 29, 2024A long representation of the date with the full month name, day, and year.
Short Time Format12:34 PMA short representation of the time with hours and minutes.
Long Time Format12:34:56 PMA long representation of the time with hours, minutes, and seconds.
UTC Date FormatTue, 29 Jan 2024 12:34:56 GMTCoordinated Universal Time (UTC) formatted date and time string. It includes the day of the week and the timezone abbreviation (GMT).
Epoch Timestamp1643450096789The number of milliseconds since January 1, 1970, 00:00:00 UTC. Also known as Unix Timestamp. Useful for handling and comparing dates as numbers.
Relative Time2 hours ago, 3 days agoA human-readable format that expresses the time difference in a relative manner, such as “ago” for past dates. Useful for displaying how much time has passed since a certain date.

Examples

Example 1: Displaying current date in different formats

JavaScript in this example dynamically generates and displays a variety of date formats on the page: ISO format, locale date and time, custom date format; short and long date formats; short and long time formats; UTC date format, even an epoch timestamp. Furthermore, it calculates the relative time between two given dates current one being compared to a specified previous one and presents these results in human-readable form. This code exemplifies pragmatic techniques for formatting dates within an HTML context using JavaScript.

<!DOCTYPE html><html><body><h2>All Types of Date Formats</h2><script>const currentDate =newDate();functionappendFormattedDate(type, formatFunction){const formattedDate =formatFunction(currentDate);const paragraph = document.createElement('p');

     paragraph.innerText =${type}: ${formattedDate};
     document.body.appendChild(paragraph);}appendFormattedDate('ISO Format (UTC)',date=&gt; date.toISOString());appendFormattedDate('Locale Date and Time',date=&gt; date.toLocaleString());const options ={ 
     year:'numeric', 
     month:'short', 
     day:'numeric', 
     hour:'2-digit', 
     minute:'2-digit', 
     second:'2-digit', 
     timeZoneName:'short'};appendFormattedDate('Custom Date Format',date=&gt; date.toLocaleString('en-US', options));appendFormattedDate('Short Date Format',date=&gt; date.toLocaleDateString());appendFormattedDate('Long Date Format',date=&gt; date.toLocaleDateString(undefined,{ year:'numeric', month:'long', day:'numeric'}));appendFormattedDate('Short Time Format',date=&gt; date.toLocaleTimeString());appendFormattedDate('Long Time Format',date=&gt; date.toLocaleTimeString(undefined,{ hour:'2-digit', minute:'2-digit', second:'2-digit'}));appendFormattedDate('UTC Date Format',date=&gt; date.toUTCString());appendFormattedDate('Epoch Timestamp',date=&gt; date.getTime());const previousDate =newDate('2024-01-29T00:00:00Z');const relativeTime =formatRelativeTime(previousDate, currentDate);appendFormattedDate('Relative Time',()=&gt; relativeTime);// Function to calculate relative timefunctionformatRelativeTime(previousDate, currentDate){const elapsedMilliseconds = currentDate - previousDate;const seconds = Math.floor(elapsedMilliseconds /1000);const minutes = Math.floor(seconds /60);const hours = Math.floor(minutes /60);if(seconds &lt;60){return${seconds} second${seconds !== 1 ? 's' : ''} ago;}elseif(minutes &lt;60){return${minutes} minute${minutes !== 1 ? 's' : ''} ago;}elseif(hours &lt;24){return${hours} hour${hours !== 1 ? 's' : ''} ago;}else{return'More than a day ago';}}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>




Example 2: Customized date formats





This example gives us a deeper understanding of the customized date formats which do not have any prefix format and are up to the developer choose. We use the Intl.DateTimeFormat object to create our format of (weekday, month, day, year). With this option customized date formats we can choose not only the parts of the date to be made visible but also their order. A website might be more suitable if it displayed dates in dd/mm/yyyy in some countries but more user friendly if it displayed dates in mm-dd-yyyy in some other countries.





<!DOCTYPE html><html><body><h2>Custom Date Format Example</h2><script>const currentDate =newDate();functioncustomDateFormat(date){const options ={ weekday:'long', month:'long', day:'numeric', year:'numeric'};returnnewIntl.DateTimeFormat('en-US', options).format(date);}// Function to append formatted date to the bodyfunctionappendFormattedDate(type, formatFunction){const formattedDate =formatFunction(currentDate);

     document.body.innerHTML +=&amp;lt;p&amp;gt;${type}: ${formattedDate}&amp;lt;/p&amp;gt;;}// Append custom date formatappendFormattedDate('Custom Date Format', customDateFormat);&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>




Example 3: Generating next 5 days dates





In this example JavaScript generates future dates, specifically for the next five days based on the current date. Subsequently, it formats and displays these dates in three different ways; ISO format; locale-specific arrangement, and a custom layout are showcased on the web page. Without requiring any user input, JavaScript's date handling capabilities receive a practical illustration through dynamically generated dates from the generateFutureDates function.





<!DOCTYPE html><html><body><h2>Future Dates Generator</h2><div id="futureDates"></div><script>functiongenerateFutureDates(){const today =newDate();const futureDatesDiv = document.getElementById('futureDates');for(let i =1; i <=5; i++){const futureDate =newDate(today.getTime()+ i *24*60*60*1000);// Adding 1 day for each iterationconst isoFormat = futureDate.toISOString();const localeFormat = futureDate.toLocaleString();const customFormatOptions ={ year:'numeric', month:'long', day:'numeric', hour:'2-digit', minute:'2-digit', second:'2-digit', timeZoneName:'short'};const customFormat = futureDate.toLocaleString('en-US', customFormatOptions);


        futureDatesDiv.innerHTML +=`
        &lt;p&gt;&lt;strong&gt;Day ${i}:&lt;/strong&gt;&lt;/p&gt;
        &lt;p&gt;ISO Format (UTC): ${isoFormat}&lt;/p&gt;
        &lt;p&gt;Locale Date and Time: ${localeFormat}&lt;/p&gt;
        &lt;p&gt;Custom Format: ${customFormat}&lt;/p&gt;
        &lt;hr&gt;
        `;}}generateFutureDates();&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

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

More posts