mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:39:05 +08:00
date & date-range 支持 embed 内联模式
This commit is contained in:
liaoxuezhi
parent
3792124138
commit
c282dc6f55
@ -24,6 +24,24 @@ order: 15
|
||||
}
|
||||
```
|
||||
|
||||
## 内嵌模式
|
||||
|
||||
```schema:height="600" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
{
|
||||
"type": "date-range",
|
||||
"name": "date",
|
||||
"label": "日期范围",
|
||||
"embed": true
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
@ -38,3 +56,4 @@ order: 15
|
||||
| maxDate | `string` | | 限制最大日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
|
||||
@ -289,6 +289,28 @@ order: 13
|
||||
}
|
||||
```
|
||||
|
||||
## 内嵌模式
|
||||
|
||||
```schema:height="600" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
||||
"controls": [
|
||||
{
|
||||
"type": "static-date",
|
||||
"name": "date",
|
||||
"label": "当前值"
|
||||
},
|
||||
{
|
||||
"type": "date",
|
||||
"name": "date",
|
||||
"label": "日期",
|
||||
"embed": true
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
@ -305,4 +327,5 @@ order: 13
|
||||
| maxDate | `string` | | 限制最大日期 |
|
||||
| utc | `boolean` | `false` | 保存 utc 值 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| timeConstrainst | `object` | `true` | 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime) |
|
||||
|
||||
@ -274,6 +274,29 @@ order: 14
|
||||
}
|
||||
```
|
||||
|
||||
## 内嵌模式
|
||||
|
||||
```schema:height="600" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
||||
"controls": [
|
||||
{
|
||||
"type": "static-date",
|
||||
"name": "date",
|
||||
"format": "LLL",
|
||||
"label": "当前值"
|
||||
},
|
||||
{
|
||||
"type": "datetime",
|
||||
"name": "date",
|
||||
"label": "日期时间",
|
||||
"embed": true
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
@ -289,4 +312,5 @@ order: 14
|
||||
| maxDate | `string` | | 限制最大日期时间 |
|
||||
| utc | `boolean` | `false` | 保存 utc 值 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联 |
|
||||
| timeConstrainst | `object` | `true` | 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime) |
|
||||
|
||||
@ -132,4 +132,11 @@
|
||||
margin-top: 0;
|
||||
margin-left: $gap-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}DateRangeCalendar {
|
||||
display: inline-block;
|
||||
border: $DatePicker-borderWidth solid $DatePicker-borderColor;
|
||||
background-color: $DatePicker-bg;
|
||||
border-radius: $DatePicker-borderRadius;
|
||||
}
|
||||
@ -370,3 +370,10 @@ td.rdtYear {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}DateCalendar {
|
||||
display: inline-block;
|
||||
border: $DatePicker-borderWidth solid $DatePicker-borderColor;
|
||||
background-color: $DatePicker-bg;
|
||||
border-radius: $DatePicker-borderRadius;
|
||||
}
|
||||
|
||||
@ -251,6 +251,9 @@ export interface DateProps extends LocaleProps, ThemeProps {
|
||||
timeConstraints?: any;
|
||||
popOverContainer?: any;
|
||||
|
||||
// 是否为内嵌模式，如果开启就不是 picker 了，直接页面点选。
|
||||
embed?: boolean;
|
||||
|
||||
// 下面那个千万不要写，写了就会导致 keyof DateProps 得到的结果是 string | number;
|
||||
// [propName: string]: any;
|
||||
}
|
||||
@ -510,13 +513,43 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||
utc,
|
||||
overlayPlacement,
|
||||
locale,
|
||||
format
|
||||
format,
|
||||
embed
|
||||
} = this.props;
|
||||
|
||||
const __ = this.props.translate;
|
||||
const isOpened = this.state.isOpened;
|
||||
let date: moment.Moment | undefined = this.state.value;
|
||||
|
||||
if (embed) {
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
`${ns}DateCalendar`,
|
||||
{
|
||||
'is-disabled': disabled
|
||||
},
|
||||
className
|
||||
)}
|
||||
>
|
||||
<Calendar
|
||||
value={date}
|
||||
onChange={this.handleChange}
|
||||
requiredConfirm={false}
|
||||
dateFormat={dateFormat}
|
||||
timeFormat={timeFormat}
|
||||
isValidDate={this.checkIsValidDate}
|
||||
viewMode={viewMode}
|
||||
timeConstraints={timeConstraints}
|
||||
input={false}
|
||||
onClose={this.close}
|
||||
locale={locale}
|
||||
// utc={utc}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
tabIndex={0}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -31,6 +31,11 @@ export interface DateBaseControlSchema extends FormBaseControl {
|
||||
* 设定是否存储 utc 时间。
|
||||
*/
|
||||
utc?: boolean;
|
||||
|
||||
/**
|
||||
* 是否为内联模式？
|
||||
*/
|
||||
emebed?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -53,6 +53,11 @@ export interface DateRangeControlSchema extends FormBaseControl {
|
||||
* 这里面 value 需要特殊说明一下，因为支持相对值。* `-2mins` 2分钟前\n * `+2days` 2天后\n* `-10week` 十周前\n可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。
|
||||
*/
|
||||
value?: any;
|
||||
|
||||
/**
|
||||
* 开启后变成非弹出模式，即内联模式。
|
||||
*/
|
||||
embed?: boolean;
|
||||
}
|
||||
|
||||
export interface DateRangeProps
|
||||
|
||||
Loading…
Reference in New Issue
Block a user