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

本文介绍了在页面上呈现DatePicker的完整日历的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用React创建一个简单的应用程序.

I'm trying out React to make a simple application.

我喜欢以下日期选择器(单击后)的完整日历外观:

I like how the full calendar looks like of the following date pickers (after clicking):

材料UI
反应工具箱

Material-UI
React-Toolbox

是否可以将整个日历提取到页面上而无需单击以打开日历模式/对话框?就像在Google日历应用中一样.

Is it possible to extract out the full calendar out onto a page without having to click to open the calendar modal/dialog? Just like in Google Calendar apps.

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

For example, I'd like to display the calendar on the main page of the app.

推荐答案

看看日历组件.您应该可以直接使用它-

Have a look at the Calendar component in material-ui library. You should be able to use it directly -

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

有关如何使用它的示例，请查看 DatePickerDialog组件代码.

For an example on how to use it, look inside the 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的完整日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！