date-fns | display date

Question

date-fns | display date

Issue

I have a function that formats date strings as shown below.

import { format, parseISO } from "date-fns";

export function convertDate(myDate, displayFormat) {
    return format(new Date(parseISO(myDate)), displayFormat);
}

My articles contain data like this:

title: 'My title'
date: '2022-01-04'

To format the dates, I use the convertDate function like this:

if (articles) {
        for (let i = 0; i < articles.length; i++) {
            const year = convertDate(articles[i].date, "y");
            years.push(year);
        }
        uniqueYear = [...new Set(years)];
    }

My timezone is CEST.

Error

Currently, I am encountering an error: https://i.sstatic.net/MoJpP.png

Desired outcome:

https://i.sstatic.net/HJHly.png

Alternatively, I can use

{convertDate(article.date, "PPP")}

which also produces the correct result.

Any assistance would be greatly appreciated!

javascript json date next.js date-fns

Answer 1

Answer №1

Upon running the provided example on runkit.com, the output obtained was "2022" without encountering the reported error:

var dateFns = require("date-fns")

function convertDate(myDate, displayFormat) {
    return dateFns.format(new Date(dateFns.parseISO(myDate)), displayFormat);
}

let articles = [{
  title: 'My title',
  date: '2022-01-04'
}];

convertDate(articles[0].date, "y"); // "2022"

Therefore, the source of the error lies elsewhere.

Moreover, using new Date in the function is deemed unnecessary:

dateFns.format(dateFns.parseISO(myDate), displayFormat)

is considered adequate and more resilient.

It has been recommended in other discussions that extracting the year from the timestamp can be accomplished through string manipulation, obviating the necessity for conversion to a Date. To extract the years:

let articles = [{title: 'title 0', date: '2022-01-04'},
                {title: 'title 1', date: '2020-01-04'}];

let years = articles.map(o => o.date.substring(0,4));

console.log(years);

If a Date object is required for other purposes (e.g., obtaining formatted month names), it is advisable to cast it to a Date once and reuse it.

Answer 2

Upon running the provided example on runkit.com, the output obtained was "2022" without encountering the reported error:

var dateFns = require("date-fns")

function convertDate(myDate, displayFormat) {
    return dateFns.format(new Date(dateFns.parseISO(myDate)), displayFormat);
}

let articles = [{
  title: 'My title',
  date: '2022-01-04'
}];

convertDate(articles[0].date, "y"); // "2022"

Therefore, the source of the error lies elsewhere.

Moreover, using new Date in the function is deemed unnecessary:

dateFns.format(dateFns.parseISO(myDate), displayFormat)

is considered adequate and more resilient.

It has been recommended in other discussions that extracting the year from the timestamp can be accomplished through string manipulation, obviating the necessity for conversion to a Date. To extract the years:

let articles = [{title: 'title 0', date: '2022-01-04'},
                {title: 'title 1', date: '2020-01-04'}];

let years = articles.map(o => o.date.substring(0,4));

console.log(years);

If a Date object is required for other purposes (e.g., obtaining formatted month names), it is advisable to cast it to a Date once and reuse it.

date-fns | display date

Issue

Error

Desired outcome:

Answer №1

Similar questions

Error: Unable to access attributes of null object (specifically 'accessToken')

In my current project, I've noticed that while everything is being parsed correctly in the JSON data, there is one element that is consistently returning null even though it

Add delayed event listeners to embedded AJAX request beyond function boundaries

I am attempting to activate the "about us" button on the website. I have successfully included the path and added a router link to the containing div of the button. However, there seems to be something

What action should be taken if there is only one choice in a SELECT statement?

Mocking a third-party callback function in Jest for method implementation

Counting up in Angular from a starting number of seconds on a timer

Steps for integrating a Facebook Messenger chatbot with a MongoDB database in order to submit requests and retrieve responses through conversations with the bot

React: Struggling to render values within {} of a multidimensional object

Why is my Javascript for-loop returning "null" instead of the expected value?

Is there a way to switch between showing and hiding all images rather than just hiding them one by one?

PHP is encountering a duplication issue with the JSON output

Having trouble with typecasting in Angular 9 after receiving an HTTP response?

Displaying an element as a dropdown menu on PrimeVue

Static express is failing to load the node_modules folder

Displaying nested objects within an object using React

Setting up a NextJS development server in a docker environment with networking

Heroku is showing an Error R10 (Boot timeout) message, indicating that the web process was unable to bind to the designated $PORT within one minute of launching

Angular allows for the creation of dynamic and interactive scenes using Canvas and Three.js

How can I utilize JSON data to retrieve information using D3 library?