How to change react datepicker format yyyy-MM-dd

Question

I using react datepicker and I changed yyyy-MM-dd format datepicker inside input. but I need this format console.log value 2023-06-15, but value comes from this format Thu Jun 15 2023 00:00:00 GMT+0530 (India Standard Time). could you please check and solve.

import { forwardRef, useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";


export default function AddLaytime() {
  const [startDate, setStartDate] = useState();
  console.log(startDate)
  const ExampleCustomInput = forwardRef(({ value, onClick, onChange }, ref) => (
    <input
      value={value}
      className="example-custom-input"
      onClick={onClick}
      onChange={onChange}
      ref={ref}
    ></input>
  ));
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      customInput={<ExampleCustomInput />}
      dayClassName={() => "example-datepicker-day-class"}
      popperClassName="example-datepicker-class"
      todayButton="TODAY"
      dateFormat='yyyy-MM-dd'
      placeholderText='Choose Date'
    />
  );
}

It's storing a date object, which is generally a good idea. If you want to display it on screen somewhere, you could format that date object (E.g. using one of the many question about that on this site: [How do I format a date in JavaScript?](https://stackoverflow.com/questions/3552461/how-do-i-format-a-date-in-javascript)) but I would recommend keeping `startDate` as a date object, and turning it into a formatted string when displaying it in the UI. — DBS, Jun 14 '23 at 09:13
@DBS I need Reactjs example. could you please update my code — siva, Jun 14 '23 at 09:16
There's nothing to convert. `startDate` is a `Date` object and has no format. `console.log(startDate)` converts the date to a string by calling [Date.toString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toString) which returns a string in *the local timezone*. — Panagiotis Kanavos, Jun 14 '23 at 09:21
Does this answer your question? [How does console.log convert javascript date object into human readable format](https://stackoverflow.com/questions/56207494/how-does-console-log-convert-javascript-date-object-into-human-readable-format) — Panagiotis Kanavos, Jun 14 '23 at 09:21
If you want to convert a Date to an ISO string call [toISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) instead of `toString()`, eg `console.log(startDate.toISOString())` — Panagiotis Kanavos, Jun 14 '23 at 09:24
I follwed working I selected 2023-06-15 but comes console this format 6/15/2023, 3:02:58 PM, need same value 2023-06-15 — siva, Jun 14 '23 at 09:35

Bhargav Garnara · Answer 1 · 2023-06-14T10:28:02.243

I have updated your code Little bit so now it can give you desired output. Here i am pasting code. Here you have 2 option. First is to go with pure JS concepts of Date and 2nd one is Moment library. I am giving answer of library way solution.

First you need to install moment library for that which will convert and give you desired output.

npm i moment -f

Then make some changes in your code like this...

import moment from "moment/moment";
import { forwardRef, useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";


export default function AddLaytime() {
  const [formatedDate, setFormatedDate] = useState()
  const [startDate, setStartDate] = useState();
  console.log(formatedDate)
  const ExampleCustomInput = forwardRef(({ value, onClick, onChange }, ref) => (
    <input
      value={value}
      className="example-custom-input"
      onClick={onClick}
      onChange={onChange}
      ref={ref}
    ></input>
  ));

  const setDate = (date) => {
    let newDate = moment(date).format("yyyy-MM-DD");
    setStartDate(date)
    setFormatedDate(newDate)
  }
  return (
    <DatePicker
        selected={startDate}
      onChange={(date) => setDate(date)}
      customInput={<ExampleCustomInput />}
      dayClassName={() => "example-datepicker-day-class"}
      popperClassName="example-datepicker-class"
      todayButton="TODAY"
      dateFormat='yyyy-MM-dd'
      placeholderText='Choose Date'
    />
  );
}

Here I have taken another state variable because you have to show selected date in input box.
So that It will cause you an error if you don't use another variable. Because selected attribute can't understand and read formatted date.

May be this will help you out.. Thank You...!

You absolutely DO NOT need to install any extra library for something as simple as formatting a date. And if you do want to do more complex date manipulation, Moment is generally not the way to go, the project is no longer under active development and [they suggest potential users consider other options](https://momentjs.com/docs/#/-project-status/). — DBS, Jun 14 '23 at 11:15

How to change react datepicker format yyyy-MM-dd

1 Answers1