55 IBestCalendarDayItem,
66 IBestCalendarDialog,
77 IBestCell,
8- IBestCellGroup
8+ IBestCellGroup,
9+ IBestToast
910} from '@ibestservices/ibest-ui'
1011import ComponentShowContainer from '../../components/ComponentShowContainer'
1112import { modeColor, SPACE } from '../../assets/styles/BaseStyle'
@@ -22,23 +23,23 @@ export function CalendarBuilder(_: string, title: string){
2223struct CalendarPage {
2324 @State title: string = ''
2425 @State singleVisible: boolean = false
25- @State selectDate: string = "请选择日期 "
26+ @State selectDate: string = ""
2627 @State multipleVisible: boolean = false
27- @State multipleDateRange: string = "请选择日期"
28+ @State multipleDateRange: string[] = []
2829 @State rangeVisible: boolean = false
29- @State rangeDateRange: string = "请选择日期"
30+ @State rangeDateRange: string[] = []
3031 @State customColorVisible: boolean = false
31- @State customColorDate: string = "请选择日期"
32+ @State customColorDate: string[] = []
3233 @State customRangeVisible: boolean = false
33- @State customRangeDate: string = "请选择日期"
34+ @State customRangeDate: string[] = []
3435 @State lunarVisible: boolean = false
35- @State lunarDate: string = "请选择日期 "
36+ @State lunarDate: string = ""
3637 @State customWeekVisible: boolean = false
37- @State customWeekDate: string = "请选择日期 "
38+ @State customWeekDate: string = ""
3839 @State rangeNumVisible: boolean = false
39- @State rangeNumDate: string = "请选择日期"
40+ @State rangeNumDate: string[] = []
4041 @State waterBgVisible: boolean = false
41- @State waterBgDate: string = "请选择日期 "
42+ @State waterBgDate: string = ""
4243
4344 @State clockDate: string[] = [dayjs().startOf("month").format('YYYY-MM-DD')]
4445
@@ -61,38 +62,6 @@ struct CalendarPage {
6162 .backgroundImagePosition(Alignment.Center)
6263 }
6364
64- onDialogConfirm(type: string, value: IBestCalendarConfirmResult[]): void {
65- switch (type){
66- case "selectDate":
67- this.selectDate = value[0].dateStr
68- break
69- case "multipleDateRange":
70- this.multipleDateRange = value.map(item => item.dateStr).join(",")
71- break
72- case "rangeDateRange":
73- this.rangeDateRange = value[0].dateStr + " - " + value[value.length-1].dateStr
74- break
75- case "customColorDate":
76- this.customColorDate = value.map(item => item.dateStr).join(",")
77- break
78- case "lunarDate":
79- this.lunarDate = value[0].dateStr
80- break
81- case "customRangeDate":
82- this.customRangeDate = value.map(item => item.dateStr).join(",")
83- break
84- case "rangeNumDate":
85- this.rangeNumDate = value[0].dateStr + " - " + value[value.length-1].dateStr
86- break
87- case "customWeekDate":
88- this.customWeekDate = value[0].dateStr
89- break
90- case "waterBgDate":
91- this.waterBgDate = value[0].dateStr
92- break
93- }
94- }
95-
9665 build() {
9766 NavDestination(){
9867 CustomNavBar({title: this.title})
@@ -104,21 +73,24 @@ struct CalendarPage {
10473 IBestCell({
10574 title: '选择单个日期',
10675 value: this.selectDate,
76+ isLink: true,
10777 onCellClick: () => {
10878 this.singleVisible = true
10979 }
11080 })
11181 IBestCell({
11282 title: '选择多个日期',
113- value: this.multipleDateRange,
83+ value: this.multipleDateRange.join(","),
84+ isLink: true,
11485 onCellClick: () => {
11586 this.multipleVisible = true
11687 }
11788 })
11889 IBestCell({
11990 title: '选择日期区间',
12091 hasBorder: false,
121- value: this.rangeDateRange,
92+ value: this.rangeDateRange.length ? this.rangeDateRange[0] + " - " + this.rangeDateRange[this.rangeDateRange.length-1] : "",
93+ isLink: true,
12294 onCellClick: () => {
12395 this.rangeVisible = true
12496 }
@@ -133,42 +105,48 @@ struct CalendarPage {
133105 Column() {
134106 IBestCell({
135107 title: '自定义颜色',
136- value: this.customColorDate,
108+ value: this.customColorDate.join(","),
109+ isLink: true,
137110 onCellClick: () => {
138111 this.customColorVisible = true
139112 }
140113 })
141114 IBestCell({
142115 title: '显示农历',
143116 value: this.lunarDate,
117+ isLink: true,
144118 onCellClick: () => {
145119 this.lunarVisible = true
146120 }
147121 })
148122 IBestCell({
149123 title: '自定义日期范围',
150- value: this.customRangeDate,
124+ value: this.customRangeDate.join(","),
125+ isLink: true,
151126 onCellClick: () => {
152127 this.customRangeVisible = true
153128 }
154129 })
155130 IBestCell({
156131 title: '日期区间最大范围',
157- value: this.rangeNumDate,
132+ value: this.rangeNumDate.length ? this.rangeNumDate[0] + " - " + this.rangeNumDate[this.rangeNumDate.length-1] : "",
133+ isLink: true,
158134 onCellClick: () => {
159135 this.rangeNumVisible = true
160136 }
161137 })
162138 IBestCell({
163139 title: '自定义周起始日期',
164140 value: this.customWeekDate,
141+ isLink: true,
165142 onCellClick: () => {
166143 this.customWeekVisible = true
167144 }
168145 })
169146 IBestCell({
170147 title: '显示月份背景水印',
171148 value: this.waterBgDate,
149+ isLink: true,
172150 hasBorder: false,
173151 onCellClick: () => {
174152 this.waterBgVisible = true
@@ -181,10 +159,10 @@ struct CalendarPage {
181159 ListItem(){
182160 ComponentShowContainer({ title: '平铺展示', titlePaddingLeft: SPACE.XS }) {
183161 IBestCalendar({
162+ value: $defaultSelectedDate,
184163 isShowLunar: true,
185164 selectType: "multiple",
186165 isShowMark: true,
187- defaultSelectedDate: this.defaultSelectedDate,
188166 dayItemBuilder: this.itemBuilder
189167 })
190168 }
@@ -201,7 +179,7 @@ struct CalendarPage {
201179 })
202180 IBestCalendar({
203181 clock: true,
204- defaultSelectedDate: this. clockDate
182+ value: $ clockDate
205183 })
206184 }
207185 }
@@ -213,64 +191,67 @@ struct CalendarPage {
213191 // 单选
214192 IBestCalendarDialog({
215193 visible: $singleVisible,
194+ value: $selectDate,
216195 type: "danger",
217- onConfirm: (value): void => this.onDialogConfirm("selectDate", value)
196+ onConfirm: (value: IBestCalendarConfirmResult[]) => {
197+ IBestToast.show(value[0].dateStr)
198+ }
218199 })
219200 // 多选
220201 IBestCalendarDialog({
221202 visible: $multipleVisible,
222- selectType: "multiple" ,
223- onConfirm: (value): void => this.onDialogConfirm("multipleDateRange", value)
203+ value: $multipleDateRange ,
204+ selectType: "multiple"
224205 })
225206 // 区间选
226207 IBestCalendarDialog({
227208 visible: $rangeVisible,
228- selectType: "range" ,
229- onConfirm: (value): void => this.onDialogConfirm("rangeDateRange", value)
209+ value: $rangeDateRange ,
210+ selectType: "range"
230211 })
231212 // 自定义颜色
232213 IBestCalendarDialog({
233214 visible: $customColorVisible,
215+ value: $customColorDate,
234216 selectType: "multiple",
235- selectedColor: "#58DB6B",
236- onConfirm: (value): void => this.onDialogConfirm("customColorDate", value)
217+ selectedColor: "#58DB6B"
237218 })
238219 // 显示农历
239220 IBestCalendarDialog({
240221 visible: $lunarVisible,
222+ value: $lunarDate,
241223 isShowLunar: true,
242- cornerRadius: 20,
243- onConfirm: (value): void => this.onDialogConfirm("lunarDate", value)
224+ cornerRadius: 20
244225 })
245226 // 自定义日期范围
246227 IBestCalendarDialog({
247228 visible: $customRangeVisible,
229+ value: $customRangeDate,
248230 selectType: "multiple",
249231 selectedStyleType: "circle",
250232 minDate: new Date('1991-01-01'),
251233 maxDate: new Date(),
252- confirmBtnColor: "#ed4040",
253- onConfirm: (value): void => this.onDialogConfirm("customRangeDate", value)
234+ confirmBtnColor: "#ed4040"
254235 })
255236 // 日期区间最大范围
256237 IBestCalendarDialog({
257238 visible: $rangeNumVisible,
239+ value: $rangeNumDate,
258240 type: "danger",
259241 selectType: "range",
260- maxRange: 7,
261- onConfirm: (value): void => this.onDialogConfirm("rangeNumDate", value)
242+ maxRange: 7
262243 })
263244 // 自定义周起始日期
264245 IBestCalendarDialog({
265246 visible: $customWeekVisible,
266- weekFirstDay: 0 ,
267- onConfirm: (value): void => this.onDialogConfirm("customWeekDate", value)
247+ value: $customWeekDate ,
248+ weekFirstDay: 0
268249 })
269250 // 显示月份背景水印
270251 IBestCalendarDialog({
271252 visible: $waterBgVisible,
272- isShowMark: true ,
273- onConfirm: (value): void => this.onDialogConfirm("waterBgDate", value)
253+ value: $waterBgDate ,
254+ isShowMark: true
274255 })
275256 }
276257 .hideTitleBar(true)
0 commit comments