How to handle onChange value in date? reactjs

Question

I have a simple date input component, i just stuck when change the value of it. Because it always print value "1970-01-01".

Somebody knows how to do it. would appreciate thanks.

Here is my codes:

import React, { useState } from 'react';
import moment from 'moment';

const DateInput = ({ className = style.defaultSize, onChange }) => {
  const [value, setValue] = useState(moment().format('YYYY-MM-DD'));

  const onChangeDate = (date) => {
    const newDate = moment(date.timeStamp).format('YYYY-MM-DD');
    setValue(newDate);
    console.log(newDate); //always log "1970-01-01"
  };

  return (
    <input
        type="date"
        value={value}
        onChange={onChangeDate}
     />
  );
};

export default DateInput;

The question is missing details about the problem. Please elaborate on your problem so that i can underatand — user15259537
– user15259537, Commented Jun 7, 2021 at 5:04
date.timeStamp should be date.target.value in the onChangeDate function. const newDate = moment(date.target.value).format("YYYY-MM-DD");. 👉 SandBox: — Manas Khandelwal
– Manas Khandelwal, Commented Jun 7, 2021 at 5:11

nmanikiran · Accepted Answer · 2021-06-07 05:07:11Z

3

That because we will get the input value inside the event.target.value

  const onChangeDate = e => {
    const newDate = moment(new Date(e.target.value)).format('YYYY-MM-DD');
    setValue(newDate);
    console.log(newDate); //value picked from date picker
  };

answered Jun 7, 2021 at 5:07

nmanikiran

3,1981 gold badge19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Md. Abu Sayed · Accepted Answer · 2021-06-07 05:39:21Z

2

I have extended your code and showed it away, you can try it or visit live code to Codesandbox!

import React, { useState } from "react";
import moment from "moment";
import Moment from "react-moment";


const DateInput = ({ className = style.defaultSize, onChange }) => {
  const [value, setValue] = useState(moment().format('YYYY-MM-DD'));

  const onChangeDate = (date) => {
    const newDate = setValue(moment(new Date(date.target.value)).format("YYYY-MM-DD"));
    setValue(newDate);
    console.log(newDate); //always log "1970-01-01"
  };

  return (
    <input
        type="date"
        value={value}
        onChange={(e)=>onChangeDate(e)}
     />
     
     <strong>MOMENT TIME:</strong>
      <br />
      <Moment format="DD-MM-YYYY">{value}</Moment>
  );
};

export default DateInput;

Thanks

answered Jun 7, 2021 at 5:39

Md. Abu Sayed

2,5363 gold badges21 silver badges30 bronze badges

3 Comments

Nikolas Pafitis Over a year ago

Question slightly off topic, why is it that your example in Codesandbox doesn't have React's control input caret jumping to the end issue? I also made an example with a plain text input and it doesn't have that issue in that same sandbox. In my project I have an implementation very similar to yours but because of controlled input caret jumping, editing the date by text breaks.

Md. Abu Sayed Over a year ago

@NikolasPafitis, I really don't understand your problem, hopefully, it's come from another issue in your code.

Nikolas Pafitis Over a year ago

I'm referring to this issue stackoverflow.com/questions/46000544/… The sandbox example you provided doesn't have it although it should afaik.

Saba · Accepted Answer · 2021-06-07 05:23:54Z

0

You need to access the field value via target property of the event object of the input. So your code would change as below:

import React, { useState } from 'react';
import moment from 'moment';

const DateInput = ({ className = style.defaultSize, onChange }) => {
  const [value, setValue] = useState(moment().format('YYYY-MM-DD'));

  const onChangeDate = ({ target }) => {
    const newDate = moment(target.value.timeStamp).format('YYYY-MM-DD');
    setValue(newDate);
    console.log(newDate); //always log "1970-01-01"
  };

  return (
    <input
        type="date"
        value={value}
        onChange={onChangeDate}
     />
  );
};

export default DateInput;

answered Jun 7, 2021 at 5:23

Saba

3735 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to handle onChange value in date? reactjs

3 Answers 3

Comments

I have extended your code and showed it away, you can try it or visit live code to Codesandbox!

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

I have extended your code and showed it away, you can try it or visit live code to Codesandbox!

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related