CODEWITHSUNDEEP
reactjs
Akila Wolfvswaliüm
Akila Wolfvswaliüm

Reputation: 180

How can I get a selected value from DateTimePicker using 'react-datetime'

I want to get a selected value from my DateTimePicker. instead of seeing the value I see [Object object]

This is my DateTimePicker.

  import React from 'react';

    import momentLocaliser from 'react-widgets-moment';

    import DateTime from 'react-datetime';

   import PropTypes from 'prop-types';
    import classNames from 'classnames';

  const moment = require('moment');

  moment.locale('es');

  momentLocaliser(moment);


   const handleChange = (e) =>{

      const valueOfInput = moment(e.target.value).format('DD-MM-YYYY HH:mm');

    return valueOfInput;

    }

    const DateTimePickerInput = ({
           label,
           format,
           input,
           width,
           placeholder,
           selected,
           tooltip,
           tooltipPlacement,
           disabled,
          defaultValue,
          inputProps,
           meta: { valid, touched, error},
          //input: { onChange, value, onBlur},
          showTime,
          ...props
           }) => {

          const classes = classNames('form-group', {
           'has-error': (touched && !valid),
            'has-success': (touched && !valid)
         })
       return (
          <div className={classes}>
             <label htmlFor={input.name}>{label}</label> <br />
             <DateTime

            name = {input.name}
            locale='es'
            dateFormat= "DD-MM-YYYY"
            timeFormat= "HH:mm"

          onChange = {(changedVal) => handleChange(changedVal)}

          inputProps={{disabled: true, placeholder: {handleChange}}} //In placeholder is the issue

         />

        {(!valid && touched) &&
             <p className='help-block'>{error}</p>
           }
          </div>
         );
      };

     DateTimePickerInput.propTypes = {
         disabled: PropTypes.bool,
         input: PropTypes.object.isRequired,
         label: PropTypes.string.isRequired,
         meta: PropTypes.object.isRequired,
         placeholder: PropTypes.string,
         tooltip: PropTypes.string,
         tooltipPlacement: PropTypes.string
      }




    export default DateTimePickerInput;

I expect getting the selected value from dateTimePicker but only instead see that I see [Object object].

I need solve now.

I believe if I declare onChange like parameter when I'm declaring DateTimePickerInput and assign to placeholder onChange, things would change. But I'm not sure. I need anyone tells me what is wrong.

Upvotes: 1

Views: 1705

Answers (1)

Alex
Alex

Reputation: 3991

onChange: Callback trigger when the date changes. The callback receives the selected moment object as only parameter, if the date in the input is valid. If the date in the input is not valid, the callback receives the value of the input (a string).

So,change moment(e.target.value) to moment(e.toDate())

const handleChange = (e) =>{
   const valueOfInput = moment(e.toDate()).format('DD-MM-YYYY HH:mm');

   return valueOfInput;
   }

  inputProps={{ placeholder:moment().format('DD-MM-YYYY HH:mm'), disabled: true }}

Upvotes: 1

Related Questions