Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to format date value in JavaScript?
JavaScript provides several methods to format dates according to your requirements. The built-in Date object offers various formatting options, from simple string conversion to locale-specific formatting.
Using toLocaleDateString() Method
The toLocaleDateString() method formats dates according to locale and custom options, providing flexible date formatting.
Example
Here's how to format dates with custom options using toLocaleDateString():
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var options = {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
};
var currentDate = new Date();
document.getElementById("demo").innerHTML = currentDate.toLocaleDateString("en-US", options);
</script>
</body>
</html>
Friday, December 15, 2023
Manual Date Formatting
You can extract individual date components and format them manually using Date object methods.
Example
This example demonstrates custom date formatting using Date methods:
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
function formatDate() {
var date = new Date();
var day = date.getDate();
var month = date.toDateString().substr(4, 3);
var year = date.getFullYear();
document.querySelector("#result").innerHTML = day + '-' + month + '-' + year;
}
formatDate();
</script>
</body>
</html>
15-Dec-2023
Using Intl.DateTimeFormat with map()
The Intl.DateTimeFormat API combined with map() allows for advanced date formatting with custom separators.
Syntax
new Intl.DateTimeFormat(locale, options)
Example
Here's how to use map() with Intl.DateTimeFormat for flexible date formatting:
<!DOCTYPE html>
<html>
<body>
<div id="output"></div>
<script>
function formatDateWithMap(date, formatParts, separator) {
function format(part) {
let formatter = new Intl.DateTimeFormat('en', part);
return formatter.format(date);
}
return formatParts.map(format).join(separator);
}
let formatParts = [
{ day: 'numeric' },
{ month: 'short' },
{ year: 'numeric' }
];
let formattedDate = formatDateWithMap(new Date(), formatParts, '-');
document.getElementById("output").innerHTML = formattedDate;
</script>
</body>
</html>
15-Dec-2023
Common Date Format Patterns
Different regions use various date formats. Here are common formatting approaches:
<!DOCTYPE html>
<html>
<body>
<div id="formats"></div>
<script>
let date = new Date();
let formats = '';
// US Format
formats += 'US: ' + date.toLocaleDateString('en-US') + '<br>';
// European Format
formats += 'EU: ' + date.toLocaleDateString('en-GB') + '<br>';
// ISO Format
formats += 'ISO: ' + date.toISOString().split('T')[0] + '<br>';
document.getElementById('formats').innerHTML = formats;
</script>
</body>
</html>
US: 12/15/2023 EU: 15/12/2023 ISO: 2023-12-15
Comparison of Methods
| Method | Flexibility | Locale Support | Best For |
|---|---|---|---|
toLocaleDateString() |
High | Yes | Locale-specific formatting |
| Manual formatting | Very High | No | Custom formats |
Intl.DateTimeFormat |
High | Yes | Advanced internationalization |
Conclusion
JavaScript offers multiple ways to format dates, from simple toLocaleDateString() to advanced Intl.DateTimeFormat. Choose the method that best fits your formatting requirements and internationalization needs.
544 Views
