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

feat: 移动端日期选择器显示年月日单位 & 月份选择器显示年月日单位

Browse Source
This commit is contained in:
zhangxulong 2023-11-06 18:50:51 +08:00 committed by 2betop
parent ac4e748c9c
commit 07758e6b14
2 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/amis-ui/src/components/calendar/DaysView.tsx
View File

@ -222,7 +222,7 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
const dateBoundary = this.props.getDateBoundary(currentDate);
const columns = this.props.getColumns(types, dateBoundary);
this.state = {
columns,
columns: this.getColumnsWithUnit(columns),
types,
pickerValue: currentDate.toArray(),
uniqueTag: new Date().valueOf()
@ -260,6 +260,19 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
});
}
getColumnsWithUnit(columns: {options: PickerOption[]}[]) {
return this.props.locale === 'zh-CN' && columns.length === 3
? columns.map((item, index) => {
item.options?.map((option: any) => {
option.text =
option.text + (index === 0 ? '年' : index === 1 ? '月' : '日');
return option;
});
return item;
})
: columns;
}
updateSelectedDate = (event: React.MouseEvent<any>) => {
// need confirm
if (this.props.requiredConfirm) {
@ -748,7 +761,9 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
);
const dateBoundary = this.props.getDateBoundary(selectDate);
this.setState({
columns: this.props.getColumns(this.state.types, dateBoundary),
columns: this.getColumnsWithUnit(
this.props.getColumns(this.state.types, dateBoundary)
),
pickerValue: value
});
}

19
packages/amis-ui/src/components/calendar/MonthsView.tsx
View File

@ -70,7 +70,7 @@ export class CustomMonthsView extends React.Component<CustomMonthsViewProps> {
const dateBoundary = this.props.getDateBoundary(currentDate);
const columns = this.props.getColumns(['year', 'month'], dateBoundary);
this.state = {
columns,
columns: this.getColumnsWithUnit(columns),
pickerValue: currentDate.toArray()
};
@ -148,6 +148,18 @@ export class CustomMonthsView extends React.Component<CustomMonthsViewProps> {
this.props.updateSelectedDate(event);
}
getColumnsWithUnit(columns: {options: PickerOption[]}[]) {
return this.props.locale === 'zh-CN' && columns.length === 2
? columns.map((item, index) => {
item.options?.map((option: any) => {
option.text = option.text + (index === 0 ? '年' : '月');
return option;
});
return item;
})
: columns;
}
renderMonth = (
props: any,
month: number,
@ -212,7 +224,10 @@ export class CustomMonthsView extends React.Component<CustomMonthsViewProps> {
};
})
};
this.setState({columns, pickerValue: value});
this.setState({
columns: this.getColumnsWithUnit(columns),
pickerValue: value
});
}
};