日期选择器react-bootstrap-date-picker的使用

最新推荐文章于 2025-06-06 09:21:42 发布

原创最新推荐文章于 2025-06-06 09:21:42 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react日期选择 #date-picke

本文介绍了一个基于React的日期选择组件的实现方式。该组件利用了react-bootstrap-date-picker库，提供了基本的日期选择功能，包括设置日期格式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

声明: 转载请注明出处

简介: 结合react实现日期的选择

npm官方地址

使用示例

import React, { Component } from 'react';
import DatePicker from 'react-bootstrap-date-picker';

class DatetimePick extends Component {
  constructor(props) {
    super(props);

    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(value, formattedValue) {   //为其自带参数
    this.setState({
      value, // ISO String, ex: "2016-11-19T12:00:00.000Z"
      formattedValue, // Formatted String, ex: "11/19/2016"
    });
  }


  render() {
    return (
          <DatePicker
          id="example-datepicker"
          value={this.state.value}
          onChange={this.handleChange}
          dateFormat="YYYY/MM/DD"
          showClearButton={false}
        />
    );
  }
}
export default DatetimePick;