在组件内反应 js datetimepicker 用法

Question

我是 recatjs.I 的新手，需要使用 boostrap 创建带有 datetimepicker 的输入字段，因为我正在使用 boostrap datetimepicker cdn link 并且我不知道如何调用内部component 并在 componentdidmount 方法中获取 datetimepicker 的值。请提供解决方案。

Answer 1

我可以帮助您使用 React 日期选择器，它的安装和使用非常简单

可以通过这个命令安装

npm i --save react-datepicker

npm i --save moment

这是我的代码，我尝试过并一直使用它，并在 handleChange 函数中保存日期值作为以下代码

import React, { Component } from 'react'
import DatePicker from 'react-datepicker';
import moment from 'moment';

class About extends Component {
    constructor (props) {
        super(props)
        this.state = {
            startDate: moment()
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(date) {
        this.setState({
            startDate: date
        });
    }
    render() {
        return (
            <div >
                <DatePicker
                    selected={this.state.startDate}
                    onChange={this.handleChange}
                    peekNextMonth
                    showMonthDropdown
                    showYearDropdown
                    dropdownMode="select"
                />
            </div>
        )
    }
}

export default About

有关更多信息，请关注此 link https://github.com/Hacker0x01/react-datepicker

在组件内反应 js datetimepicker 用法

React js datetimepicker usage inside component

reactjs

datetimepicker

bootstrap-grid