React-datetime 使用扩展
在使用 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
- props 是时间选择器对象生成中依赖的对象。将此对象用作自定义组件的 Props 很方便，因为它知道如何处理click事件，并且其className属性由默认样式使用。
- selectedDate和currentDate是 Moment 对象，可用于根据所选日期或当前日期更改输出。
- 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 } />