mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 11:07:52 +08:00
fix: 修复 timeConstraints 属性不生效问题 (#3797)
This commit is contained in:
吴多益
GitHub
parent
e2c4c4e0de
commit
2ce532427c
@ -357,17 +357,16 @@ order: 13
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | --------- | -------------- | ----------------------------------------------------------------------------------------------------------- |
|
||||
| value | `string` | | [默认值](./date#%E9%BB%98%E8%AE%A4%E5%80%BC) |
|
||||
| format | `string` | `X` | 日期选择器值格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) |
|
||||
| inputFormat | `string` | `YYYY-DD-MM` | 日期选择器显示格式，即时间戳格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) |
|
||||
| closeOnSelect | `boolean` | `false` | 点选日期后，是否马上关闭选择框 |
|
||||
| placeholder | `string` | `"请选择日期"` | 占位文本 |
|
||||
| shortcuts | `string` | | 日期快捷键 |
|
||||
| minDate | `string` | | 限制最小日期 |
|
||||
| maxDate | `string` | | 限制最大日期 |
|
||||
| utc | `boolean` | `false` | 保存 utc 值 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| timeConstraints | `object` | `true` | 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime) |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | --------- | -------------- | ----------------------------------------------------------------------------------------------------------- |
|
||||
| value | `string` | | [默认值](./date#%E9%BB%98%E8%AE%A4%E5%80%BC) |
|
||||
| format | `string` | `X` | 日期选择器值格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) |
|
||||
| inputFormat | `string` | `YYYY-DD-MM` | 日期选择器显示格式，即时间戳格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) |
|
||||
| closeOnSelect | `boolean` | `false` | 点选日期后，是否马上关闭选择框 |
|
||||
| placeholder | `string` | `"请选择日期"` | 占位文本 |
|
||||
| shortcuts | `string` | | 日期快捷键 |
|
||||
| minDate | `string` | | 限制最小日期 |
|
||||
| maxDate | `string` | | 限制最大日期 |
|
||||
| utc | `boolean` | `false` | 保存 utc 值 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
|
||||
@ -313,4 +313,4 @@ order: 14
|
||||
| utc | `boolean` | `false` | 保存 utc 值 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联 |
|
||||
| timeConstraints | `object` | `true` | 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime) |
|
||||
| timeConstraints | `object` | `true` | 请参考 [input-time](./input-time#控制输入范围) 里的说明 |
|
||||
|
||||
@ -163,6 +163,63 @@ order: 58
|
||||
- `minute`或`minutes`: 分
|
||||
- `second`或`seconds`: 秒
|
||||
|
||||
## 控制输入范围
|
||||
|
||||
通过 `timeConstraints` 属性可以控制输入范围
|
||||
|
||||
默认值是
|
||||
|
||||
```json
|
||||
{
|
||||
"hours": {
|
||||
"min": 0,
|
||||
"max": 23,
|
||||
"step": 1
|
||||
},
|
||||
"minutes": {
|
||||
"min": 0,
|
||||
"max": 59,
|
||||
"step": 1
|
||||
},
|
||||
"seconds": {
|
||||
"min": 0,
|
||||
"max": 59,
|
||||
"step": 1
|
||||
},
|
||||
"milliseconds": {
|
||||
"min": 0,
|
||||
"max": 999,
|
||||
"step": 1
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
可以只修改其中的部分值，比如下面的示例将分钟每次加减改成了 15，小时的范围限制在 9 到 17
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"body": [
|
||||
{
|
||||
"type": "input-time",
|
||||
"name": "time",
|
||||
"label": "时间",
|
||||
"timeConstraints": {
|
||||
"hours": {
|
||||
"min": 9,
|
||||
"max": 17
|
||||
},
|
||||
"minutes": {
|
||||
"step": 15
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 原生时间组件
|
||||
|
||||
原生时间组件将直接使用浏览器的实现，最终展现效果和浏览器有关，而且只支持 `min`、`max`、`step` 这几个属性设置。
|
||||
@ -193,4 +250,4 @@ order: 58
|
||||
| inputFormat | `string` | `HH:mm` | 时间选择器显示格式，即时间戳格式，更多格式类型请参考 [moment](http://momentjs.com/) |
|
||||
| placeholder | `string` | `"请选择时间"` | 占位文本 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| timeConstraints | `object` | `true` | 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime) |
|
||||
| timeConstraints | `object` | `true` | |
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import moment from 'moment';
|
||||
import React from 'react';
|
||||
import merge from 'lodash/merge';
|
||||
import {LocaleProps, localeable} from '../../locale';
|
||||
import {Icon} from '../icons';
|
||||
import {ClassNamesFn} from '../../theme';
|
||||
@ -30,6 +31,7 @@ interface CustomTimeViewProps extends LocaleProps {
|
||||
useMobileUI: boolean;
|
||||
showToolbar?: boolean;
|
||||
onChange?: (value: any) => void;
|
||||
timeConstraints?: any;
|
||||
}
|
||||
|
||||
interface CustomTimeViewState {
|
||||
@ -85,6 +87,13 @@ export class CustomTimeView extends React.Component<
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = this.calculateState(this.props);
|
||||
|
||||
if (this.props.timeConstraints) {
|
||||
this.timeConstraints = merge(
|
||||
this.timeConstraints,
|
||||
this.props.timeConstraints
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(preProps: CustomTimeViewProps) {
|
||||
@ -173,6 +182,9 @@ export class CustomTimeView extends React.Component<
|
||||
value =
|
||||
this.timeConstraints[type].min +
|
||||
(value - (this.timeConstraints[type].max + 1));
|
||||
if (value < this.timeConstraints[type].min) {
|
||||
value = this.timeConstraints[type].min;
|
||||
}
|
||||
return this.pad(type, value);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user