5
\$\begingroup\$

In this small bit of JavaScript, a date is passed in as YYYY-MM-DD. It's formatted like this to be passed to the backend system. On the front end, we need to display it as MM/DD/YYYY.

I split the string, and put the each array index in the correct position. However, I feel like there could be a a better way to do this.

This is the code I have at the moment.

static formatCourseDate(date: string): string {
    const _date = date.split('-');
    const dateObj = {month: _date[1], day: _date[2], year: _date[0]};

    return dateObj.month + '/' + dateObj.day + '/' + dateObj.year;
}
\$\endgroup\$
10
\$\begingroup\$

Simpler approach

Another option is to construct a Date object (this can be achieved by appending a time at midnight to the date) and pass that to Intl.DateTimeFormat.prototype.format(). Then there is no need to parse it and reconstruct it yourself.

function formatCourseDate(date) {
  const dateObj = new Date(date + 'T00:00:00');
  return new Intl.DateTimeFormat('en-US').format(dateObj);
}
console.log(formatCourseDate('1995-12-17'));

Reviewing your current code

Because this is Code Review and we don't just give alternate approaches, I wanted to also give feedback on the current code.

Given your current approach of splitting the parts of the date:

const _date = date.split('-');
const dateObj = {month: _date[1], day: _date[2], year: _date[0]};

because features like const are used, object destructuring and the shorthand property definition notation could also be used to simplify this code:

const date = '2017-11-05';
const [year, month, day] = date.split('-');
const dateObj = {month, day, year};
console.log('dateObj:', dateObj);

| improve this answer | |
\$\endgroup\$
  • 1
    \$\begingroup\$ Thanks! I chose to use the first option the similar approach that utilizes Intl.DateTimeFormat() so I don't have to reconstruct the string and it gives me the desired output. \$\endgroup\$ – DrZoo Nov 6 '18 at 20:07
4
\$\begingroup\$

One cleaner, simpler and more obvious way is:

const _date = new Date(date); // yyyy-MM-dd
return (_date.getMonth()+1) + '/' + _date.getDate() + '/' + _date.getFullYear();

getMonth() - Returns month based on 0 index. So we added 1 to it.

getYear() - This is deprecated and getFullYear() is recommended. Former returns year as current year - 1900. For example, for 2018 it gives 118.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ Thanks for the suggestion. The only problem this that this removed the leading zeros from the months or dates that are less than 10. I could easily check and add a leading zero if needed but then it seems like it would become more jumbled. ....Don't ask why we have to keep the leading zeros. We're just told to do so for consistency /s \$\endgroup\$ – DrZoo Nov 6 '18 at 19:45
  • \$\begingroup\$ You don't have to mess the code by checking single digit numbers. You can use String.padStart(2, '0') \$\endgroup\$ – Nikhil Vartak Nov 10 '18 at 20:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.