mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
feat:时间以及时间范围组件支持设置popOverContainerSelector属性
This commit is contained in:
jinye
parent
ec1cf05e39
commit
7bc980a504
@ -234,58 +234,58 @@ order: 15
|
||||
|
||||
> `3.5.0`及以上版本
|
||||
|
||||
默认情况下，日期范围选择器组件的绑定值的开始时间为所选时间当天的0点（使用`moment().startOf('day')`处理），结束时间为所选时间当天的23时59分59秒999毫秒（使用`moment().endOf('day')`处理）。如果设置了`timeFormat`（时间格式），则会基于`timeFormat`配置决定**最小时间单位**，举例：
|
||||
默认情况下，日期范围选择器组件的绑定值的开始时间为所选时间当天的 0 点（使用`moment().startOf('day')`处理），结束时间为所选时间当天的 23 时 59 分 59 秒 999 毫秒（使用`moment().endOf('day')`处理）。如果设置了`timeFormat`（时间格式），则会基于`timeFormat`配置决定**最小时间单位**，举例：
|
||||
|
||||
- 不设置`timeFormat`（时间格式），默认按照天(day)级处理：
|
||||
|
||||
```typescript
|
||||
moment().startOf('day'); // 2008-08-08 00:00:00.000
|
||||
moment().endOf('day'); // 2008-08-08 23:59:59.999
|
||||
```
|
||||
```typescript
|
||||
moment().startOf('day'); // 2008-08-08 00:00:00.000
|
||||
moment().endOf('day'); // 2008-08-08 23:59:59.999
|
||||
```
|
||||
|
||||
- `timeFormat`（时间格式）为 `"HH:mm:ss"`，则会按照秒(second)级处理：
|
||||
|
||||
```typescript
|
||||
moment().startOf('second'); // 2008-08-08 08:08:08.000
|
||||
moment().endOf('second'); // 2008-08-08 08:08:08.999
|
||||
```
|
||||
```typescript
|
||||
moment().startOf('second'); // 2008-08-08 08:08:08.000
|
||||
moment().endOf('second'); // 2008-08-08 08:08:08.999
|
||||
```
|
||||
|
||||
- `timeFormat`（时间格式）为 `"HH:mm"`，则会按照分钟(minute)级处理：
|
||||
|
||||
```typescript
|
||||
moment().startOf('minute'); // 2008-08-08 08:08:00.000
|
||||
moment().endOf('minute'); // 2008-08-08 08:08:59.999
|
||||
```
|
||||
```typescript
|
||||
moment().startOf('minute'); // 2008-08-08 08:08:00.000
|
||||
moment().endOf('minute'); // 2008-08-08 08:08:59.999
|
||||
```
|
||||
|
||||
- `timeFormat`（时间格式）为 `"HH"`，则会按照小时(hour)级处理：
|
||||
|
||||
```typescript
|
||||
moment().startOf('hour'); // 2008-08-08 08:00:00.000
|
||||
moment().endOf('hour'); // 2008-08-08 08:59:59.999
|
||||
```
|
||||
```typescript
|
||||
moment().startOf('hour'); // 2008-08-08 08:00:00.000
|
||||
moment().endOf('hour'); // 2008-08-08 08:59:59.999
|
||||
```
|
||||
|
||||
部分情况下，即使配置`timeFormat`也无法满足需求，此时可以使用`transform`函数对时间值做进一步处理, 函数签名如下：
|
||||
|
||||
```typescript
|
||||
interface TransFormFunc {
|
||||
(
|
||||
/* 当前值，Moment对象 */
|
||||
value: moment.Moment,
|
||||
config: {
|
||||
/* 操作类型，start：起始时间；end：结束时间 */
|
||||
type: 'start' | 'end';
|
||||
/* 初始值，最近一次选择的时间值 */
|
||||
originValue: moment.Moment,
|
||||
/* 时间格式 */
|
||||
timeFormat: string
|
||||
},
|
||||
/* 当前组件的属性 */
|
||||
props: any,
|
||||
/* 当前组件数据域 */
|
||||
data: any,
|
||||
/* moment函数 */
|
||||
moment: moment
|
||||
): moment.Moment;
|
||||
(
|
||||
/* 当前值，Moment对象 */
|
||||
value: moment.Moment,
|
||||
config: {
|
||||
/* 操作类型，start：起始时间；end：结束时间 */
|
||||
type: 'start' | 'end';
|
||||
/* 初始值，最近一次选择的时间值 */
|
||||
originValue: moment.Moment;
|
||||
/* 时间格式 */
|
||||
timeFormat: string;
|
||||
},
|
||||
/* 当前组件的属性 */
|
||||
props: any,
|
||||
/* 当前组件数据域 */
|
||||
data: any,
|
||||
/* moment函数 */
|
||||
moment: moment
|
||||
): moment.Moment;
|
||||
}
|
||||
```
|
||||
|
||||
@ -316,46 +316,42 @@ interface TransFormFunc {
|
||||
|
||||
```typescript
|
||||
function transform(value, config, props, data) {
|
||||
const now = moment();
|
||||
const now = moment();
|
||||
|
||||
if (config.type === 'end') {
|
||||
value.set({
|
||||
hours: now.hours(),
|
||||
minutes: now.minutes(),
|
||||
seconds: now.seconds(),
|
||||
milliseconds: now.milliseconds()
|
||||
});
|
||||
}
|
||||
if (config.type === 'end') {
|
||||
value.set({
|
||||
hours: now.hours(),
|
||||
minutes: now.minutes(),
|
||||
seconds: now.seconds(),
|
||||
milliseconds: now.milliseconds()
|
||||
});
|
||||
}
|
||||
|
||||
return value;
|
||||
return value;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## 属性表
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------- | ---------------------------------------------------------------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------- | ----------------------- |
|
||||
| valueFormat | `string` | `X` | [日期选择器值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) | 3.4.0 版本后支持 |
|
||||
| displayFormat | `string` | `YYYY-MM-DD` | [日期选择器显示格式](./date#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) | 3.4.0 版本后支持 |
|
||||
| placeholder | `string` | `"请选择日期范围"` | 占位文本 |
|
||||
| shortcuts | `string \| string[] \| Array<{label: string; startDate: string; endDate: string}>` | `"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter"` | 日期范围快捷键 | `3.1.0`版本后支持表达式 |
|
||||
| minDate | `string` | | 限制最小日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| maxDate | `string` | | 限制最大日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| minDuration | `string` | | 限制最小跨度，如： 2days |
|
||||
| maxDuration | `string` | | 限制最大跨度，如：1year |
|
||||
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
| extraName | `string` | | 是否存成两个字段 | `3.3.0` |
|
||||
| transform | `string` | | 日期数据处理函数，用来处理选择日期之后的的值，返回值为 `Moment`对象 | `3.5.0` |
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------------------ | ---------------------------------------------------------------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------- | ----------------------- |
|
||||
| valueFormat | `string` | `X` | [日期选择器值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) | 3.4.0 版本后支持 |
|
||||
| displayFormat | `string` | `YYYY-MM-DD` | [日期选择器显示格式](./date#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) | 3.4.0 版本后支持 |
|
||||
| placeholder | `string` | `"请选择日期范围"` | 占位文本 |
|
||||
| shortcuts | `string \| string[] \| Array<{label: string; startDate: string; endDate: string}>` | `"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter"` | 日期范围快捷键 | `3.1.0`版本后支持表达式 |
|
||||
| minDate | `string` | | 限制最小日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| maxDate | `string` | | 限制最大日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| minDuration | `string` | | 限制最小跨度，如： 2days |
|
||||
| maxDuration | `string` | | 限制最大跨度，如：1year |
|
||||
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
| extraName | `string` | | 是否存成两个字段 | `3.3.0` |
|
||||
| transform | `string` | | 日期数据处理函数，用来处理选择日期之后的的值，返回值为 `Moment`对象 | `3.5.0` |
|
||||
| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -412,20 +412,21 @@ order: 13
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------- | -------------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------- |
|
||||
| value | `string` | | [默认值](./date#%E9%BB%98%E8%AE%A4%E5%80%BC) |
|
||||
| valueFormat | `string` | `X` | 日期选择器值格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) | 3.4.0 版本后支持 |
|
||||
| displayFormat | `string` | `YYYY-MM-DD` | 日期选择器显示格式，即时间戳格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) | 3.4.0 版本后支持 |
|
||||
| closeOnSelect | `boolean` | `false` | 点选日期后，是否马上关闭选择框 |
|
||||
| placeholder | `string` | `"请选择日期"` | 占位文本 |
|
||||
| shortcuts | `string \| string[] \| Array<{"label": string; date: string}>` | | 日期快捷键，字符串格式为预设值，对象格式支持写表达式 | `3.1.0`版本后支持表达式 |
|
||||
| minDate | `string` | | 限制最小日期 |
|
||||
| maxDate | `string` | | 限制最大日期 |
|
||||
| utc | `boolean` | `false` | 保存 utc 值 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| disabledDate | `string` | | 用字符函数来控制哪些天不可以被点选 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------------------ | -------------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------- |
|
||||
| value | `string` | | [默认值](./date#%E9%BB%98%E8%AE%A4%E5%80%BC) |
|
||||
| valueFormat | `string` | `X` | 日期选择器值格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) | 3.4.0 版本后支持 |
|
||||
| displayFormat | `string` | `YYYY-MM-DD` | 日期选择器显示格式，即时间戳格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) | 3.4.0 版本后支持 |
|
||||
| closeOnSelect | `boolean` | `false` | 点选日期后，是否马上关闭选择框 |
|
||||
| placeholder | `string` | `"请选择日期"` | 占位文本 |
|
||||
| shortcuts | `string \| string[] \| Array<{"label": string; date: string}>` | | 日期快捷键，字符串格式为预设值，对象格式支持写表达式 | `3.1.0`版本后支持表达式 |
|
||||
| minDate | `string` | | 限制最小日期 |
|
||||
| maxDate | `string` | | 限制最大日期 |
|
||||
| utc | `boolean` | `false` | 保存 utc 值 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| disabledDate | `string` | | 用字符函数来控制哪些天不可以被点选 |
|
||||
| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -126,18 +126,19 @@ order: 16
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------- | ---------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ----------------------- |
|
||||
| valueFormat | `string` | `X` | [日期时间选择器值格式](./input-datetime#%E5%80%BC%E6%A0%BC%E5%BC%8F) | 3.4.0 版本后支持 |
|
||||
| displayFormat | `string` | `YYYY-MM-DD` | [日期时间选择器显示格式](./input-datetime#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) | 3.4.0 版本后支持 |
|
||||
| placeholder | `string` | `"请选择日期范围"` | 占位文本 |
|
||||
| shortcuts | `string \| string[] \| Array<{label: string; startDate: string; endDate: string}>` | `"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter"` | 日期范围快捷键，详情参考[快捷键](./input-date-range#快捷键) | `3.1.0`版本后支持表达式 |
|
||||
| minDate | `string` | | 限制最小日期时间，用法同 [限制范围](./input-datetime#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| maxDate | `string` | | 限制最大日期时间，用法同 [限制范围](./input-datetime#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| utc | `boolean` | `false` | [保存 UTC 值](./input-datetime#utc) |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
| extraName | `string` | | 是否存成两个字段 | `3.3.0` |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------------------ | ---------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ----------------------- |
|
||||
| valueFormat | `string` | `X` | [日期时间选择器值格式](./input-datetime#%E5%80%BC%E6%A0%BC%E5%BC%8F) | 3.4.0 版本后支持 |
|
||||
| displayFormat | `string` | `YYYY-MM-DD` | [日期时间选择器显示格式](./input-datetime#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) | 3.4.0 版本后支持 |
|
||||
| placeholder | `string` | `"请选择日期范围"` | 占位文本 |
|
||||
| shortcuts | `string \| string[] \| Array<{label: string; startDate: string; endDate: string}>` | `"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter"` | 日期范围快捷键，详情参考[快捷键](./input-date-range#快捷键) | `3.1.0`版本后支持表达式 |
|
||||
| minDate | `string` | | 限制最小日期时间，用法同 [限制范围](./input-datetime#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| maxDate | `string` | | 限制最大日期时间，用法同 [限制范围](./input-datetime#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| utc | `boolean` | `false` | [保存 UTC 值](./input-datetime#utc) |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
| extraName | `string` | | 是否存成两个字段 | `3.3.0` |
|
||||
| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -411,21 +411,22 @@ order: 14
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| --------------- | -------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------- | ----------------------- |
|
||||
| value | `string` | | [默认值](./datetime#%E9%BB%98%E8%AE%A4%E5%80%BC) |
|
||||
| valueFormat | `string` | `X` | 日期时间选择器值格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) | 3.4.0 版本后支持 |
|
||||
| displayFormat | `string` | `YYYY-MM-DD HH:mm:ss` | 日期时间选择器显示格式，即时间戳格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) | 3.4.0 版本后支持 |
|
||||
| placeholder | `string` | `"请选择日期以及时间"` | 占位文本 |
|
||||
| shortcuts | `string \| string[] \| Array<{"label": string; date: string}>` | | 日期时间快捷键 | `3.1.0`版本后支持表达式 |
|
||||
| minDate | `string` | | 限制最小日期时间 |
|
||||
| maxDate | `string` | | 限制最大日期时间 |
|
||||
| utc | `boolean` | `false` | 保存 utc 值 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联 |
|
||||
| timeConstraints | `object` | `true` | 请参考 [input-time](./input-time#控制输入范围) 里的说明 |
|
||||
| isEndDate | `boolean` | `false` | 如果配置为 true，会自动默认为 23:59:59 秒 |
|
||||
| disabledDate | `string` | | 用字符函数来控制哪些天不可以被点选 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------------------ | -------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------- | ----------------------- |
|
||||
| value | `string` | | [默认值](./datetime#%E9%BB%98%E8%AE%A4%E5%80%BC) |
|
||||
| valueFormat | `string` | `X` | 日期时间选择器值格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) | 3.4.0 版本后支持 |
|
||||
| displayFormat | `string` | `YYYY-MM-DD HH:mm:ss` | 日期时间选择器显示格式，即时间戳格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) | 3.4.0 版本后支持 |
|
||||
| placeholder | `string` | `"请选择日期以及时间"` | 占位文本 |
|
||||
| shortcuts | `string \| string[] \| Array<{"label": string; date: string}>` | | 日期时间快捷键 | `3.1.0`版本后支持表达式 |
|
||||
| minDate | `string` | | 限制最小日期时间 |
|
||||
| maxDate | `string` | | 限制最大日期时间 |
|
||||
| utc | `boolean` | `false` | 保存 utc 值 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联 |
|
||||
| timeConstraints | `object` | `true` | 请参考 [input-time](./input-time#控制输入范围) 里的说明 |
|
||||
| isEndDate | `boolean` | `false` | 如果配置为 true，会自动默认为 23:59:59 秒 |
|
||||
| disabledDate | `string` | | 用字符函数来控制哪些天不可以被点选 |
|
||||
| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0`版本后支持 |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -67,20 +67,21 @@ order: 15
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ----------- | --------- | ------------------ | ---------------------------------------------------------------------------- | ------- |
|
||||
| format | `string` | `X` | [日期选择器值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) |
|
||||
| inputFormat | `string` | `YYYY-DD` | [日期选择器显示格式](./date#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) |
|
||||
| placeholder | `string` | `"请选择月份范围"` | 占位文本 |
|
||||
| minDate | `string` | | 限制最小日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| maxDate | `string` | | 限制最大日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| minDuration | `string` | | 限制最小跨度，如： 2days |
|
||||
| maxDuration | `string` | | 限制最大跨度，如：1year |
|
||||
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
| extraName | `string` | | 是否存成两个字段 | `3.3.0` |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------------------ | --------- | ------------------ | ---------------------------------------------------------------------------- | ------- |
|
||||
| format | `string` | `X` | [日期选择器值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) |
|
||||
| inputFormat | `string` | `YYYY-DD` | [日期选择器显示格式](./date#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) |
|
||||
| placeholder | `string` | `"请选择月份范围"` | 占位文本 |
|
||||
| minDate | `string` | | 限制最小日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| maxDate | `string` | | 限制最大日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| minDuration | `string` | | 限制最小跨度，如： 2days |
|
||||
| maxDuration | `string` | | 限制最大跨度，如：1year |
|
||||
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
| extraName | `string` | | 是否存成两个字段 | `3.3.0` |
|
||||
| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -146,13 +146,14 @@ order: 81
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------- | --------- | -------------- | ----------------------------------------------------------------------------------- | ------- |
|
||||
| value | `string` | | [默认值](./date#%E9%BB%98%E8%AE%A4%E5%80%BC) |
|
||||
| valueFormat | `string` | `X` | 月份选择器值格式，更多格式类型请参考 [moment](http://momentjs.com/) | `3.4.0` |
|
||||
| displayFormat | `string` | `YYYY-MM` | 月份选择器显示格式，即时间戳格式，更多格式类型请参考 [moment](http://momentjs.com/) | `3.4.0` |
|
||||
| placeholder | `string` | `"请选择月份"` | 占位文本 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------------------ | --------- | -------------- | ----------------------------------------------------------------------------------- | ------- |
|
||||
| value | `string` | | [默认值](./date#%E9%BB%98%E8%AE%A4%E5%80%BC) |
|
||||
| valueFormat | `string` | `X` | 月份选择器值格式，更多格式类型请参考 [moment](http://momentjs.com/) | `3.4.0` |
|
||||
| displayFormat | `string` | `YYYY-MM` | 月份选择器显示格式，即时间戳格式，更多格式类型请参考 [moment](http://momentjs.com/) | `3.4.0` |
|
||||
| placeholder | `string` | `"请选择月份"` | 占位文本 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -66,20 +66,21 @@ order: 15
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------- | --------- | ------------------ | ---------------------------------------------------------------------------- | ------- |
|
||||
| valueFormat | `string` | `X` | [日期选择器值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) | `3.4.0` |
|
||||
| displayFormat | `string` | `YYYY-DD` | [日期选择器显示格式](./date#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) | `3.4.0` |
|
||||
| placeholder | `string` | `"请选择季度范围"` | 占位文本 |
|
||||
| minDate | `string` | | 限制最小日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| maxDate | `string` | | 限制最大日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| minDuration | `string` | | 限制最小跨度，如： 2quarter |
|
||||
| maxDuration | `string` | | 限制最大跨度，如：4quarter |
|
||||
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
| extraName | `string` | | 是否存成两个字段 | `3.3.0` |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------------------ | --------- | ------------------ | ---------------------------------------------------------------------------- | ------- |
|
||||
| valueFormat | `string` | `X` | [日期选择器值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) | `3.4.0` |
|
||||
| displayFormat | `string` | `YYYY-DD` | [日期选择器显示格式](./date#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) | `3.4.0` |
|
||||
| placeholder | `string` | `"请选择季度范围"` | 占位文本 |
|
||||
| minDate | `string` | | 限制最小日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| maxDate | `string` | | 限制最大日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| minDuration | `string` | | 限制最小跨度，如： 2quarter |
|
||||
| maxDuration | `string` | | 限制最大跨度，如：4quarter |
|
||||
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
| extraName | `string` | | 是否存成两个字段 | `3.3.0` |
|
||||
| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -88,15 +88,16 @@ order: 15
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------- | --------- | ------------------ | --------------------------------------------------------------------- | ------- |
|
||||
| valueFormat | `string` | `HH:mm` | [时间范围选择器值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) | `3.4.0` |
|
||||
| displayFormat | `string` | `HH:mm` | [时间范围选择器显示格式](./date#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) | `3.4.0` |
|
||||
| placeholder | `string` | `"请选择时间范围"` | 占位文本 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
| extraName | `string` | | 是否存成两个字段 | `3.3.0` |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------------------ | --------- | ------------------ | --------------------------------------------------------------------- | ------- |
|
||||
| valueFormat | `string` | `HH:mm` | [时间范围选择器值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) | `3.4.0` |
|
||||
| displayFormat | `string` | `HH:mm` | [时间范围选择器显示格式](./date#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) | `3.4.0` |
|
||||
| placeholder | `string` | `"请选择时间范围"` | 占位文本 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
| extraName | `string` | | 是否存成两个字段 | `3.3.0` |
|
||||
| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -250,14 +250,15 @@ order: 58
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| --------------- | --------- | -------------- | ----------------------------------------------------------------------------------- | ---------------- |
|
||||
| value | `string` | | [默认值](./date#%E9%BB%98%E8%AE%A4%E5%80%BC) |
|
||||
| valueFormat | `string` | `X` | 时间选择器值格式，更多格式类型请参考 [moment](http://momentjs.com/) | 3.4.0 版本后支持 |
|
||||
| displayFormat | `string` | `HH:mm` | 时间选择器显示格式，即时间戳格式，更多格式类型请参考 [moment](http://momentjs.com/) | 3.4.0 版本后支持 |
|
||||
| placeholder | `string` | `"请选择时间"` | 占位文本 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| timeConstraints | `object` | `true` | |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------------------ | --------- | -------------- | ----------------------------------------------------------------------------------- | ---------------- |
|
||||
| value | `string` | | [默认值](./date#%E9%BB%98%E8%AE%A4%E5%80%BC) |
|
||||
| valueFormat | `string` | `X` | 时间选择器值格式，更多格式类型请参考 [moment](http://momentjs.com/) | 3.4.0 版本后支持 |
|
||||
| displayFormat | `string` | `HH:mm` | 时间选择器显示格式，即时间戳格式，更多格式类型请参考 [moment](http://momentjs.com/) | 3.4.0 版本后支持 |
|
||||
| placeholder | `string` | `"请选择时间"` | 占位文本 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| timeConstraints | `object` | `true` | |
|
||||
| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -67,19 +67,20 @@ order: 15
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------- | --------- | ------------------ | ---------------------------------------------------------------------------- | ------- |
|
||||
| valueFormat | `string` | `X` | [年份选择器值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) | `3.4.0` |
|
||||
| displayFormat | `string` | `YYYY` | [年份选择器显示格式](./date#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) | `3.4.0` |
|
||||
| placeholder | `string` | `"请选择年份范围"` | 占位文本 |
|
||||
| minDate | `string` | | 限制最小日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| maxDate | `string` | | 限制最大日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| minDuration | `string` | | 限制最小跨度，如： 2year |
|
||||
| maxDuration | `string` | | 限制最大跨度，如：4year |
|
||||
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------------------ | --------- | ------------------ | ---------------------------------------------------------------------------- | ------- |
|
||||
| valueFormat | `string` | `X` | [年份选择器值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) | `3.4.0` |
|
||||
| displayFormat | `string` | `YYYY` | [年份选择器显示格式](./date#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) | `3.4.0` |
|
||||
| placeholder | `string` | `"请选择年份范围"` | 占位文本 |
|
||||
| minDate | `string` | | 限制最小日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| maxDate | `string` | | 限制最大日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| minDuration | `string` | | 限制最小跨度，如： 2year |
|
||||
| maxDuration | `string` | | 限制最大跨度，如：4year |
|
||||
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -307,6 +307,7 @@ export interface DateProps extends LocaleProps, ThemeProps {
|
||||
};
|
||||
};
|
||||
popOverContainer?: any;
|
||||
popOverContainerSelector?: string;
|
||||
label?: string | false;
|
||||
borderMode?: 'full' | 'half' | 'none';
|
||||
// 是否为内嵌模式，如果开启就不是 picker 了，直接页面点选。
|
||||
@ -929,6 +930,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||
viewMode,
|
||||
timeConstraints,
|
||||
popOverContainer,
|
||||
popOverContainerSelector,
|
||||
clearable,
|
||||
shortcuts,
|
||||
utc,
|
||||
@ -1130,6 +1132,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||
<Overlay
|
||||
target={this.getTarget}
|
||||
container={popOverContainer || this.getParent}
|
||||
containerSelector={popOverContainerSelector}
|
||||
rootClose={false}
|
||||
placement={overlayPlacement}
|
||||
show
|
||||
|
||||
@ -74,6 +74,7 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps {
|
||||
timeFormat?: string;
|
||||
resetValue?: any;
|
||||
popOverContainer?: any;
|
||||
popOverContainerSelector?: string;
|
||||
dateFormat?: string;
|
||||
embed?: boolean;
|
||||
viewMode?: ViewMode;
|
||||
@ -1982,6 +1983,7 @@ export class DateRangePicker extends React.Component<
|
||||
startPlaceholder,
|
||||
endPlaceholder,
|
||||
popOverContainer,
|
||||
popOverContainerSelector,
|
||||
inputFormat,
|
||||
displayFormat,
|
||||
joinValues,
|
||||
@ -2167,6 +2169,7 @@ export class DateRangePicker extends React.Component<
|
||||
target={() => this.dom.current}
|
||||
onHide={this.close}
|
||||
container={popOverContainer || (() => findDOMNode(this))}
|
||||
containerSelector={popOverContainerSelector}
|
||||
rootClose={false}
|
||||
placement={overlayPlacement}
|
||||
show
|
||||
|
||||
@ -128,6 +128,11 @@ export interface DateControlSchema extends InputDateBaseControlSchema {
|
||||
* 限制最大日期
|
||||
*/
|
||||
maxDate?: string;
|
||||
|
||||
/**
|
||||
* 弹窗容器选择器
|
||||
*/
|
||||
popOverContainerSelector?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -692,6 +697,7 @@ export default class DateControl extends React.PureComponent<
|
||||
? env?.getModalContainer
|
||||
: rest.popOverContainer || env.getModalContainer
|
||||
}
|
||||
popOverContainerSelector={rest.popOverContainerSelector}
|
||||
{...this.state}
|
||||
valueFormat={valueFormat || format}
|
||||
minDateRaw={this.props.minDate}
|
||||
|
||||
@ -122,6 +122,11 @@ export interface DateRangeControlSchema extends FormBaseControlSchema {
|
||||
* (value: moment.Moment, config: {type: 'start' | 'end'; originValue: moment.Moment, timeFormat: string}, props: any, data: any, moment: moment) => moment.Moment;
|
||||
*/
|
||||
transform?: string;
|
||||
|
||||
/**
|
||||
* 弹窗容器选择器
|
||||
*/
|
||||
popOverContainerSelector?: string;
|
||||
}
|
||||
|
||||
export interface DateRangeProps
|
||||
@ -326,6 +331,7 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
|
||||
? env?.getModalContainer
|
||||
: rest.popOverContainer || env.getModalContainer
|
||||
}
|
||||
popOverContainerSelector={rest.popOverContainerSelector}
|
||||
onRef={this.getRef}
|
||||
data={data}
|
||||
valueFormat={valueFormat || format}
|
||||
|
||||
@ -51,6 +51,7 @@ export default class MonthRangeControl extends InputDateRange {
|
||||
? env?.getModalContainer
|
||||
: rest.popOverContainer || env.getModalContainer
|
||||
}
|
||||
popOverContainerSelector={rest.popOverContainerSelector}
|
||||
onRef={this.getRef}
|
||||
data={data}
|
||||
{...rest}
|
||||
|
||||
@ -49,6 +49,7 @@ export default class QuarterRangeControl extends InputDateRange {
|
||||
? env?.getModalContainer
|
||||
: rest.popOverContainer || env.getModalContainer
|
||||
}
|
||||
popOverContainerSelector={rest.popOverContainerSelector}
|
||||
onRef={this.getRef}
|
||||
data={data}
|
||||
{...rest}
|
||||
|
||||
@ -50,6 +50,7 @@ export default class YearRangeControl extends InputDateRange {
|
||||
? env?.getModalContainer
|
||||
: rest.popOverContainer || env.getModalContainer
|
||||
}
|
||||
popOverContainerSelector={rest.popOverContainerSelector}
|
||||
onRef={this.getRef}
|
||||
data={data}
|
||||
{...rest}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user