PHP-like Date Formatting in JavaScript with Date Ranges and Plain Text

Use Case: Making an easy one line date- and date range-formatting function.

Anyone who has programmed in PHP has definitely been disappointed when discovering that JavaScript's native methods for generating and formatting dates is not nearly as simple.

In PHP, a date can be formatted simply be calling:

$date = date('F jS, Y') // January 11th, 2020

In native JavaScript, here's how we'd go about constructing the above string and setting it to a variable:

const date = new Date()

const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
const month = months[date.getMonth()]

const day = date.getDate()

var th = [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 24, 25, 26, 27, 28, 29, 30]
if (th.includes(day)) {
	var suffix = 'th'
} else if (String(day).charAt(day.length - 1) == '1') {
	var suffix = 'st'
} else if (String(day).charAt(day.length - 1) == '2') {
	var suffix = 'nd'
} else {
	var suffix = 'rd'
}

const year = date.getFullYear()

const dateString = `${month} ${day}${suffix}, ${year}`

15 lines of JavaScript code necessary to replicate 1 line of PHP.

I did this in my projects for years. Sure, I tried Moment.js but it wasn't as elegant to me and I didn't want to include the 2.5mb plus NPM module in my projects (Date-Mirror is 11kb).

How It Works

Date-Mirror is made up of a bunch of mini-functions that pull date information the JS way but can be accessed by the user the PHP way.

For example, returning the current 4-digit year ... this is what the user would program:

date('Y') // 2020

And this is the function that Date-Mirror would call and return:

Y = (date) => {
	return date.getFullYear()
}

For the day of the week:

date('l') // Saturday

Date-Mirror's call:

l = (date) => {
	const day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
	return day[date.getDay()]
}

The main Date-Mirror call loops through the inputted string parameter character-by-character and returns the desired function on the date.

Custom Dates

By default, the function will use today's date. However, if a date string is inputted as a second parameter than that date will be formatted and returned instead.

date('m-d-Y') // 01-11-2020

date('m-d-Y', 'May 4 2020') // 05-04-2020

Something I've added is the ability to add date ranges. This can be done by adding a second input date (the 3rd and final parameter).

date('m-d-Y', 'May 4 2020', 'May 7 2020')

This wouldn't return anything different than the previous example - 05-04-2020. This is because the formatting also needs to be updated to include the range. Something like ...

date('F jS [-] jS, Y', 'May 4 2020', 'May 7 2020') // May 4th - 7th, 2020

The 2nd occurrence of each character will pull it's information from the 2nd inputted date. And the brackets ...

Adding Plain Text

Sometimes there's a need to connect date ranges with words or other special characters. To do that, you can put text inside of opening- and closing-brackets '[]'.

date('F jS [through] jS, Y', 'May 4 2020', 'May 7 2020') // May 4th through 7th, 2020

The Date-Mirror JavaScript module is available via NPM:

npm i date-mirror

On in the browser via unpkg:

<script src="https://unpkg.com/php-date"></script>

Please try it out and let me know how it can be improved. Thanks!