如何在 reactJs.net 中使用引导日期选择器

【问题标题】：How can I use bootstrap datepicker in reactJs.net如何在 reactJs.net 中使用引导日期选择器
【发布时间】：2015-09-04 13:32:05
【问题描述】：

我是 ReactJS 的初学者。我正在使用带有 MVC5 的 ReactJs.Net (JSX)。我想使用引导日期和时间选择器。我搜索了很多，但没有找到任何例子。我还搜索了http://reactjs.net/getting-started/tutorial.html。请帮助显示日期选择器初始化的示例。这对我有很大帮助。

【问题讨论】：

您在尝试使其工作时是否遇到了任何特殊问题？你采取了哪些步骤来调试它？
我尝试按照link 的建议使用它。但它显示<DateTimeField /> 未定义。看来我需要配置一个模板来使用日期时间选择器。这就是我寻找 JSX 示例的原因。

标签： twitter-bootstrap asp.net-mvc-5 reactjs react-jsx reactjs.net

【解决方案1】：

这是一个使用 Bootstrap date-picker 的 ES6（使用 BabelJS）示例。

声明者：我没有使用 ReactJS.net 的经验，但使用了 ReactJS

"use strict";

import React, { PropTypes } from 'react';

class Calender extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            date : "2016-01-15T01:06"
        };
    }

    render() {
        return (
            <input type="datetime-local" ref={(date) => {this.dateRef = date;}} value={this.state.date} onChange={this._onDateChange.bind(this)}/>
        );
    }

    _onDateChange(e) {
        let state = this.state;
        state['date'] = e.target.value;
        // Or (you can use below method to access component in another method)
        state['date'] = this.dateRef.value;
        this.setState(state);
    }

}

export default Calender;

工作示例：

参考：ReactJS froms

【讨论】：