Home ยป Simple Date Formatting In JavaScript

Simple Date Formatting In JavaScript

Last updated on January 2, 2021 by

The Date formatting in JavaScript is a very painful job. There is no proper way so far like 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 CharacterDescriptionExample return values
dDay of the month. In some browsers, months or days without leading zeroes may produce an error.01 to 31
jDay of the month without leading zeros1 to 31
mNumeric representation of a month.01 through 12
MA short textual representation of a month, three lettersJan through Dec
FA full textual representation of a month, such as January or MarchJanuary through December
yA two digit representation of a year2001 or 2020
YA full numeric representation of a year, 4 digits01 or 20

01 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

02 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

03 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

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

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

05 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:

  1. jQuery Form Submit With Examples
  2. Check If Array Is Empty Or Undefined In JavaScript
  3. How To Detect IE Browser In JavaScript
  4. AJAX PHP Post Request With Example
  5. Difference Between == vs === in JavaScript
  6. How To Remove A Specific Item From An Array In JavaScript
  7. How To Check Array Contains A Value In JavaScript
  8. How To Merge Objects In Vue

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 for reading this post ๐Ÿ™‚ Happy Coding!

 
 

Leave a Comment

*

code