Simple Date Formatting In JavaScript

The Date formatting in JavaScript is a very painful job. There is no proper way so far as PHP does.

In this case, we have to create a function that will take two arguments. The first argument is a date and in the second argument, we need to feed a date format to convert the date. Understood? Let’s create a function now.

/*@ Date formatting */
function formatDate(inputDate, outputDateFormat) {

    var d = new Date(inputDate),
        getMonth = d.getMonth() + 1,
        formattedMonth = getMonth.toString().length == 1 ? '0' + getMonth : getMonth,
        months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        fullMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        fullYear = d.getFullYear(),
        outputDate = '';

    if (outputDateFormat == 'd/m/y') {
        outputDate = d.getDate() + '/' + formattedMonth + '/' + fullYear.toString().slice(-2);
    } else if (outputDateFormat == 'd/m/Y') {
        outputDate = d.getDate() + '/' + formattedMonth + '/' + fullYear;
    } else if (outputDateFormat == 'm/d/y') {
        outputDate = formattedMonth + '/' + d.getDate() + '/' + fullYear.toString().slice(-2);
    } else if (outputDateFormat == 'm/d/Y') {
        outputDate = formattedMonth + '/' + d.getDate() + '/' + fullYear;
    } else if (outputDateFormat == 'F j, Y') {
        outputDate = fullMonths[d.getMonth()] + ' ' + d.getDate() + ', ' + fullYear;
    } else if (outputDateFormat == 'M j, y') {
        outputDate = months[d.getMonth()] + ' ' + d.getDate() + ', ' + fullYear.toString().slice(-2);
    } else if (outputDateFormat == 'j F Y') {
        outputDate = d.getDate() + ' ' + fullMonths[d.getMonth()] + ' ' + fullYear;
    } else if (outputDateFormat == 'j M Y') {
        outputDate = d.getDate() + ' ' + months[d.getMonth()] + ' ' + fullYear;
    }
    return outputDate;
}

Let’s add some examples to better understand, how the above function will actually work for your application.

Examples Of Date Formatting In JavaScript Or jQuery

Before starting, let us presume that you have a date "2020-08-25" and you want to convert this date into different date formats.

Format Character	Description	Example return values
d	Day of the month. In some browsers, months or days without leading zeroes may produce an error.	01 to 31
j	Day of the month without leading zeros	1 to 31
m	Numeric representation of a month.	01 through 12
M	A short textual representation of a month, three letters	Jan through Dec
F	A full textual representation of a month, such as January or March	January through December
y	A two digit representation of a year	2001 or 2020
Y	A full numeric representation of a year, 4 digits	01 or 20

1 To Print Date in “dd/mm/yy” Format in JavaScript.

var formattedDate = formatDate('2020-08-25','d/m/y');
document.write(formattedDate);

/* Above example will return the date */
25/08/20

2 To Print Date in “dd/mm/yyyy” Format in JavaScript.

var formattedDate = formatDate('2020-08-25','d/m/Y');
document.write(formattedDate);

/* Above example will return the date */
25/08/2020

3 Print Date Formatting Like “mm/dd/yy” In JavaScript.

var formattedDate = formatDate('2020-08-25','m/d/y');
document.write(formattedDate);

/* Above example will return the date */
08/25/20

4 Print Date Formatting Like “August 25, 2020” In JavaScript.

var formattedDate = formatDate('2020-05-25','F j, Y');
document.write(formattedDate);

5 Print Date Formatting Like “Aug 25, 2020” In JavaScript.

var formattedDate = formatDate('2020-05-25','M j, Y');
document.write(formattedDate);

Now, You can experiment with different date formats as you wish by using the above examples. We hope this article helped you learn simple date formatting in JavaScript.

Additionally, read our guide:

That’s it for now. We hope this article helped you to learn the date formatting in Javascript.

Please let us know in the comments if everything worked as expected, your issues, or any questions. If you think this article saved your time & money, please do comment, share, like & subscribe. Thank you in advance 🙂. Keep Smiling! Happy Coding!