HarmonyOS 使用TextPickerDialog.show方法onchange的时候修改range的参数怎么让弹窗中的内容也改变?
使用TextPickerDialog.show方法onchange的时候修改range的参数怎么让弹窗中的内容也改变?
比如地址选择器的实现,省份选择后市区列对应的内容需要改变。
demo实现:
interface btnParams {
title: string;
color: string
}
interface resultParams { value: Date; }
interface DatePickerParams {
pattern?: string;
titleBtn?: btnParams;
leftBtn?: btnParams;
rightBtn?: btnParams;
maxDate?: number; // 最大日期时间戳
minDate?: number; // 最小日期时间戳
date?: number; // 当前显示日期时间戳
callback?: (result: resultParams) => void;
}
const fieldMap: Record<string, string> = {
'yyyy': 'year',
'YYYY': 'year',
'MM': 'month',
'dd': 'day',
'DD': 'day',
'HH': 'hour',
'hh': 'hour',
'mm': 'minute',
'ss':'second'
};
export async function SuiDatePicker(options: WosaifuncOptions) {
let pickerParams: DatePickerParams = options.params as DatePickerParams;
console.log('pickerParams',JSON.stringify(pickerParams))
const fields = pickerParams.pattern?.split(/[- :]/).map(part => fieldMap[part]); // 根据 pattern 拆分字段
const maxDate:Date = new Date(pickerParams.maxDate ? pickerParams.maxDate* 1000 : '');
const minDate:Date = new Date(pickerParams.minDate ? pickerParams.minDate*1000 : '1970-1-1');
const selDate:Date = new Date(pickerParams.date ? pickerParams.date*1000 : '');
console.log('selDate',JSON.stringify(selDate))
console.log('fields',JSON.stringify(fields))
let selectedDate: Record<string, string> = {
"year":selDate.getFullYear().toString(),
"month": (selDate.getMonth() + 1).toString(),
"day": selDate.getDate().toString(),
"hour": selDate.getHours().toString(),
"minute": selDate.getMinutes().toString(),
"second": selDate.getSeconds().toString(),
};
let generateRange: Function = (min: number, max: number, current: number): string[]=> {
let range:string[] = [];
for (let i = min; i <= max; i++) {
range.push(i+'');
}
return range;
}
let updateRanges: Function = (field: string, value: string) => {
selectedDate[field] = value;
if (field === 'year') {
ranges.month = generateRange(1, 12, selectedDate.month);
ranges.day = generateRange(1, getDaysInMonth(selectedDate.year, selectedDate.month), selectedDate.day);
} else if (field === 'month') {
ranges.day = generateRange(1, getDaysInMonth(selectedDate.year, selectedDate.month), selectedDate.day);
}
}
let getDaysInMonth: Function = (year: number, month: number): number=>{
return new Date(year, month, 0).getDate();
}
let formatSelectedDate = (selectedDate: Record<string, string>, pattern: string): string=>{
const dateComponents: Record<string, string> = {
'yyyy': selectedDate.year,
'YYYY': selectedDate.year,
'MM': selectedDate.month,
'dd': selectedDate.day,
'DD': selectedDate.day,
'HH': selectedDate.hour,
'hh': selectedDate.hour,
'mm': selectedDate.minute,
'ss':selectedDate.second
};
return pattern.replace(/yyyy|YYYY|MM|dd|DD|HH|hh|mm|ss/g, match => dateComponents[match]);
}
let getRanges = (date: Record<string, string>, minDate: Date, maxDate: Date):Record<string, string[]> => {
return {
"year": generateRange(minDate.getFullYear(), maxDate.getFullYear(), date.year),
"month": generateRange(1, 12, date.month),
"day": generateRange(1, getDaysInMonth(date.year, date.month), date.day),
"hour": generateRange(0, 23, date.hour),
"minute": generateRange(0, 59, date.minute),
"second": generateRange(0, 59, date.second),
};
}
let ranges: Record<string, string[]> = {
"year": generateRange(minDate.getFullYear(), maxDate.getFullYear(), selectedDate.year),
"month": generateRange(1, 12, selectedDate.month),
"day": generateRange(1, 31, selectedDate.day),
"hour": generateRange(0, 23, selectedDate.hour),
"minute": generateRange(0, 59, selectedDate.minute),
"second": generateRange(0, 59, selectedDate.second),
};
console.log('selectedDate',JSON.stringify(selectedDate))
console.log('ranges', JSON.stringify(ranges))
console.log(JSON.stringify(fields?.map((field) => ranges[field].indexOf(selectedDate[field].toString()))))
TextPickerDialog.show({
range: fields?.map((field) => ranges[field]) || [],
selected: fields?.map((field) => ranges[field].indexOf(selectedDate[field].toString())) || [],
canLoop: false,
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: 0 },
disappearTextStyle: { color: $r("app.color.color_N7"), font: { size: 15, weight: FontWeight.Lighter } },
textStyle: { color: $r("app.color.color_N7"), font: { size: 15, weight: FontWeight.Normal } },
selectedTextStyle: { color: $r("app.color.color_B"), font: { size: 18, weight: FontWeight.Bolder } },
acceptButtonStyle: {
fontColor: pickerParams.rightBtn?.color || $r("app.color.color_W"),
fontSize: '16fp',
backgroundColor: $r("app.color.color_Switch_Select")
},
cancelButtonStyle: {
fontColor: pickerParams.leftBtn?.color|| $r("app.color.color_B"),
fontSize: '16fp',
backgroundColor: $r("app.color.color_N4")
},
onAccept: (value: TextPickerResult) => {
console.log(JSON.stringify(value))
if(typeof value.value == 'string'){
}else{
value.value.forEach((item,index)=>{
selectedDate[fields?.[index.toString()]] = item;
updateRanges(fields?.[index.toString()], item);
})
}
console.log('selectedDate:', JSON.stringify(selectedDate),formatSelectedDate(selectedDate, pickerParams.pattern))
options.callback && options.callback(new Date(formatSelectedDate(selectedDate, pickerParams.pattern)).getTime()/1000)
},
onChange: (value:TextPickerResult)=>{
fields?.forEach((field, index) => {
updateRanges(field, value.value[index]);
});
ranges = getRanges(selectedDate, minDate, maxDate);
}
});
}
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
HarmonyOS 多层级的变量改变怎么同步修改到UI中
238浏览 • 1回复 待解决
HarmonyOS 使用promptAction.updateCustomDialog怎么更新弹窗的内容?
498浏览 • 1回复 待解决
HarmonyOS popToIndex多级的时候,怎么传参数
149浏览 • 1回复 待解决
AlertDialog.show创建的弹窗,如何主动消失
2595浏览 • 1回复 待解决
HarmonyOS 怎么让按钮禁用态不改变背景图的颜色?
513浏览 • 1回复 待解决
鸿蒙webview中怎么注入JS方法让网页中的JS调用
8934浏览 • 1回复 待解决
HarmonyOS CustomDialog怎么把弹窗封装到某个类的方法中
101浏览 • 1回复 待解决
HarmonyOS Radio的onChange方法只会触法一次
102浏览 • 1回复 待解决
HarmonyOS ComposeListItem使用switch监听onChange方法变化异常
132浏览 • 1回复 待解决
HarmonyOS 怎么修改自定义弹窗的默认动画?
475浏览 • 1回复 待解决
如何修改Web的userAgent参数?
360浏览 • 1回复 待解决
HarmonyOS List内容不足的时候设置什么属性可以让其item内容填充满屏幕高度
116浏览 • 1回复 待解决
HarmonyOS 有没有什么办法让侧滑的时候不关闭customdialog弹窗
152浏览 • 1回复 待解决
HarmonyOS 如何用动画实现Canvas内容的改变
184浏览 • 1回复 待解决
在用户点击组件a,a的onClick()方法被触发的时候组件b的onClick()方法也被触发,这个HarmonyOS能做到吗?
545浏览 • 1回复 待解决
HarmonyOS 使用全局自定义弹窗的时候,toast失效
111浏览 • 1回复 待解决
同意取消的弹窗怎么实现?用哪个方法
4921浏览 • 1回复 待解决
请问js input组件中的search、share方法怎么使用的?
2216浏览 • 1回复 待解决
HarmonyOS config可以设置header的Range吗?
154浏览 • 1回复 待解决
如何理解自定义弹窗中的gridCount参数
2451浏览 • 1回复 待解决
写文件的时候怎么设置把之前的内容清空之后在写
1892浏览 • 1回复 待解决
HarmonyOS NavDestination的onShown方法中修改导航栏颜色无效
145浏览 • 1回复 待解决
HarmonyOS 函数方法 多个参数的时候 如何可以选择性传参
94浏览 • 1回复 待解决
HarmonyOS 使用bindSheet半模态弹窗,如何修改弹窗圆角
52浏览 • 1回复 待解决
写了一个demo,修改demo里面的fruits,即可让弹窗中的内容也改变,demo如下: