The date is an essential function for user interaction form, table and database. We can work on the date in the format of the user's requirement. The users mostly use the following date format to display the date.
- dd/mm/yyyy format
- mm/dd/yyyy format
- yyyy/dd/mm format
- dd/month_name /yyyy format
Methods to Convert Date Format
The following methods convert the date format into a friendly format.
- use new Date method and pattern
- use the split method with a pattern
- use the split method with the array function
1. Use the new date method and Regex pattern.
JavaScript employs the date method to accurately retrieve the date format. This allows us to extract the month, day, and year components of the date. These date components are represented according to a conditional structure that aligns with the specified Date format.
Examples:
The subsequent examples illustrate the necessary date format derived from the input date. We can utilize a range of date formats through JavaScript functions, methods, and techniques.
Example 1:
The subsequent example utilizes JavaScript to demonstrate the fundamental date format of dd/mm/yyyy.
<!DOCTYPE html>
<html>
<head>
<title>
How to convert date format in JavaScript
</title>
<style>
#demo1 {
background-color: yellow;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
How to convert date format in JavaScript
</h3>
<h4> Convert date format in dd/mm/yyyy using JavaScript
</h4>
<div id = "regex_quant"></div>
<b id = "regex_quant1"></b>
<br>
<!-- click the button for the date format-->
<button onclick = "display_date();"> Click Here! </button>
</div>
<script>
function display_date() {
// Use input date format
let input_pattern = new Date('4/15/2023');
var ele_demo = document.getElementById("regex_quant");
ele_demo.innerHTML = "Input Date: " + input_pattern;
//Get the Date, month, and year
var dates = input_pattern.getDate();
var month = input_pattern.getMonth() + 1;
var year = input_pattern.getFullYear();
// Convert date format into dd/mm/yy
var dateFormat = (dates <= 9 ? '0' + dates : dates) + '/' + (month <= 9 ? '0' + month : month) + '/' + year;
document.getElementById("regex_quant1").innerHTML = "Date Format (dd/mm/yy): " + dateFormat;
}
</script>
</body>
</html>
Output:
The output shows the date format.
Example 2:
The subsequent illustration employs JavaScript to demonstrate the fundamental date format of yyyy/mm/dd.
<!DOCTYPE html>
<html>
<head>
<title>
How to convert date format in JavaScript
</title>
<style>
#demo1 {
background-color: yellow;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
How to convert date format in JavaScript
</h3>
<h4> Convert date format in yyyy/mm/dd using JavaScript Date() method
</h4>
<div id = "regex_quant"></div>
<b id = "regex_quant1"></b>
<br>
<!-- click the button for the date format-->
<button onclick = "display_date();"> Click Here! </button>
</div>
<script>
function display_date() {
// Use input date format
let input_pattern = new Date('4/15/2023');
var ele_demo = document.getElementById("regex_quant");
ele_demo.innerHTML = "Input Date: " + input_pattern;
//Get the Date, month, and year
var dates = input_pattern.getDate();
var month = input_pattern.getMonth() + 1;
var year = input_pattern.getFullYear();
// Convert date format into dd/mm/yy
var dateFormat = year+ '/' + (month <= 9 ? '0' + month : month) + '/' + (dates <= 9 ? '0' + dates : dates);
document.getElementById("regex_quant1").innerHTML = "Date Format (yyyy/mm/dd): " + dateFormat;
}
</script>
</body>
</html>
Output:
The output shows the date format.
2. Use the Split method with a pattern.
JavaScript employs a split method to segment the provided date string. This split method generates array variables corresponding to the month, day, and year components of the date. These date components are represented utilizing a regex pattern that aligns with the specified Date format.
Examples:
The subsequent examples illustrate the necessary date format derived from the provided input date. We can obtain a format for the date that is either user-friendly or tailored to the user's specifications.
Example 1:
The subsequent illustration utilizes JavaScript to demonstrate the fundamental mm/dd/yyyy date format. The date is presented following a conditional pattern. When the day or month is represented by a single-digit number (1-9), it is displayed as a two-digit number (01-09). If the day or month is a double-digit number, then it is shown as-is.
<!DOCTYPE html>
<html>
<head>
<title>
How to convert date format in JavaScript
</title>
<style>
#demo1 {
background-color: yellow;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
How to convert date format in JavaScript
</h3>
<h4> Convert date format in mm/dd/yyyy using JavaScript
</h4>
<div id = "regex_quant"></div>
<b id = "regex_quant1"></b>
<br>
<!-- click the button for the date format-->
<button onclick = "display_date();"> Click Here! </button>
</div>
<script>
function display_date() {
// Use input date format
let input_pattern = "25/5/2023";
var ele_demo = document.getElementById("regex_quant");
ele_demo.innerHTML = "Input Date: " + input_pattern;
var arrays = input_pattern.split('/');
//Get the Date, month, and year
var dates = arrays[0];
var month = arrays[1];
var year = arrays[2];
// Convert date format into mm/dd/yyyy
var dateFormat = (month <= 9 ? '0' + month : month)+ '/' + (dates <= 9 ? '0' + dates : dates) + '/' + year;
document.getElementById("regex_quant1").innerHTML = "Date Format (mm/dd/yyyy): " + dateFormat;
}
</script>
</body>
</html>
Output:
The output shows the date format.
Example 2:
The subsequent example illustrates the fundamental yyyy-mm-dd date format utilizing JavaScript. We can implement conditions to accommodate single-digit values for both the day and month, specifically for numbers ranging from 1 to 9.
<!DOCTYPE html>
<html>
<head>
<title>
How to convert date format in JavaScript
</title>
<style>
#demo1 {
background-color: yellow;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
How to convert date format in JavaScript
</h3>
<h4> convert date format in yyyy-mm-dd using JavaScript
</h4>
<div id = "regex_quant"></div>
<b id = "regex_quant1"></b>
<br>
<!-- click the button for the date format-->
<button onclick = "display_date();"> Click Here! </button>
</div>
<script>
function display_date() {
// Use input date format
let input_pattern = "25/5/2023";
var ele_demo = document.getElementById("regex_quant");
ele_demo.innerHTML = "Input Date: " + input_pattern;
var arrays = input_pattern.split('/');
//Get the Date, month, and year
var dates = arrays[0];
var month = arrays[1];
var year = arrays[2];
// Convert date format into yyyy-mm-dd
var dateFormat = year + '-' +(month <= 9 ? '0' + month : month)+ '-' + (dates <= 9 ? '0' + dates : dates);
document.getElementById("regex_quant1").innerHTML = "Date Format (yyyy-mm-dd): " + dateFormat;
}
</script>
</body>
</html>
Output:
The output shows the date format.
Example 3:
The split method generates an array containing the day, month, and year components. We have the ability to reorganize these array elements and present them in a formatted date style.
<!DOCTYPE html>
<html>
<head>
<title>
How to convert date format in JavaScript
</title>
<style>
#demo1 {
background-color: yellow;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
How to convert date format in JavaScript
</h3>
<h4> Convert date format in yyyy/dd/mm using JavaScript
</h4>
<div id = "regex_quant"></div>
<b id = "regex_quant1"></b>
<br>
<!-- click the button for the date format-->
<button onclick = "display_date();"> Click Here! </button>
</div>
<script>
function display_date() {
// Use input date format
let input_pattern = "25/05/2023";
var ele_demo = document.getElementById("regex_quant");
ele_demo.innerHTML = "Input Date: " + input_pattern;
var arrays = input_pattern.split('/');
//Get the Date, month, and year
var dates = arrays[0];
var month = arrays[1];
var year = arrays[2];
// Convert date format into dd/mm/yy
var dateFormat = year+"/"+dates+"/"+month;
document.getElementById("regex_quant1").innerHTML = "Date Format (yyyy/dd/mm): " + dateFormat;
}
</script>
</body>
</html>
Output:
The output shows the date format.
3. Use the split method with the array function.
JavaScript employs a split function to segment the input date string into its components. This split function generates an array containing the month, day, and year values of the date. The resulting second array is utilized to represent the name corresponding to the month number. These date components are presented in accordance with a regex pattern that aligns with the specified date format.
Example:
The subsequent examples illustrate the necessary date format derived from the input date. We can obtain a format for the date that is either user-friendly or tailored to user specifications.
<!DOCTYPE html>
<html>
<head>
<title>
How to convert date format in JavaScript
</title>
<style>
#demo1 {
background-color: yellow;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
How to convert date format in JavaScript
</h3>
<h4> convert date format in dd/month_name/yyyy using JavaScript
</h4>
<div id = "regex_quant"></div>
<b id = "regex_quant1"></b>
<br>
<!-- click the button for the date format-->
<button onclick = "display_date();"> Click Here! </button>
</div>
<script>
function display_date() {
// Use input date format
let input_pattern = "25/5/2023";
var ele_demo = document.getElementById("regex_quant");
ele_demo.innerHTML = "Input Date: " + input_pattern;
var arrays = input_pattern.split('/');
var months = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"]
//Get the Date, month, and year
var dates = arrays[0];
var month = months[arrays[1]];
var year = arrays[2];
// Convert date format into dd/mm/yy
var dateFormat = dates+"/"+month+"/"+year;
document.getElementById("regex_quant1").innerHTML = "Date Format (dd/month_name/yyyy): " + dateFormat;
}
</script>
</body>
</html>
Output:
The output shows the date format.
Conclusion
The date format is essential for user-interactive functions. We have the option to utilize forms, tables, and various functions to present data in the desired format. Developers can employ three straightforward and uncomplicated approaches to modify dates.