react中的使用日期控件 bootstrap-datetime-picker

引入jquery 和 bootstrap-datetime-picker

<script src="/cx/tpl/Support/search/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/cx/tpl/Support/search/node_modules/bootstrap-datetime-picker/js/bootstrap-datetimepicker.min.js"></script>

初始化

export default class Search extends React.Component {
    constructor(props) {
        super(props);
    }

    formateDate(date){
        date = String(date);
        const year = date.substr(0, 4);
        const month = date.substr(4, 2);
        const day = date.substr(6, 2);
        return Date.parse(year + '/' + month + '/' + day);
    }

    /*系統鉤子render後執行*/
    componentDidMount() {

        /*初始化日期控件*/
        $.fn.datetimepicker.dates['en'] = {
            days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
            daysShort: ["週日", "週一", "週二", "週三", "週四", "週五", "週六", "週日"],
            daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
            months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            today: "今天",
            suffix: [],
            meridiem: ["上午", "下午"]
        };
        $('#startDate').datetimepicker({
            format: 'yyyymmdd',
            // minView: 4,
            todayBtn: true,
            forceParse: false
        }).on('changeDate', (event) => {
            const {target} = event;
            let errorMessage = '';
            if (target.value === '0') {
                errorMessage = "時間不能爲0";
            } else if (this.state.endTime && target.value) {
                 if ((this.state.endTime - target.value) <= 0) {
                    errorMessage = "結束時間不能小於或者等於開始時間";
                }
            }
            this.setState({
                time: target.value,
                errorMessage: errorMessage
            });
        });
        $('#endDate').datetimepicker({
            format: 'yyyymmdd',
            // minView: 4,
            todayBtn: true,
            forceParse: false
        }).on('changeDate', (event) => {
            const {target} = event;
            let errorMessage = '';
            if (target.value === '0') {
                errorMessage = "時間不能爲0";
            } else if (target.value && this.state.time) {
                 if ((target.value - this.state.time) <= 0) {
                    errorMessage = "結束時間不能小於或者等於開始時間";
                }
            }
            this.setState({
                endTime: target.value,
                errorMessage: errorMessage
            });
        });


    }

    render() {
        return (
            <form className="form-inline">
                <div className="form-group">
                    <input value={this.state.time} onChange={this.handleOnChange.bind(this, 1)} type="text"
                           className="form-control input-sm"
                           id="startDate" placeholder="開始日期:20180911"/>
                </div>
                <div className="form-group">
                    <input value={this.state.endTime} onChange={this.handleOnChange.bind(this, 5)} type="text"
                           className="form-control input-sm"
                           id="endDate" placeholder="結束日期:20180911"/>
                </div>
            </form>
        );
    }

}