Convert date format to another – PHP, HTML
In this tutorial, we are going to teach you how to convert the date format from one to another using Javascript. We will also be adding, subtracting date by days.
Video tutorial
First, we will create a form to get the source and destination format from the user.
<form method="POST" onsubmit="return generateCode(this);">
<div>
<select name="source_format">
<option value="">Enter source format</option>
<option value="timestamp">Timestamp (123456789)</option>
<option value="Y-m-d">Y-m-d (2020-08-30)</option>
<option value="Y-m-d H:i:s">Y-m-d H:i:s (2020-08-30 14:30:18)</option>
<option value="Y-m-d h:i:s A">Y-m-d h:i:s A (2020-08-30 02:30:18 PM)</option>
<option value="Y-m-d h:i:s a">Y-m-d h:i:s a (2020-08-30 02:30:18 pm)</option>
<option value="d M, Y">d M, Y (30 August, 2020)</option>
<option value="D">D (Mon, Tue)</option>
</select>
</div>
<div style="margin-top: 10px;">
<select name="destination_format">
<option value="">Enter destination format</option>
<option value="timestamp">Timestamp (123456789)</option>
<option value="Y-m-d">Y-m-d (2020-08-30)</option>
<option value="Y-m-d H:i:s">Y-m-d H:i:s (2020-08-30 14:30:18)</option>
<option value="Y-m-d h:i:s A">Y-m-d h:i:s A (2020-08-30 02:30:18 PM)</option>
<option value="Y-m-d h:i:s a">Y-m-d h:i:s a (2020-08-30 02:30:18 pm)</option>
<option value="d M, Y">d M, Y (30 August, 2020)</option>
<option value="D">D (Mon, Tue)</option>
</select>
</div>
<input type="submit" value="Generate Code" />
<p id="output" style="display: none;"></p>
</form>
Then we will create a Javascript function that will write the PHP code to echo the date by converting it from source format to destination format.
<script>
function generateCode(form) {
var sourceFormat = form.source_format.value;
var destinationFormat = form.destination_format.value;
var html = "";
var dateHtml = "";
if (sourceFormat == "timestamp" && destinationFormat == "timestamp") {
dateHtml = `echo $timestamp_value;`;
} else if (sourceFormat == "timestamp") {
dateHtml = `echo date('` + destinationFormat + `', $timestamp_value);`;
} else if (destinationFormat == "timestamp") {
dateHtml = `echo strtotime($date_value);`;
} else {
dateHtml = `echo date('` + destinationFormat + `', strtotime($date_value));`;
}
html += `<?php<br />
<span style='margin-left: 1em;'> ` + dateHtml + `</span><br />
?>`;
document.getElementById("output").innerHTML = html;
document.getElementById("output").style.display = '';
return false;
}
</script>
The resulting output will be displayed in a paragraph. Right now we are displaying a dropdown to select a date format. But what if the user wants to write a custom format ? So we will create 2 more fields for writing custom format for source and destination.
<input type="text" style="margin-left: 10px;" name="source_format_custom" placeholder="Custom source format" />
<input type="text" style="margin-left: 10px;" name="destination_format_custom" placeholder="Custom destination format" />
Then we need to update our custom date format variables if these fields have some value.
var sourceFormat_custom = form.source_format_custom.value;
if (sourceFormat_custom != "") {
sourceFormat = sourceFormat_custom;
}
var destinationFormat_custom = form.destination_format_custom.value;
if (destinationFormat_custom != "") {
destinationFormat = destinationFormat_custom;
}
Add/subtract from the date
Now we need to add or subtract months, years, or days from the new date format. For this, we will create 2 dropdowns to check if the user wants to add or subtract. And second to check if he wants to add/subtract days, months, or years.
<p style="text-align: center;">Add / subtract date (optional)</p>
<div>
<select name="addsubtract_date">
<option value="">None</option>
<option value="add">Add</option>
<option value="subtract">Subtract</option>
</select>
<select name="addsubtract_datetype">
<option value="years">Years</option>
<option value="months">Months</option>
<option value="days">Days</option>
<option value="hours">Hours</option>
<option value="minutes">Minutes</option>
<option value="seconds">Seconds</option>
</select>
</div>
<input type="number" placeholder="Enter value" name="addsubtract_datevalue" />
Now when the form is submitted, we need to get the values of both these dropdowns.
var addsubtractdate = "";
if (form.addsubtract_date.value == "add") {
addsubtractdate = "'+ " + form.addsubtract_datevalue.value + " " + form.addsubtract_datetype.value + "'";
} else if (form.addsubtract_date.value == "subtract") {
addsubtractdate = "'- " + form.addsubtract_datevalue.value + " " + form.addsubtract_datetype.value + "'";
}
After that, we need to make changes in every echo statement in our Javascript code to handle this add/subtract feature.
if (sourceFormat == "timestamp" && destinationFormat == "timestamp") {
if (addsubtractdate == "") {
dateHtml = `echo $timestamp_value;`;
} else {
dateHtml = `echo strtotime(` + addsubtractdate + `, $timestamp_value);`;
}
} else if (sourceFormat == "timestamp") {
if (addsubtractdate == "") {
dateHtml = `echo date('` + destinationFormat + `', $timestamp_value);`;
} else {
dateHtml = `echo date('` + destinationFormat + `', strtotime(` + addsubtractdate + `, $timestamp_value));`;
}
} else if (destinationFormat == "timestamp") {
if (addsubtractdate == "") {
dateHtml = `echo strtotime($date_value);`;
} else {
dateHtml = `echo strtotime(` + addsubtractdate + `, strtotime($date_value));`;
}
} else {
if (addsubtractdate == "") {
dateHtml = `echo date('` + destinationFormat + `', strtotime($date_value));`;
} else {
dateHtml = `echo date('` + destinationFormat + `', strtotime($date_value . ` + addsubtractdate + `));`;
}
}
You can run the script now, and you will be able to generate the code for converting the date from one format to another. Moreover, you can also get the code for adding/subtracting days, months, or years from the resultant date. That’s how you can convert date format from one to another.
Learn how to calculate the time passed since the date in PHP and Javascript.
Calculate time passed since date – Javascript, PHP
Feel free to download the source code below.
[wpdm_package id=’1183′]
