React-datetime 使用扩展

2021-03-03 0 By admin

在使用 React-Datetime 模块做日期和时间选择器时,可以设置i18n 国际化配置、自定义输入外观、自定义时间选择器外观、年份选择器、时间选择器和设置日期不可选择。

一、i18n 国际化

react-datetime 支持不同的语言和日期格式。React 使用 Moment.js 格式化日期,更改日历语言的最简单方法是更改 Moment.js 的locale设置。
别忘了从 moment/locale 文件夹导入locale文件。

import moment from 'moment';
import 'moment/locale/fr';
// Now react-datetime will be in french

如果加载了多个区域设置,可以使用prop locale来定义实例应使用的语言。

<Datetime locale="fr-ca" />
<Datetime locale="de" />

二、自定义输入外观 Customize the Input Appearance

可以自定义输入的显示方式。最简单的方法是提供inputProps,它将直接分配给组件中的<input/>元素。我们可以这样调整输入:

let inputProps = {
    placeholder: 'N/A',
    disabled: true,
    onMouseLeave: () => alert('You went to the input but it was disabled')
};
<Datetime inputProps={ inputProps } />

或者,如果需要呈现与<input/>元素不同的内容,可以提供renderInput函数,该函数将被调用。

class MyDTPicker extends React.Component {
    render(){
        return <Datetime renderInput={ this.renderInput } />;
    }
    renderInput( props, openCalendar, closeCalendar ){
        function clear(){
            props.onChange({target: {value: ''}});
        }
        return (
            <div>
                <input {...props} />
                <button onClick={openCalendar}>open calendar</button>
                <button onClick={closeCalendar}>close calendar</button>
                <button onClick={clear}>clear</button>
            </div>
        );
    }
}

或者你只是想显示日历,根本不需要输入。在这种情况下,input={false}将产生以下效果:

<Datetime input={ false } />;

三、自定义时间选择器外观 Customize the Datepicker Appearance

可以自定义时间选择器中显示日、月和年的方式。要根据每个时间单位需要来调整日历,可以使用props renderDay(props,currentDate,selectedDate)、renderMonth(props,month,year,selectedDate)和renderYear(props,year,selectedDate)自定义每个时间单位渲染方法的输出。

class MyDTPicker extends React.Component {
  render() {
    return (
      <Datetime
        renderDay={this.renderDay}
        renderMonth={this.renderMonth}
        renderYear={this.renderYear}
      />
    );
  }
  renderDay(props, currentDate, selectedDate) {
    // Adds 0 to the days in the days view
    return <td {...props}>{"0" + currentDate.date()}</td>;
  }
  renderMonth(props, month, year, selectedDate) {
    // Display the month index in the months view
    return <td {...props}>{month}</td>;
  }
  renderYear(props, year, selectedDate) {
    // Just display the last 2 digits of the year in the years view
    return <td {...props}>{year % 100}</td>;
  }
}

也可以完全覆盖日历中的某些视图。假设我们想在日历中添加一个“今日”按钮,当我们单击它时,会转到“今日”视图:

class MyDTPicker extends React.Component {
  render() {
    return (
      <Datetime
        ref="datetime"
        renderView={(mode, renderDefault) =>
          this.renderView(mode, renderDefault)
        }
      />
    );
  }

  renderView(mode, renderDefault) {
    // Only for years, months and days view
    if (mode === "time") return renderDefault();

    return (
      <div className="wrapper">
        {renderDefault()}
        <div className="controls">
          <button onClick={() => this.goToToday()}>Today</button>
        </div>
      </div>
    );
  }

  goToToday() {
    // Reset
    this.refs.datetime.setViewDate(new Date());
    this.refs.datetime.navigate("days");
  }
}

3.1、方法参数 Method Parameters

  1. props 是时间选择器对象生成中依赖的对象。将此对象用作自定义组件的 Props 很方便,因为它知道如何处理click事件,并且其className属性由默认样式使用。
  2. selectedDate和currentDate是 Moment 对象,可用于根据所选日期或当前日期更改输出。
  3. month and year 是要显示的当前月份和年份的数字表示形式。请注意,可能的月份值范围为0到11。

四、年份选择器和时间选择器

您可以使用dateFormat和timeFormat筛选出您希望用户能够选择的内容,例如创建timepicker、yearpicker等。

在下面示例中,组件被用作时间选择器,并且只能用于选择时间。

<Datetime dateFormat={false} />

在下面示例中,只能选择年和月。

<Datetime dateFormat="YYYY-MM" timeFormat={false} />

五、设置日期不可选择 Blocking some dates to be selected

如果不允许用户选择日历中的日期(例如过去的日期),则可以禁用日历中的日期。
这是使用prop isValidDate来完成的,它允许一个形式为function(currentDate,selectedDate)的函数,其中两个参数都是Moment 对象。
对于可选择的日期,函数应返回true,对于禁用的日期,函数应返回false。

在下面的示例中,今天之前的所有日期都被禁用。

import moment from 'moment';
var yesterday = moment().subtract( 1, 'day' );
var valid = function( current ){
    return current.isAfter( yesterday );
};
<Datetime isValidDate={ valid } />

也可以禁用周末,如下例所示。

var valid = function( current ){
    return current.day() !== 0 && current.day() !== 6;
};
<Datetime isValidDate={ valid } />