test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:58:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: 增加日期时间范围组件的自定义快捷键 (#3711)

Browse Source 
Co-authored-by: ”jiatianqi“ <”jiatianqi@baidu.com“>
Co-authored-by: liaoxuezhi <2betop.cn@gmail.com>
This commit is contained in:
Ma ke 2022-03-08 10:20:57 +08:00 committed by GitHub
parent 53bafe159a
commit bf8379026e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 281 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
docs/zh-CN/components/form/input-date-range.md
View File

@ -37,12 +37,44 @@ order: 15
"type": "input-date-range",
"name": "select",
"label": "日期范围",
"ranges": "yesterday,1dayago,7daysago"
"ranges": [
"7daysago",
"15dayslater",
"2weeksago",
"1weekslater",
"thismonth",
"2monthsago",
"3monthslater"
]
}
]
}
```
支持的快捷键有
- `today`: 今天
- `yesterday`: 昨天
- `tomorrow`: 明天
- `prevweek`: 上周
- `thisweek`: 这个周
- `thismonth`: 本月
- `prevmonth`: 上个月
- `prevquarter`: 上个季度
- `thisquarter`: 这个季度
- `thisyear`: 今年
- `lastYear`: 去年
- `{n}daysago` : 最近 n 天，例如：`7daysago`，下面用法相同
- `{n}dayslater`: n 天以内
- `{n}weeksago`: 最近 n 周
- `{n}weekslater`: n 周以内
- `{n}monthsago`: 最近 n 月
- `{n}monthslater`: n 月以内
- `{n}quartersago`: 最近 n 季度
- `{n}quarterslater`: n 季度以内
- `{n}yearsago`: 最近 n 年
- `{n}yearslater`: n 年以内
## 内嵌模式
```schema: scope="body"
@ -65,16 +97,16 @@ 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-MM` | [日期选择器显示格式](./date#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) |
| placeholder | `string` | `"请选择日期范围"` | 占位文本 |
| ranges | `Array<string> 或 string` | `"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter"` | 日期范围快捷键，可选：today, yesterday, 1dayago, 7daysago, 30daysago, 90daysago, prevweek, thismonth, thisquarter, prevmonth, prevquarter |
| 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` | 是否内联模式 |
| 属性名 | 类型 | 默认值 | 说明 |
| ----------- | ------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| format | `string` | `X` | [日期选择器值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) |
| inputFormat | `string` | `YYYY-DD-MM` | [日期选择器显示格式](./date#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) |
| placeholder | `string` | `"请选择日期范围"` | 占位文本 |
| ranges | `Array<string> 或 string` | `"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter"` | 日期范围快捷键 |
| 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` | 是否内联模式 |

20
docs/zh-CN/components/form/input-datetime-range.md
View File

@ -66,13 +66,13 @@ order: 16
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
| 属性名 | 类型 | 默认值 | 说明 |
| ----------- | ------------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| format | `string` | `X` | [日期时间选择器值格式](./datetime#%E5%80%BC%E6%A0%BC%E5%BC%8F) |
| inputFormat | `string` | `YYYY-DD-MM` | [日期时间选择器显示格式](./datetime#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) |
| placeholder | `string` | `"请选择日期范围"` | 占位文本 |
| ranges | `Array<string> 或 string` | `"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter"` | 日期范围快捷键，可选：today, yesterday, 1dayago, 7daysago, 30daysago, 90daysago, prevweek, thismonth, thisquarter, prevmonth, prevquarter |
| minDate | `string` | | 限制最小日期时间，用法同 [限制范围](./datetime#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
| maxDate | `string` | | 限制最大日期时间，用法同 [限制范围](./datetime#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
| utc | `boolean` | `false` | [保存 UTC 值](./datetime#utc) |
| clearable | `boolean` | `true` | 是否可清除 |
| 属性名 | 类型 | 默认值 | 说明 |
| ----------- | ------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
| format | `string` | `X` | [日期时间选择器值格式](./datetime#%E5%80%BC%E6%A0%BC%E5%BC%8F) |
| inputFormat | `string` | `YYYY-DD-MM` | [日期时间选择器显示格式](./datetime#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) |
| placeholder | `string` | `"请选择日期范围"` | 占位文本 |
| ranges | `Array<string> 或 string` | `"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter"` | 日期范围快捷键 |
| minDate | `string` | | 限制最小日期时间，用法同 [限制范围](./datetime#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
| maxDate | `string` | | 限制最大日期时间，用法同 [限制范围](./datetime#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
| utc | `boolean` | `false` | [保存 UTC 值](./datetime#utc) |
| clearable | `boolean` | `true` | 是否可清除 |

195
src/components/DateRangePicker.tsx
View File

@ -82,13 +82,13 @@ export const availableRanges: {[propName: string]: any} = {
}
},
'1dayago': {
label: 'DateRange.1dayago',
'tomorrow': {
label: 'Date.tomorrow',
startDate: (now: moment.Moment) => {
return now.add(-1, 'days');
return now.add(1, 'days').startOf('day');
},
endDate: (now: moment.Moment) => {
return now;
return now.add(1, 'days').endOf('day');
}
},
@ -214,6 +214,177 @@ export const availableRanges: {[propName: string]: any} = {
}
};
export const advancedRanges = [
{
regexp: /^(\d+)hoursago$/,
resolve: (__: any, _: string, hours: string) => {
return {
label: __('DateRange.hoursago', {hours}),
startDate: (now: moment.Moment) => {
return now.add(-hours, 'hours').startOf('hour');
},
endDate: (now: moment.Moment) => {
return now.add(-1, 'hours').endOf('hours');
}
};
}
},
{
regexp: /^(\d+)hourslater$/,
resolve: (__: any, _: string, hours: string) => {
return {
label: __('DateRange.hourslater', {hours}),
startDate: (now: moment.Moment) => {
return now.startOf('hour');
},
endDate: (now: moment.Moment) => {
return now.add(hours, 'hours').endOf('hour');
}
};
}
},
{
regexp: /^(\d+)daysago$/,
resolve: (__: any, _: string, days: string) => {
return {
label: __('DateRange.daysago', {days}),
startDate: (now: moment.Moment) => {
return now.add(-days, 'days').startOf('day');
},
endDate: (now: moment.Moment) => {
return now.add(-1, 'days').endOf('day');
}
};
}
},
{
regexp: /^(\d+)dayslater$/,
resolve: (__: any, _: string, days: string) => {
return {
label: __('DateRange.dayslater', {days}),
startDate: (now: moment.Moment) => {
return now.startOf('day');
},
endDate: (now: moment.Moment) => {
return now.add(days, 'days').endOf('day');
}
};
}
},
{
regexp: /^(\d+)weeksago$/,
resolve: (__: any, _: string, weeks: string) => {
return {
label: __('DateRange.weeksago', {weeks}),
startDate: (now: moment.Moment) => {
return now.startOf('week').add(-weeks, 'weeks');
},
endDate: (now: moment.Moment) => {
return now.startOf('week').add(-1, 'days').endOf('day');
}
};
}
},
{
regexp: /^(\d+)weekslater$/,
resolve: (__: any, _: string, weeks: string) => {
return {
label: __('DateRange.weekslater', {weeks}),
startDate: (now: moment.Moment) => {
return now.startOf('week');
},
endDate: (now: moment.Moment) => {
return now.startOf('week').add(weeks, 'weeks').endOf('day');
}
};
}
},
{
regexp: /^(\d+)monthsago$/,
resolve: (__: any, _: string, months: string) => {
return {
label: __('DateRange.monthsago', {months}),
startDate: (now: moment.Moment) => {
return now.startOf('months').add(-months, 'months');
},
endDate: (now: moment.Moment) => {
return now.startOf('month').add(-1, 'days').endOf('day');
}
};
}
},
{
regexp: /^(\d+)monthslater$/,
resolve: (__: any, _: string, months: string) => {
return {
label: __('DateRange.monthslater', {months}),
startDate: (now: moment.Moment) => {
return now.startOf('month');
},
endDate: (now: moment.Moment) => {
return now.startOf('month').add(months, 'months').endOf('day');
}
};
}
},
{
regexp: /^(\d+)quartersago$/,
resolve: (__: any, _: string, quarters: string) => {
return {
label: __('DateRange.quartersago', {quarters}),
startDate: (now: moment.Moment) => {
return now.startOf('quarters').add(-quarters, 'quarters');
},
endDate: (now: moment.Moment) => {
return now.startOf('quarter').add(-1, 'days').endOf('day');
}
};
}
},
{
regexp: /^(\d+)quarterslater$/,
resolve: (__: any, _: string, quarters: string) => {
return {
label: __('DateRange.quarterslater', {quarters}),
startDate: (now: moment.Moment) => {
return now.startOf('quarter');
},
endDate: (now: moment.Moment) => {
return now.startOf('quarter').add(quarters, 'quarters').endOf('day');
}
};
}
},
{
regexp: /^(\d+)yearsago$/,
resolve: (__: any, _: string, years: string) => {
return {
label: __('DateRange.yearsago', {years}),
startDate: (now: moment.Moment) => {
return now.startOf('years').add(-years, 'years');
},
endDate: (now: moment.Moment) => {
return now.startOf('year').add(-1, 'days').endOf('day');
}
};
}
},
{
regexp: /^(\d+)yearslater$/,
resolve: (__: any, _: string, years: string) => {
return {
label: __('DateRange.yearslater', {years}),
startDate: (now: moment.Moment) => {
return now.startOf('year');
},
endDate: (now: moment.Moment) => {
return now.startOf('year').add(years, 'years').endOf('day');
}
};
}
}
];
export class DateRangePicker extends React.Component<
DateRangePickerProps,
DateRangePickerState
@ -539,8 +710,20 @@ export class DateRangePicker extends React.Component<
}
let range: PlainObject = {};
if (typeof item === 'string') {
range = availableRanges[item];
range.key = item;
if (availableRanges[item]) {
range = availableRanges[item];
range.key = item;
} else {
// 通过正则尝试匹配
for (let i = 0, len = advancedRanges.length; i < len; i++) {
let value = advancedRanges[i];
const m = value.regexp.exec(item);
if (m) {
range = value.resolve.apply(item, [__, ...m]);
range.key = item;
}
}
}
} else if (
(item as ShortCutDateRange).startDate &&
(item as ShortCutDateRange).endDate

12
src/locale/de-DE.ts
View File

@ -75,6 +75,18 @@ register('de-DE', {
'Date.weekslater': '{{weeks}} Wochen später',
'Date.yesterday': 'Gestern',
'dateformat.year': 'YYYY',
'DateRange.daysago': 'letzten {{days}} Tage',
'DateRange.dayslater': 'innerhalb von {{days}} Tagen',
'DateRange.weeksago': 'letzten {{weeks}} Wochen',
'DateRange.weekslater': 'innerhalb von {{weeks}} Wochen',
'DateRange.monthsago': 'letzten {{months}} Monate',
'DateRange.monthslater': 'innerhalb von {{months}} Monaten',
'DateRange.quartersago': 'letzten {{quarters}} Quartale',
'DateRange.quarterslater': 'innerhalb von {{quarters}} Quartalen',
'DateRange.yearsago': 'letzten {{years}} Jahre',
'DateRange.yearslater': '{{years}} Jahren',
'DateRange.hoursago': 'letzten {{hours}} Stunden',
'DateRange.hourslater': 'innerhalb von {{hours}} Stunden',
'DateRange.1dayago': 'Vor 1 Tag',
'DateRange.1daysago': 'Vor 1 Tag',
'DateRange.7daysago': 'Vor 7 Tagen',

12
src/locale/en-US.ts
View File

@ -72,6 +72,18 @@ register('en-US', {
'Date.weekslater': '{{weeks}} week(s) later',
'Date.yesterday': 'Yesterday',
'dateformat.year': 'YYYY',
'DateRange.daysago': 'Last {{days}} day(s)',
'DateRange.dayslater': 'Within {{days}} day(s)',
'DateRange.weeksago': 'Last {{weeks}} week(s)',
'DateRange.weekslater': 'Within {{weeks}} week(s)',
'DateRange.monthsago': 'Last {{months}} month(s)',
'DateRange.monthslater': 'Within {{months}} month(s)',
'DateRange.quartersago': 'Last {{quarters}} quarter(s)',
'DateRange.quarterslater': 'Within {{quarters}} quarter(s)',
'DateRange.yearsago': 'Last {{years}} year(s)',
'DateRange.yearslater': 'Within {{years}} year(s)',
'DateRange.hoursago': 'Last {{hours}} hour(s)',
'DateRange.hourslater': 'Within {{hours}} hour(s)',
'DateRange.1dayago': '1 day ago',
'DateRange.1daysago': '1 day ago',
'DateRange.7daysago': '7 days ago',

12
src/locale/zh-CN.ts
View File

@ -75,6 +75,18 @@ register('zh-CN', {
'Date.weekslater': '{{weeks}}周后',
'Date.yesterday': '昨天',
'dateformat.year': 'YYYY年',
'DateRange.daysago': '最近{{days}}天',
'DateRange.dayslater': '{{days}}天以内',
'DateRange.weeksago': '最近{{weeks}}周',
'DateRange.weekslater': '{{weeks}}周以内',
'DateRange.monthsago': '最近{{months}}月',
'DateRange.monthslater': '{{months}}月以内',
'DateRange.quartersago': '最近{{quarters}}季度',
'DateRange.quarterslater': '{{quarters}}季度以内',
'DateRange.yearsago': '最近{{years}}年',
'DateRange.yearslater': '{{years}}年以内',
'DateRange.hoursago': '最近{{hours}}小时',
'DateRange.hourslater': '{{hours}}小时以内',
'DateRange.1daysago': '最近1天',
'DateRange.1dayago': '最近1天',
'DateRange.7daysago': '最近7天',