簡體   English   中英

如何使用“react-datetime”從 DateTimePicker 獲取選定的值

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

我想從我的 DateTimePicker 中獲得一個選定的值。 而不是看到我看到的值 [Object object]

這是我的 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;

我希望從 dateTimePicker 獲得選定的值,但只能看到我看到 [Object object]。

我現在需要解決。

我相信如果我在聲明 DateTimePickerInput 並分配給占位符 onChange 時聲明 onChange 之類的參數,事情就會改變。 但我不確定。 我需要有人告訴我出了什么問題。

onChange :日期改變時的回調觸發。 如果輸入中的日期有效,則回調接收選定的矩對象作為唯一參數。 如果輸入中的日期無效,則回調接收輸入的值(字符串)。

因此,將moment(e.target.value)更改為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 }}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM