在页面上呈现 DatePicker 的完整日历

Question

我正在尝试使用 React 来制作一个简单的应用程序。

我喜欢以下日期选择器（点击后）的完整日历外观：

是否可以将完整的日历提取到页面上而无需单击打开日历 modal/dialog？就像在 Google 日历应用程序中一样。

例如，我想在应用程序的主页上显示日历。

Answer 1

查看 material-ui 库中的 Calendar component。你应该可以直接使用它 -

import Calendar from 'material-ui/lib/date-picker/calendar';

有关如何使用它的示例，请查看 DatePickerDialog component code。

<Calendar
      DateTimeFormat={DateTimeFormat}
      firstDayOfWeek={firstDayOfWeek}
      locale={locale}
      ref="calendar"
      onDayTouchTap={this.handleTouchTapDay}
      initialDate={this.props.initialDate}
      open={this.state.open}
      minDate={this.props.minDate}
      maxDate={this.props.maxDate}
      shouldDisableDate={this.props.shouldDisableDate}
      disableYearSelection={this.props.disableYearSelection}
      mode={this.props.mode}
    />

在页面上呈现 DatePicker 的完整日历

Render Full Calendar of DatePicker on a page

javascript

calendar

datepicker

reactjs

material-ui