在组件内部反应js datetimepicker用法

时间:2017-05-29 05:12:21

标签: reactjs datetimepicker bootstrap-grid

我是recatj的新手。我需要使用newrap来创建一个带有daterappicker的输入字段,因为我使用的是boostrap datetimepicker cdn链接,我不知道如何调用内部组件并获取datetimepicker的值componentdidmount方法。 请给我一个解决方案。

1 个答案:

答案 0 :(得分:2)

我可以帮助你做出反应日期选择器,它在安装和使用方面非常容易

您可以通过此命令安装

  

npm i --save react-datepicker

     

npm i - 保存时刻

这是我的代码我试了一下并且总是使用它,并将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

有关更多信息,请点击此链接 https://github.com/Hacker0x01/react-datepicker