DatePickerView 选择器
DatePickerView 的功能类似于 DatePicker ,但它是直接渲染在区域中,而不是弹出窗口。
代码演示
选择器
import { DatePickerView } from 'antd-mobile';
import enUs from 'antd-mobile/lib/date-picker-view/locale/en_US';
class DatePickerViewExample extends React.Component {
state = {
value: null,
};
onChange = (value) => {
console.log(value);
this.setState({ value });
};
onValueChange = (...args) => {
console.log(args);
};
render() {
return (<div>
<div className="sub-title">Start datetime</div>
<DatePickerView
value={this.state.value}
onChange={this.onChange}
onValueChange={this.onValueChange}
/>
<div className="sub-title">End datetime</div>
<DatePickerView
locale={enUs}
value={this.state.value}
onChange={this.onChange}
onValueChange={this.onValueChange}
/>
</div>);
}
}
ReactDOM.render(<DatePickerViewExample />, mountNode);
.sub-title {
margin: 8px;
}
API
属性 | 说明 | 类型 | 默认值 |
---|
mode | 日期选择的类型, 可以是日期date ,时间time ,日期+时间datetime ,年year ,月month | String | date |
value | 当前选中时间 | Date | 无 |
minDate | 最小可选日期 | Date | 2000-1-1 |
maxDate | 最大可选日期 | Date | 2030-1-1 |
use12Hours | 12小时制 | Boolean | false |
minuteStep | 分钟数递增步长设置 | Number | 1 |
locale | 国际化,可覆盖全局LocaleProvider 的配置 | Object: {DatePickerLocale: {year, month, day, hour, minute, am?, pm?}, okText, dismissText } | - |
disabled | 是否不可用 | Boolean | false |
onChange | 时间发生变化的回调函数 | (date: Object): void | - |
onValueChange | 每列 picker 改变时的回调 | (vals: any, index: number) => void | - |