react获取Datepicker组件日期

关注

最新推荐文章于 2026-06-14 09:21:23 发布 · 803 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

· GEO检测

最好用的 8 款 React Datepicker 时间日期选择器测评推荐 React 时间日期选择器（date-timepicker）组件,与表单、富文本、表格、拖拽等组件一样，是大家用 React 搭建项目时使用最频繁的组件之一。React DateTimePicker 除了基础选择日期时间外，还有非常多样的功能配合不同场景使用，比如 12/24小时，禁止选择某些日期，高亮某些日期，夜间模式，多语言，酒店订单的特别场景等。本文记录了我自己使用多年最好用的 8 款 React DateTimePicker 组件，每一款都经过我实际测试，推荐给大家。阅读详情

当用户在输入字段中键入时，onChange事件将触发，并更新inputValue状态变量。这使得React重新渲染组件，并将输入字段的值更新为最新的inputValue。

import React from 'react';
import DatePicker from 'material-ui/DatePicker';

class MyComponent extends React.Component {
    handleDateChange = (event, date) => {
        // 你可以在这里处理日期改变的逻辑
        console.log(date);  // 这是选定的日期和时间
    }

    render() {
        return (
            <DatePicker onChange={this.handleDateChange} />
        );
    }
}

export default MyComponent;

在这个例子中，当用户在DatePicker中选择一个新日期时，handleDateChange函数会被调用，选定的日期作为参数传入。你可以在这个函数中进行任何你需要做的处理。

注意，日期的格式可能取决于你如何接收和处理这个日期。在上述示例中，日期是一个Date对象，你可以使用JavaScript的Date对象方法来处理它。例如，你可以使用date.toISOString()将其转换为字符串，或者使用date.getDay()来获取星期几。