|
|
@@ -1,5 +1,5 @@
|
|
|
import { YTHeader } from "../components/generalComp/YTHeader";
|
|
|
-import { YTDateUtil } from "../utils/YTDateUtil";
|
|
|
+import { YTDateUtil } from "../utils/arkts/utils/YTDateUtil";
|
|
|
import { ResultType, UnitType } from "./DatePickerEnums";
|
|
|
import { QNUIFloatingContainer } from "./YTUIFloatingContainer"
|
|
|
import { WheelPicker } from "./WheelPicker";
|
|
|
@@ -14,113 +14,115 @@ export struct YTUIDatePickerComponent {
|
|
|
@Prop @Require maxDate: Date; // 最大可选日期,默认10年后
|
|
|
@Prop @Require unitType: UnitType; // 单位类型,默认为年月日
|
|
|
@State isVisible: string = '100%'; // 是否显示选择器
|
|
|
+ title: string = '选择日期'
|
|
|
+ @Prop headerBuilder: DatePickerHeaderGlobalBuilder
|
|
|
+ @Prop highlightBackgroundColor: ResourceColor
|
|
|
+ @Prop highlightBorderColor: ResourceColor
|
|
|
+ @Prop selectedTextStyle: PickerTextStyle
|
|
|
+ @Prop textStyle: PickerTextStyle
|
|
|
// 回调函数
|
|
|
confirm: (date: Date) => void = () => {
|
|
|
};
|
|
|
close: () => void = () => {
|
|
|
};
|
|
|
- title:string = '选择日期'
|
|
|
- @Prop headerBuilder:DatePickerHeaderGlobalBuilder
|
|
|
- @Prop highlightBackgroundColor:ResourceColor
|
|
|
- @Prop highlightBorderColor:ResourceColor
|
|
|
- @Prop selectedTextStyle:PickerTextStyle
|
|
|
- @Prop textStyle:PickerTextStyle
|
|
|
|
|
|
aboutToAppear(): void {
|
|
|
this.dateLocal = this.date;
|
|
|
- console.log('aboutToAppear',YTDateUtil.formatDate(this.dateLocal))
|
|
|
- }
|
|
|
-
|
|
|
- // 确认选择
|
|
|
- private onConfirm(): void {
|
|
|
- this.confirm?.( this.dateLocal);
|
|
|
- this.isVisible = '100%'
|
|
|
- this.close?.()
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // 取消选择
|
|
|
- private onCancel(): void {
|
|
|
- // this.confirm(ResultType.CANCEL, this.dateLocal);
|
|
|
- this.isVisible = '100%'
|
|
|
- this.close?.()
|
|
|
+ console.log('aboutToAppear', YTDateUtil.formatDate(this.dateLocal))
|
|
|
}
|
|
|
|
|
|
build() {
|
|
|
Column() {
|
|
|
- Column() {
|
|
|
- //标题
|
|
|
- Column({space:12}){
|
|
|
- YTHeader({
|
|
|
- defaultStyle:{
|
|
|
- backArrow:true,
|
|
|
- title:this.title,
|
|
|
- },
|
|
|
- headerHeight: 44,
|
|
|
- headerPadding:0,
|
|
|
- rightComp:()=>{
|
|
|
- this.headerRightBuilder()
|
|
|
- },
|
|
|
- leftComp:()=>{
|
|
|
- this.headerLeftBuilder()
|
|
|
- }
|
|
|
- })
|
|
|
- Divider()
|
|
|
- .strokeWidth(1)
|
|
|
- .color('#DFDFDF')
|
|
|
- }
|
|
|
- .width('100%')
|
|
|
- .padding({top:10,bottom:10})
|
|
|
-
|
|
|
- WheelPicker({
|
|
|
- date: this.date,
|
|
|
- minDate: this.minDate,
|
|
|
- maxDate: this.maxDate,
|
|
|
- unitType: this.unitType,
|
|
|
- highlightBackgroundColor:this.highlightBackgroundColor,
|
|
|
- highlightBorderColor:this.highlightBorderColor,
|
|
|
- textStyle:this.textStyle,
|
|
|
- selectedTextStyle:this.selectedTextStyle,
|
|
|
- upDate: (date: Date) => {
|
|
|
- this.dateLocal = date
|
|
|
+ Column() {
|
|
|
+ //标题
|
|
|
+ Column({ space: 12 }) {
|
|
|
+ YTHeader({
|
|
|
+ defaultStyle: {
|
|
|
+ backArrow: true,
|
|
|
+ title: this.title,
|
|
|
+ },
|
|
|
+ headerHeight: 44,
|
|
|
+ headerPadding: 0,
|
|
|
+ rightComp: () => {
|
|
|
+ this.headerRightBuilder()
|
|
|
+ },
|
|
|
+ leftComp: () => {
|
|
|
+ this.headerLeftBuilder()
|
|
|
}
|
|
|
})
|
|
|
+ Divider()
|
|
|
+ .strokeWidth(1)
|
|
|
+ .color('#DFDFDF')
|
|
|
}
|
|
|
- .backgroundColor(Color.White)
|
|
|
.width('100%')
|
|
|
- .borderRadius({ topLeft: 14, topRight: 14 })
|
|
|
- .constraintSize({minHeight:300,maxHeight:320})
|
|
|
- .padding({left:20,right:20})
|
|
|
+ .padding({ top: 10, bottom: 10 })
|
|
|
+
|
|
|
+ WheelPicker({
|
|
|
+ date: this.date,
|
|
|
+ minDate: this.minDate,
|
|
|
+ maxDate: this.maxDate,
|
|
|
+ unitType: this.unitType,
|
|
|
+ highlightBackgroundColor: this.highlightBackgroundColor,
|
|
|
+ highlightBorderColor: this.highlightBorderColor,
|
|
|
+ textStyle: this.textStyle,
|
|
|
+ selectedTextStyle: this.selectedTextStyle,
|
|
|
+ upDate: (date: Date) => {
|
|
|
+ this.dateLocal = date
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ .backgroundColor(Color.White)
|
|
|
+ .width('100%')
|
|
|
+ .borderRadius({ topLeft: 14, topRight: 14 })
|
|
|
+ .constraintSize({ minHeight: 300, maxHeight: 320 })
|
|
|
+ .padding({ left: 20, right: 20 })
|
|
|
}
|
|
|
.width('100%')
|
|
|
.backgroundColor(Color.White)
|
|
|
// .onAppear(() => {
|
|
|
// this.isVisible = '0'
|
|
|
// })
|
|
|
- .borderRadius({topLeft:24,topRight:24})
|
|
|
+ .borderRadius({ topLeft: 24, topRight: 24 })
|
|
|
+
|
|
|
// .translate({ y: this.isVisible })
|
|
|
// .animation({ duration: 200 })
|
|
|
|
|
|
}
|
|
|
+
|
|
|
@Builder
|
|
|
- headerRightBuilder(){
|
|
|
- Column(){
|
|
|
+ headerRightBuilder() {
|
|
|
+ Column() {
|
|
|
this.headerBuilder.headerRightBuilder.builder()
|
|
|
}
|
|
|
- .onClick(()=>{
|
|
|
+ .onClick(() => {
|
|
|
this.onConfirm()
|
|
|
})
|
|
|
}
|
|
|
|
|
|
@Builder
|
|
|
- headerLeftBuilder(){
|
|
|
- Column(){
|
|
|
+ headerLeftBuilder() {
|
|
|
+ Column() {
|
|
|
this.headerBuilder.headerLeftBuilder.builder()
|
|
|
}
|
|
|
- .onClick(()=>{
|
|
|
+ .onClick(() => {
|
|
|
this.onCancel()
|
|
|
})
|
|
|
}
|
|
|
+
|
|
|
+ // 确认选择
|
|
|
+ private onConfirm(): void {
|
|
|
+ this.confirm?.( this.dateLocal);
|
|
|
+ this.isVisible = '100%'
|
|
|
+ this.close?.()
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 取消选择
|
|
|
+ private onCancel(): void {
|
|
|
+ // this.confirm(ResultType.CANCEL, this.dateLocal);
|
|
|
+ this.isVisible = '100%'
|
|
|
+ this.close?.()
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
export class DateOption {
|
|
|
@@ -148,50 +150,45 @@ export class DateOption {
|
|
|
* 确认选择回调
|
|
|
*/
|
|
|
confirm?: (date: Date) => void;
|
|
|
-
|
|
|
/**
|
|
|
* 头部左侧按钮
|
|
|
*/
|
|
|
- headerLeftBuilder?:WrappedBuilder<[]>
|
|
|
+ headerLeftBuilder?: WrappedBuilder<[]>
|
|
|
/**
|
|
|
* 头部右侧按钮
|
|
|
*/
|
|
|
- headerRightBuilder?:WrappedBuilder<[]>
|
|
|
+ headerRightBuilder?: WrappedBuilder<[]>
|
|
|
/**
|
|
|
* 标题
|
|
|
*/
|
|
|
- title?:string
|
|
|
+ title?: string
|
|
|
/**
|
|
|
* 高亮背景色
|
|
|
*/
|
|
|
- highlightBackgroundColor?:ResourceColor
|
|
|
-
|
|
|
+ highlightBackgroundColor?: ResourceColor
|
|
|
/**
|
|
|
* 高亮边框颜色
|
|
|
*/
|
|
|
- highlightBorderColor?:ResourceColor
|
|
|
-
|
|
|
+ highlightBorderColor?: ResourceColor
|
|
|
/**
|
|
|
* 选中的字体样式
|
|
|
*/
|
|
|
- selectedTextStyle?:PickerTextStyle
|
|
|
-
|
|
|
-
|
|
|
+ selectedTextStyle?: PickerTextStyle
|
|
|
/**
|
|
|
* 非选中的字体样式
|
|
|
*/
|
|
|
- textStyle?:PickerTextStyle
|
|
|
+ textStyle?: PickerTextStyle
|
|
|
}
|
|
|
|
|
|
@Builder
|
|
|
-function headerLeftBuilder(){
|
|
|
+function headerLeftBuilder() {
|
|
|
Image($r('app.media.ic_back'))
|
|
|
.width(24)
|
|
|
.margin({ left: 16 })
|
|
|
}
|
|
|
|
|
|
@Builder
|
|
|
-function headerRightBuilder(){
|
|
|
+function headerRightBuilder() {
|
|
|
Image($r("app.media.slice_sure"))
|
|
|
.width(24)
|
|
|
}
|
|
|
@@ -201,28 +198,28 @@ function headerRightBuilder(){
|
|
|
export class YTDatePickerOptions extends DateOption {
|
|
|
@Trace
|
|
|
isEnd?: boolean = false
|
|
|
+ headerBuilder?: DatePickerHeaderGlobalBuilder
|
|
|
cancel?: () => void = () => {
|
|
|
}
|
|
|
- headerBuilder?:DatePickerHeaderGlobalBuilder
|
|
|
}
|
|
|
|
|
|
// 组件包装器
|
|
|
@Builder
|
|
|
export function YTDatePickerViewBuilder(param: YTDatePickerOptions) {
|
|
|
- Column(){
|
|
|
+ Column() {
|
|
|
YTUIDatePickerComponent({
|
|
|
- date: param.date|| new Date(),
|
|
|
- minDate: param.minDate|| YTDateUtil.getYearToday(-10),
|
|
|
- maxDate: param.maxDate||YTDateUtil.getYearToday(10),
|
|
|
- unitType: param.unitType||UnitType.YEAR_MONTH_DAY,
|
|
|
+ date: param.date || new Date(),
|
|
|
+ minDate: param.minDate || YTDateUtil.getYearToday(-10),
|
|
|
+ maxDate: param.maxDate || YTDateUtil.getYearToday(10),
|
|
|
+ unitType: param.unitType || UnitType.YEAR_MONTH_DAY,
|
|
|
confirm: param.confirm,
|
|
|
close: param.cancel,
|
|
|
- title:param.title,
|
|
|
- headerBuilder:param.headerBuilder,
|
|
|
- highlightBackgroundColor:param.highlightBackgroundColor,
|
|
|
- highlightBorderColor:param.highlightBorderColor,
|
|
|
- selectedTextStyle:param.selectedTextStyle,
|
|
|
- textStyle:param.textStyle,
|
|
|
+ title: param.title,
|
|
|
+ headerBuilder: param.headerBuilder,
|
|
|
+ highlightBackgroundColor: param.highlightBackgroundColor,
|
|
|
+ highlightBorderColor: param.highlightBorderColor,
|
|
|
+ selectedTextStyle: param.selectedTextStyle,
|
|
|
+ textStyle: param.textStyle,
|
|
|
});
|
|
|
}
|
|
|
.width('100%')
|
|
|
@@ -246,72 +243,13 @@ export class YTAddressSelectorDialog {
|
|
|
this.uiContext = uiContext;
|
|
|
|
|
|
}
|
|
|
- // 拷贝传入的配置到携带picker的配置中(Builder仅支持传递一个参数)
|
|
|
- private optionToPickerOption(option: DateOption): YTDatePickerOptions {
|
|
|
- const dateOptionAndPicker = new YTDatePickerOptions();
|
|
|
-
|
|
|
- // 显式复制每个属性(仅复制用户传入的值,保留未传参数的默认值)
|
|
|
- if (option.date !== undefined) {
|
|
|
- dateOptionAndPicker.date = option.date
|
|
|
- }
|
|
|
- if (option.minDate !== undefined) {
|
|
|
- dateOptionAndPicker.minDate = option.minDate;
|
|
|
- }
|
|
|
- if (option.maxDate !== undefined) {
|
|
|
- dateOptionAndPicker.maxDate = option.maxDate;
|
|
|
- }
|
|
|
- if (option.unitType !== undefined) {
|
|
|
- dateOptionAndPicker.unitType = option.unitType;
|
|
|
- }
|
|
|
- if (option.headerLeftBuilder !== undefined) {
|
|
|
- dateOptionAndPicker.headerLeftBuilder = option.headerLeftBuilder
|
|
|
- }
|
|
|
- if (option.title !== undefined) {
|
|
|
- dateOptionAndPicker.title = option.title
|
|
|
- }else {
|
|
|
- dateOptionAndPicker.title = '选择日期'
|
|
|
- }
|
|
|
-
|
|
|
- dateOptionAndPicker.headerBuilder = new DatePickerHeaderGlobalBuilder()
|
|
|
- if (option.headerLeftBuilder !== undefined) {
|
|
|
- dateOptionAndPicker.headerBuilder.headerLeftBuilder = option.headerLeftBuilder
|
|
|
- }else {
|
|
|
- dateOptionAndPicker.headerBuilder.headerLeftBuilder = wrapBuilder(headerLeftBuilder)
|
|
|
- }
|
|
|
- if (option.headerRightBuilder !== undefined) {
|
|
|
- dateOptionAndPicker.headerBuilder.headerRightBuilder = option.headerRightBuilder
|
|
|
- }else {
|
|
|
- dateOptionAndPicker.headerBuilder.headerRightBuilder = wrapBuilder(headerRightBuilder)
|
|
|
- }
|
|
|
- if (option.highlightBackgroundColor!==undefined) {
|
|
|
- dateOptionAndPicker.highlightBackgroundColor = option.highlightBackgroundColor
|
|
|
- }else {
|
|
|
- dateOptionAndPicker.highlightBackgroundColor ='#FFFFF6D1'
|
|
|
- }
|
|
|
- if (option.highlightBorderColor!==undefined) {
|
|
|
- dateOptionAndPicker.highlightBorderColor = option.highlightBorderColor
|
|
|
- }else {
|
|
|
- dateOptionAndPicker.highlightBorderColor =Color.Transparent
|
|
|
- }
|
|
|
- if (option.selectedTextStyle!==undefined) {
|
|
|
- dateOptionAndPicker.selectedTextStyle = option.selectedTextStyle
|
|
|
- }else {
|
|
|
- dateOptionAndPicker.selectedTextStyle = { font: { size: 16,weight:500 }, color: '#CC353C46' }
|
|
|
- }
|
|
|
- if (option.textStyle!==undefined) {
|
|
|
- dateOptionAndPicker.textStyle = option.textStyle
|
|
|
- }else {
|
|
|
- dateOptionAndPicker.textStyle = { font: { size: 16,weight:500 }, color: '#CC353C46' }
|
|
|
- }
|
|
|
- return dateOptionAndPicker;
|
|
|
- }
|
|
|
|
|
|
// 显示地址选择器对话框
|
|
|
- public show(dateOption?:DateOption) {
|
|
|
- let option:DateOption = {}
|
|
|
+ public show(dateOption?: DateOption) {
|
|
|
+ let option: DateOption = {}
|
|
|
if (dateOption) {
|
|
|
option = dateOption
|
|
|
- }else {
|
|
|
+ } else {
|
|
|
option = new DateOption()
|
|
|
}
|
|
|
const pickerOption = this.optionToPickerOption(option)
|
|
|
@@ -366,6 +304,66 @@ export class YTAddressSelectorDialog {
|
|
|
public hide() {
|
|
|
this.dialog?.dismissDialog();
|
|
|
}
|
|
|
+
|
|
|
+ // 拷贝传入的配置到携带picker的配置中(Builder仅支持传递一个参数)
|
|
|
+ private optionToPickerOption(option: DateOption): YTDatePickerOptions {
|
|
|
+ const dateOptionAndPicker = new YTDatePickerOptions();
|
|
|
+
|
|
|
+ // 显式复制每个属性(仅复制用户传入的值,保留未传参数的默认值)
|
|
|
+ if (option.date !== undefined) {
|
|
|
+ dateOptionAndPicker.date = option.date
|
|
|
+ }
|
|
|
+ if (option.minDate !== undefined) {
|
|
|
+ dateOptionAndPicker.minDate = option.minDate;
|
|
|
+ }
|
|
|
+ if (option.maxDate !== undefined) {
|
|
|
+ dateOptionAndPicker.maxDate = option.maxDate;
|
|
|
+ }
|
|
|
+ if (option.unitType !== undefined) {
|
|
|
+ dateOptionAndPicker.unitType = option.unitType;
|
|
|
+ }
|
|
|
+ if (option.headerLeftBuilder !== undefined) {
|
|
|
+ dateOptionAndPicker.headerLeftBuilder = option.headerLeftBuilder
|
|
|
+ }
|
|
|
+ if (option.title !== undefined) {
|
|
|
+ dateOptionAndPicker.title = option.title
|
|
|
+ } else {
|
|
|
+ dateOptionAndPicker.title = '选择日期'
|
|
|
+ }
|
|
|
+
|
|
|
+ dateOptionAndPicker.headerBuilder = new DatePickerHeaderGlobalBuilder()
|
|
|
+ if (option.headerLeftBuilder !== undefined) {
|
|
|
+ dateOptionAndPicker.headerBuilder.headerLeftBuilder = option.headerLeftBuilder
|
|
|
+ } else {
|
|
|
+ dateOptionAndPicker.headerBuilder.headerLeftBuilder = wrapBuilder(headerLeftBuilder)
|
|
|
+ }
|
|
|
+ if (option.headerRightBuilder !== undefined) {
|
|
|
+ dateOptionAndPicker.headerBuilder.headerRightBuilder = option.headerRightBuilder
|
|
|
+ } else {
|
|
|
+ dateOptionAndPicker.headerBuilder.headerRightBuilder = wrapBuilder(headerRightBuilder)
|
|
|
+ }
|
|
|
+ if (option.highlightBackgroundColor !== undefined) {
|
|
|
+ dateOptionAndPicker.highlightBackgroundColor = option.highlightBackgroundColor
|
|
|
+ } else {
|
|
|
+ dateOptionAndPicker.highlightBackgroundColor = '#FFFFF6D1'
|
|
|
+ }
|
|
|
+ if (option.highlightBorderColor !== undefined) {
|
|
|
+ dateOptionAndPicker.highlightBorderColor = option.highlightBorderColor
|
|
|
+ } else {
|
|
|
+ dateOptionAndPicker.highlightBorderColor = Color.Transparent
|
|
|
+ }
|
|
|
+ if (option.selectedTextStyle !== undefined) {
|
|
|
+ dateOptionAndPicker.selectedTextStyle = option.selectedTextStyle
|
|
|
+ } else {
|
|
|
+ dateOptionAndPicker.selectedTextStyle = { font: { size: 16, weight: 500 }, color: '#CC353C46' }
|
|
|
+ }
|
|
|
+ if (option.textStyle !== undefined) {
|
|
|
+ dateOptionAndPicker.textStyle = option.textStyle
|
|
|
+ } else {
|
|
|
+ dateOptionAndPicker.textStyle = { font: { size: 16, weight: 500 }, color: '#CC353C46' }
|
|
|
+ }
|
|
|
+ return dateOptionAndPicker;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
|