date-fns | ⏳ Modern JavaScript date utility library ⌛️ | Date Time Utils library

by date-fns TypeScript Version: v2.29.3 License: MIT

kandi X-RAY | date-fns Summary

date-fns is a TypeScript library typically used in Utilities, Date Time Utils, Nodejs applications. date-fns has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.

Support

Quality

Security

License

Reuse

kandi-support Support

date-fns has a medium active ecosystem.
It has 30835 star(s) with 1588 fork(s). There are 207 watchers for this library.
There were 2 major release(s) in the last 6 months.
There are 388 open issues and 1168 have been closed. On average issues are closed in 87 days. There are 135 open pull requests and 0 closed requests.
It has a neutral sentiment in the developer community.
The latest version of date-fns is v2.29.3

date-fns Support

Best in #Date Time Utils

Average in #Date Time Utils

date-fns Support

Best in #Date Time Utils

Average in #Date Time Utils

quality kandi Quality

date-fns has 0 bugs and 0 code smells.

date-fns Quality

Best in #Date Time Utils

Average in #Date Time Utils

date-fns Quality

Best in #Date Time Utils

Average in #Date Time Utils

security Security

date-fns has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
date-fns code analysis shows 0 unresolved vulnerabilities.
There are 0 security hotspots that need review.

date-fns Security

Best in #Date Time Utils

Average in #Date Time Utils

date-fns Security

Best in #Date Time Utils

Average in #Date Time Utils

license License

date-fns is licensed under the MIT License. This license is Permissive.
Permissive licenses have the least restrictions, and you can use them in most projects.

date-fns License

Best in #Date Time Utils

Average in #Date Time Utils

date-fns License

Best in #Date Time Utils

Average in #Date Time Utils

build Reuse

date-fns releases are available to install and integrate.
Installation instructions are not available. Examples and code snippets are available.

date-fns Reuse

Best in #Date Time Utils

Average in #Date Time Utils

date-fns Reuse

Best in #Date Time Utils

Average in #Date Time Utils

Top functions reviewed by kandi - BETA

kandi has reviewed date-fns and discovered the below as its top functions. This is intended to give you an instant insight into date-fns implemented functionality, and help decide if they suit your requirements.

Generate a list of type scripts .

Sets the config for each browser .

Generate js docs from source

Generate revision data

Return a list of type parameters to a flow .

Generate a doc with options

Transform params to query params

Generate a ffDoc document

Generate action types

This function is called when the report completes .

Get all kandi verified functions for this library.

date-fns Key Features

⏳ Modern JavaScript date utility library ⌛️

date-fns Examples and Code Snippets

See all related Code Snippets

Community Discussions

Trending Discussions on date-fns

Sorting and ordering an array with different criteria
IF/ELSE condition not working properly and Rerendring duplicates React
Material UI (dateTime picker) : Invalid Date Format message after submission
addMonths fns is not returning correct UTC time
Difference between date-fns' isValid and luxon's isValid
Why is Ant Design throwing a Server Error when trying to use date-fns?
Module not found: Error: Can't resolve 'date-fns/addDays' in 'C:\Users\
Get weekday list between two dates? JavaScript
Getting error of "RangeError: Invalid time value" when inputing variable within new Date()
date-fns "RangeError: Invalid time value"

Trending Discussions on date-fns

QUESTION

Sorting and ordering an array with different criteria

Asked 2022-Apr-08 at 12:05

I am trying to implement sorting and order to an array.

The challenge which I am facing is that I have 5 criteria on which to base my sorting, which are:

due_date === 1000
status && is_approved(boolean)
is_overdue(boolean checking with date-fns using the due_date)
due_date (either null, or number)
is_approved

What I would like to achieve is to create a sorting function which orders the above criteria as the following (from highest to lowest):

due_date === 1000
is_overdue (I am using isAfter of the date-fns which returns a boolean)
status === 'DONE' && !is_approved
due_date starting from lowest to highest (ignore the null values)
is_approved === true
any other remaining object

I was thinking of perhaps running .map method, and appending a ranking value for each of the object by checking the criteria, but there must be a way of doing this in single iteration with .sort method. I already checked other StackOverflow threads, but most of their data is relatively simple such as age, name etc.

[
    {
      due_date: 150000,
      is_approved: false,
      is_overdue: true,
      status: 'TODO',
    },
    {
      due_date: 200000,
      is_approved: true,
      is_overdue: false,
      status: 'DONE',
    },
    {
      due_date: 150000,
      is_approved: false,
      is_overdue: false,
      status: 'IN PROGRESS',
    },
    {
      due_date: 1000,
      is_approved: false,
      is_overdue: true,
      status: 'TODO',
    },
    {
      due_date: 200000,
      is_approved: true,
      is_overdue: false,
      status: 'DONE',
    },
    {
      due_date: null,
      is_approved: false,
      is_overdue: true,
      status: 'TODO',
    },
  ]

Which I want to transform to;

[
    {
      due_date: 1000, // By due_date 1000 - highest ranking
      is_approved: false,
      is_overdue: true,
      status: 'TODO',
    },
    {
      due_date: 150000,
      is_approved: false,
      is_overdue: true, // Is overdue - second highest
      status: 'TODO',
    },
    {
      due_date: null,
      is_approved: false,
      is_overdue: true, // Is overdue - second highest
      status: 'TODO',
    },
    {
      due_date: 200000,
      is_approved: false, // Is not yet approved
      is_overdue: false,
      status: 'DONE', // and Is DONE
    },
    {
      due_date: 150000,
      is_approved: false,
      is_overdue: false,
      status: 'IN PROGRESS',
    },
    {
      due_date: 200000, // Lowest ranked
      is_approved: true, // Is APPROVED approved
      is_overdue: false,
      status: 'DONE', // and is DONE
    },
  ]

ANSWER

Answered 2022-Apr-08 at 11:32

You just need to define a sorting function

I've implemented the first two requirements I leave the rest to you

Probably it needs a bit of refactoring but you get the idea

const data = [
    {
      due_date: 150000,
      is_approved: false,
      is_overdue: true,
      status: 'TODO',
    },
    {
      due_date: 200000,
      is_approved: true,
      is_overdue: false,
      status: 'DONE',
    },
    {
      due_date: 150000,
      is_approved: false,
      is_overdue: false,
      status: 'IN PROGRESS',
    },
    {
      due_date: 1000,
      is_approved: false,
      is_overdue: true,
      status: 'TODO',
    },
    {
      due_date: 200000,
      is_approved: true,
      is_overdue: false,
      status: 'DONE',
    },
    {
      due_date: null,
      is_approved: false,
      is_overdue: true,
      status: 'TODO',
    },
  ]
  
  
 const sortingFn = (a, b) => {
  if(a.due_date === 1000){
    return -1
  }
  if(b.due_date === 1000){
    return 1
  }
  
  if(a.is_overdue){
    return -1
  }
 
   if(b.is_overdue){
    return 1
  }
  //the rest of the conditions
 }
 
 data.sort(sortingFn)
 console.log(data)

Source https://stackoverflow.com/questions/71795757

QUESTION

IF/ELSE condition not working properly and Rerendring duplicates React

Asked 2022-Mar-26 at 20:01

My goal here is to check a checkin and checkout date and see if a room is available or not

if availdata[p.roomId][date].i==0 then the room at that range of dates is not available so it will be displayed as not available

if not it will check its price with availdata[p.roomId][date].p1 and display it with a price instead

import React,{useState,useEffect} from 'react';
import HotelCards from './HotelCards';
import styles from '../styles/Options/Options.module.css';
import {Checkkout as checkkout}  from "./Hero";
import {Checkkin as checkkin}  from "./Hero";

import {format} from "date-fns";
let HC=[];
let prices =[];
let notavailableat="";
let rowss=[];
export default function Options({selectedGuest}) {
    const [availdata, setavailData] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [isLoading2, setIsLoading2] = useState(false);
    const [data, setData] = useState([]);

    // request Headers
    const requestOptions = {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },

    };
    const requestOptions2 = {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },

    };


    //Get the rooms info along with the ID
    const fetchData = () => {
        fetch('http://localhost:3001/api/rooms', requestOptions)
            .then(response => response.json())

            .then((result) =>{
                    console.log("roooms"+result)
                    setData(result.rooms)
                    setIsLoading2(true);

                }

            )
            .catch((err) => console.log("error"));
    };

    useEffect(() => {
        fetchData();
    }, []);

    //get the i and p variables
    function fetchData1() {
        fetch('http://localhost:3001/api/availability', requestOptions2)
            .then(response => response.json())

            .then((result) =>{
                    setavailData(result.availability[0])

                    setIsLoading(true);


                }

            )
            .catch((err) => console.log("error"));
    }

    useEffect(() => {
        fetchData1();
    }, []);

    prices.length=0;
    var strToDatein = new Date(checkkin)
    var strToDateout = new Date(checkkout)

    {data.map(p=> {

    if (isLoading && isLoading2){

        for (var day = strToDatein; day <= strToDateout; day.setDate(day.getDate() + 1)) {
            

            var diplaydate = format(day,"dd  MMM ");

            var date = format(day, 'yyyyMMdd');


            if (availdata[p.roomId][date].i==0){

                rowss.push(<p key={availdata[p.roomId][date]}> not available at {diplaydate} </p>);
                notavailableat="not available at "+diplaydate;
                prices.length=0;
                console.log("room:"+p.roomId+"available?"+availdata[p.roomId][date].i)

                HC.push(<div key={p.roomId}>
                    <HotelCards
                        idroom={p.roomId}
                        title={p.roomName.toUpperCase()}
                        status={true}
                        price={prices}
                        img={p.pictures[0].url}
                        avail={notavailableat}
                        rows={rowss}
                        guest={selectedGuest}
                    /></div>)
                break;
            }
            else
            {
                rowss.length=0;
                prices.push(availdata[p.roomId][date].p1);
                console.log("room:"+p.roomId+"price?"+availdata[p.roomId][date].p1)

                HC.push(<div key={p.roomId}>
                <HotelCards
                    idroom={p.roomId}
                    title={p.roomName.toUpperCase()}
                    status={true}
                    price={prices}
                    img={p.pictures[0].url}
                    avail={notavailableat}
                    rows={rowss}
                    guest={selectedGuest}
                /></div>)



            }

        }
    }

    })

    return (
        <div className={`${styles.containers}`}>

            {HC}

        </div>
    );

}}

in my case it's displaying each room 4 times with same price

ANSWER

Answered 2022-Mar-25 at 01:29

Since HC is an extra component, every time UseEffect is called all its children will be updated. Since you set

price={prices}

in your attributes, every update would make every child have the same price value.

Instead, you can just directly read from your availdata array

price={availdata[p.roomId][date].p1}

Source https://stackoverflow.com/questions/71606945

QUESTION

addMonths fns is not returning correct UTC time

Asked 2022-Mar-05 at 14:02

I'm currently based in Central European Standard Time and I'm expecting to send all dates to the server converted back to UTC.

I have tried simply using addMonths from date-fns library:

import addMonths from "date-fns/addMonths";

const now = new Date();
// Sat Mar 05 2022 13:56:04 GMT+0100 (Central European Standard Time)
console.log(now);
const oneMonthFromNow = addMonths(now, 1);
// 2022-04-05T11:56:04.189Z
console.log(oneMonthFromNow.toISOString());

The difference between CEST and UTC is simply one hour. I'm expecting to have an hour and one month difference between now and oneMonthFromNOw but it ends up having one month and two hours difference.

What I would expect:

import addMonths from "date-fns/addMonths";

const now = new Date();
// Sat Mar 05 2022 13:56:04 GMT+0100 (Central European Standard Time)
console.log(now);
const oneMonthFromNow = addMonths(now, 1);
// Since CEST time is 13:56:04 I would expect to get 12:56:04 (1 hour difference only)
// But I end up getting 2022-04-05T12:56:04.189Z
console.log(oneMonthFromNow.toISOString());

Am I missunderstanding something here? Shouldn't I get one month and one hour difference between now and oneMonthFromNow?

ANSWER

Answered 2022-Mar-05 at 14:02

The difference between CEST and UTC is simply one hour.

The difference is two hours: Central European Summer Time (CEST, UTC+02:00).

You went from CET time (one hour ahead) on Mar 05 2022 to CEST summer time (two hours ahead) on 2022-04-05.

Central European Time (CET) is a standard time which is 1 hour ahead of Coordinated Universal Time (UTC).

As of 2011, all member states of the European Union observe summer time (daylight saving time), from the last Sunday in March to the last Sunday in October. States within the CET area switch to Central European Summer Time (CEST, UTC+02:00) for the summer.

Wikipedia: Central European Time

Wikipedia: Central European Summer Time

Source https://stackoverflow.com/questions/71362428

QUESTION

Module not found: Error: Can't resolve 'date-fns/addDays' in 'C:\Users\

Asked 2022-Feb-08 at 17:19

I want to use Date picker from MUI but I get this error and I don't know what exactly is wrong. here is my code:

import TextField from "@mui/material/TextField";
import DatePicker from "@mui/lab/DatePicker";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";

const ExpenseForm = () => {
  return (
    <Box component="form" noValidate autoComplete="off">
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DatePicker
          label="Basic example"
          onChange={(newValue) => {}}
          renderInput={(params) => <TextField {...params} />}
        />
      </LocalizationProvider>
    </Box>
  );
};

export default ExpenseForm;

and my package.json:

"dependencies": {
    "@date-io/date-fns": "^2.13.1",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.3.1",
    "@mui/lab": "^5.0.0-alpha.68",
    "@mui/material": "^5.4.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },

but everytime I get these errors:

Compiled with problems:

ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 1:0-39

Module not found: Error: Can't resolve 'date-fns/addDays' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 2:0-45

Module not found: Error: Can't resolve 'date-fns/addSeconds' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 3:0-45

Module not found: Error: Can't resolve 'date-fns/addMinutes' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 4:0-41

Module not found: Error: Can't resolve 'date-fns/addHours' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 5:0-41

Module not found: Error: Can't resolve 'date-fns/addWeeks' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 6:0-43

Module not found: Error: Can't resolve 'date-fns/addMonths' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 7:0-41

Module not found: Error: Can't resolve 'date-fns/addYears' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 8:0-59

Module not found: Error: Can't resolve 'date-fns/differenceInYears' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 9:0-65

Module not found: Error: Can't resolve 'date-fns/differenceInQuarters' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 10:0-61

Module not found: Error: Can't resolve 'date-fns/differenceInMonths' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 11:0-59

Module not found: Error: Can't resolve 'date-fns/differenceInWeeks' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 12:0-57

Module not found: Error: Can't resolve 'date-fns/differenceInDays' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 13:0-59

Module not found: Error: Can't resolve 'date-fns/differenceInHours' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 14:0-63

Module not found: Error: Can't resolve 'date-fns/differenceInMinutes' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 15:0-63

Module not found: Error: Can't resolve 'date-fns/differenceInSeconds' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 16:0-73

Module not found: Error: Can't resolve 'date-fns/differenceInMilliseconds' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 17:0-59

Module not found: Error: Can't resolve 'date-fns/eachDayOfInterval' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 18:0-41

Module not found: Error: Can't resolve 'date-fns/endOfDay' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 19:0-43

Module not found: Error: Can't resolve 'date-fns/endOfWeek' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 20:0-43

Module not found: Error: Can't resolve 'date-fns/endOfYear' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 21:0-37

Module not found: Error: Can't resolve 'date-fns/format' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 22:0-41

Module not found: Error: Can't resolve 'date-fns/getHours' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 23:0-45

Module not found: Error: Can't resolve 'date-fns/getSeconds' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 24:0-39

Module not found: Error: Can't resolve 'date-fns/getYear' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 25:0-39

Module not found: Error: Can't resolve 'date-fns/isAfter' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 26:0-41

Module not found: Error: Can't resolve 'date-fns/isBefore' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 27:0-39

Module not found: Error: Can't resolve 'date-fns/isEqual' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 28:0-43

Module not found: Error: Can't resolve 'date-fns/isSameDay' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 29:0-45

Module not found: Error: Can't resolve 'date-fns/isSameYear' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 30:0-47

Module not found: Error: Can't resolve 'date-fns/isSameMonth' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 31:0-45

Module not found: Error: Can't resolve 'date-fns/isSameHour' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 32:0-39

Module not found: Error: Can't resolve 'date-fns/isValid' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 33:0-42

Module not found: Error: Can't resolve 'date-fns/parse' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 34:0-41

Module not found: Error: Can't resolve 'date-fns/setHours' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 35:0-45

Module not found: Error: Can't resolve 'date-fns/setMinutes' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 36:0-41

Module not found: Error: Can't resolve 'date-fns/setMonth' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 37:0-37

Module not found: Error: Can't resolve 'date-fns/getDay' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 38:0-53

Module not found: Error: Can't resolve 'date-fns/getDaysInMonth' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 39:0-45

Module not found: Error: Can't resolve 'date-fns/setSeconds' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 40:0-39

Module not found: Error: Can't resolve 'date-fns/setYear' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 41:0-45

Module not found: Error: Can't resolve 'date-fns/startOfDay' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 42:0-49

Module not found: Error: Can't resolve 'date-fns/startOfMonth' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 43:0-45

Module not found: Error: Can't resolve 'date-fns/endOfMonth' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 44:0-47

Module not found: Error: Can't resolve 'date-fns/startOfWeek' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 45:0-47

Module not found: Error: Can't resolve 'date-fns/startOfYear' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 46:0-41

Module not found: Error: Can't resolve 'date-fns/parseISO' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 47:0-43

Module not found: Error: Can't resolve 'date-fns/formatISO' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 48:0-57

Module not found: Error: Can't resolve 'date-fns/isWithinInterval' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 49:0-65

Module not found: Error: Can't resolve 'date-fns/_lib/format/longFormatters' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 50:0-50

Module not found: Error: Can't resolve 'date-fns/locale/en-US' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'

I searched the web but couldn't find something useful . also some StackOverflow similar posts that suggested to restart the server I tried but didn't actually solve my problem.

ANSWER

Answered 2022-Feb-08 at 17:19

You need to install the date-fns package from NPM using npm install --save date-fns.

Source https://stackoverflow.com/questions/71037974

QUESTION

Getting error of "RangeError: Invalid time value" when inputing variable within new Date()

Asked 2022-Jan-19 at 20:59

function search() {
  const router = useRouter();
  const { location, startDate, endDate, numOfGuests } = router.query;

  const formattedStartDate = format(new Date(startDate), "dd, MMMM yyyy");
  const formattedEndDate = format(new Date(endDate), "dd, MMMM yyyy");
  const range = `${formattedStartDate} - ${formattedEndDate}`;
  return(...);
  }

export default search;

Using React/Next.js. I am trying to create a formatted date using date-fns. The problem seems that when i input the variable of startDate into the new Date() ex: new Date(startDate), it gives me the error. When i manually hard code the value of startDate instead, it works as needed, example: new Date("2022-01-28T05:00:00.000Z"). I even tried making startDate into a string by startDate.toString() and still doesn't work.

startDate is coming from date-fns DateRangePicker allowing you to select two dates. I am then pushing it through next.js router as a query

const search = () => {
    router.push({
      pathname: "/search",
      query: {
        location: searchInput,
        startDate: startDate.toISOString(),
        endDate: endDate.toISOString(),
        numOfGuests,
      },
    });
  };

ANSWER

Answered 2022-Jan-19 at 20:54

I figured out my problem. Everything works fine and the code should have worked as intended. The problem was coming from using nextJs, useRouter(). To access the router I needed to use useRouter(), example: const router = useRouter();. Then to access the query data i've set up within the router would be such as: const { location, startDate, endDate, numOfGuests } = router.query;.

To use useRouter it needs to be in a proper component function starting with a capitalized name. My problem was it was lowercased. Example ; function search() {...} instead of, function Search() {...}. From here i will keep the file name of search.js lowercased for address bar router query purposes.

Source https://stackoverflow.com/questions/70764753

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install date-fns

You can download it from GitHub.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: