How to handle onChange value in date? reactjs

user_12058249 0
Viewed 3775

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;
reactjs javascript
3 Answers

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
  };
user_29791000

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

user_84777920

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;
user_99499060
Related