React Datepicker（无法获取输入值）

Posted 2023-05-07

【中文标题】React Datepicker（无法获取输入值）

【英文标题】：React Datepicker( can't get value of input)

【发布时间】：2018-04-19 23:21:06

【问题描述】：

我是反应新手。我需要使用react-datepicker

我想在更改日期时获取输入值。 如果我点击 2017 年 10 月 20 日，我想将 2017 年 10 月 20 日放在我的变量中。 但我应该使用组件而不是输入的主要问题。

在我刚刚从状态中获取价值之前。像this.state.value。但现在它是状态中的对象（时刻）。而且这个对象没有值字段。

这是我的代码：

export default class DatePicker extends Component 
constructor (props) 
    super(props);
    // this.props.date should looks like "29 November 2017 00:00"
    // second argument for moment() it is format of date, because RFC 2822 date time format
    this.state = 
        date: moment(this.props.value, 'LLL')
    ;

handleChange = (date) => 
  // const valueOfInput = this.state.date  <--- I want string with date here
  console.log('this.state.date',this.state.date);
  this.setState(date: date);
;
render() 
    return <Form.Field>
              <Label>
                <Picker
                  selected=this.state.date
                  onChange=this.handleChange
                  dateFormat="LLL"
                  locale=this.props.language
                />
              </Label>
          </Form.Field>

【问题讨论】：

你用的是什么主题库？

【参考方案1】：

就用这个吧：

handleChange = date => 
  const valueOfInput = date.format();
  ///...
;

因为这个datepicker 返回一个moment.js 对象！

有关更多信息，请查看 moment.js docs here。

【讨论】：

谢谢！，我在这个问题上苦苦挣扎了两天，这样的救命稻草:)

我得到 date.format() 不是函数。我必须安装时刻吗？

@justin 你找到解决方案了吗？

此答案对于较新版本的 react-datepicker 不正确，因为不再使用 moment.js，而是使用 date-fns。

【参考方案2】：

试试这个

<DatePicker 
   onChange=(value, e) => this.handleChange(value, e)
   selected=this.state.inputValue otherProps=here 
/>

// you can access the value field in handleChange by e.target.value

handleChange(value, e) 
    console.log(value); // this will be a moment date object
    console.log(e.target.value); // this will be a string value in datepicker input field

【参考方案3】：

这通过使用以下方法为我解决了：

handleDateChange = date => 
let selectedDateFromCalender = date.toUTCString();
this.setState(
      actualStartDate: selectedDateFromCalender,
  );

<DatePicker
selected=this.state.startDate
onChange=this.handleDateChange/>

---

您也可以使用以下方法，根据您的要求选择：

toISOString: "2020-10-05T09:10:38.000Z"

toJSON: "2020-10-06T09:09:16.000Z"

toUTCString: "2020 年 10 月 8 日星期四 09:11:24 GMT"

【讨论】：

它会给你选择的日期。

有什么意义？ “选定”。我的打字稿希望“选择”是日期类型，而不是字符串？

【参考方案4】：

如果您想获取新值（一旦用户单击 DatePicker 中的新日期），请将事件传递给方法。

class MyComponent extends React.Component 
  constructor(props) 
    this.state = inputValue: moment(), // this will set the initial date to "today", 
                                         // you could also put another prop.state value there
    this.handleChange = this.handleChange.bind(this);
  
  


  handleChange(value) 
    console.log(value); // this will be a moment date object
    // now you can put this value into state
    this.setState(inputValue: value);
  

  render()
    ...
    <DatePicker 
       onChange=(event) => this.handleChange(event)
       selected=this.state.inputValue otherProps=here />
    ...
  
;

【参考方案5】：

新版本的 react-datepicker 库停止使用 moment.js 对象，所以如果你想获得日期的格式化字符串表示，这是我的解决方案。

首次导入 import format from "date-fns/format"; 那么

    <DatePicker 
       onChange=(value)=>this.handleChange(format(value, "yyyy/MM/dd",  
       awareOfUnicodeTokens: true ))
       dateFormat="yyyy/MM/dd"
       selected=this.state.inputValue otherProps=here />
    ...

【参考方案6】：

您可以在日期对象上使用 getTime() 辅助函数来获取该特定日期的毫秒时间戳，这是一种 javascript 数字数据类型。用于将数据保存在应用程序的后端。例如 Flask Peewee ORM 需要为 DateTimeField 保存时间戳。

const [startDate, setStartDate] = useState(new Date())

<DatePicker
  onSelect( date => 
    setStartDate(getTime(date))
  
/>

来源：https://date-fns.org/v2.0.0-alpha.7/docs/getTime

将其与将默认状态值设置为页面加载时间戳的效果相结合：

useEffect(() => 
    setStartDate(getTime(startDate))
  , [])

否则，对于您的 UI，您可以使用 format() 辅助函数以任何给定格式获取给定对象的字符串值：

<h1>format(startDate, "MMMM d, yyyy h:mm aa")</h1>

来源：https://date-fns.org/v2.0.0-alpha.7/docs/format

【参考方案7】：

我有同样的问题，我使用以下解决方案解决了它。请试一试：

<p>this.state.date.toLocaleDateString()</p>

【参考方案8】：

<input id="tdate" type="date" name="todate" onchange="getToDate(event);">

function getToDate(e)
 const tdate = e.target.value;

//alert(tdate);
//console.log(tdate);
//return tdate;
;

这里我试图访问函数外部的“tdate”变量。