长春市城乡建设局网站,wordpress全球化,做网站的接私活犯法吗,网站自助建设效果图预览 20250124-113957 使用说明
1.选择日期左右箭头#xff0c;实现每月日历切换#xff0c;示例中超出当前月份#xff0c;禁止进入下一月#xff0c;可在代码更改
2.日历中显示当前选择的日期#xff0c;选中的日期颜色可自定义
3.日历中可展示历史记录作为数据…效果图预览 20250124-113957 使用说明
1.选择日期左右箭头实现每月日历切换示例中超出当前月份禁止进入下一月可在代码更改
2.日历中显示当前选择的日期选中的日期颜色可自定义
3.日历中可展示历史记录作为数据存储标志
4.当前页面选择的日期可在本页面保存状态 可根据自己需求对日历组件进行更改将代码拷贝到DevEco Studio 可直接运行使用 日历组件使用代码
Entry
Component
struct TEST {State currentSelectDate: string calendarUtils.getCurrentDay(); // 当前读取数据日期用户数据获取private historyDateArray: string[] [calendarUtils.getPreviousDay(calendarUtils.getCurrentDay()), calendarUtils.getCurrentDay()];private calendarController: CustomDialogController | null new CustomDialogController({builder: CustomCalendar({currentSelectDate: this.currentSelectDate,defaultSelectDates: this.historyDateArray,colors: [#fed2cf, #ed553c, #f74d33, #fcfaff],cancel: () {this.calendarController?.close();},confirm: (date: Date) {this.selectCalendarConfirm(date)}}),autoCancel: true,alignment: DialogAlignment.BottomEnd,offset: { dx: -8, dy: -20 },gridCount: 4,showInSubWindow: true,width: 359,isModal: true,customStyle: false,cornerRadius: 16,})// 选择日历确认框selectCalendarConfirm(date: Date) {let dateTime new Date(date);let year dateTime.getFullYear();let month dateTime.getMonth() 1;let day dateTime.getDate();let strDate ${year}-${month}-${day};this.currentSelectDate strDate;let selectIndex calendarUtils.getDaysFromDate(strDate);this.calendarController?.close();}build() {Column() {Button(日历组件).onClick(() {this.calendarController?.open();})}.width(100%).height(100%)}
}
日历组件代码
import { calendarUtils } from ../../utlis/calendarUtils;interface monthType {defaultData: boolean,value: number
}// 日历
CustomDialog
export struct CustomCalendar {controller?: CustomDialogControllerState selectedDate: Date new Date();State isDateSelected: boolean false;State currentMonth: number new Date().getMonth(); // 当前选择的月数State defaultMonth: number new Date().getMonth(); // 默认月数State currentYear: number new Date().getFullYear();Prop defaultSelectDates: string[] []; // 默认历史数据State defaultYear: number new Date().getFullYear();Prop currentSelectDate: string calendarUtils.getCurrentDay();Prop colors: string[] [#fed2cf, #ed553c, #f74d33, #fcfaff]; // 0 默认背景 1 背景默认字体颜色 2 选中背景 3 选中字体颜色State monthDays: monthType[] []; // 月份天数cancel: () void () {}confirm: (date: Date) void () {}aboutToAppear() {console.log(currentSelectDate, this.currentSelectDate)this.onDefaultDataSelect(this.currentSelectDate);let days this.getDaysInMonth();console.log(days, JSON.stringify(days))this.monthDays [...days]}build() {Column() {Row({ space: 30 }) {Image($r(app.media.rightArrow)).width(24vp).height(24vp).padding({left: 8,right: 8,top: 4,bottom: 4}).rotate({x: 0,y: 0,z: 90,centerX: 50%,centerY: 50%,angle: 180}).onClick(() this.onMonthChange(-1))Text(${this.currentYear}年${this.currentMonth 1 10 ? this.currentMonth 1 :0 (this.currentMonth 1)}月).fontSize(20).fontWeight(FontWeight.Bold).margin({ left: 15, right: 15 })if (this.defaultYear ! this.currentYear || this.currentMonth ! this.defaultMonth) {Image($r(app.media.rightArrow)).width(24vp).height(24vp).padding({left: 8,right: 8,top: 4,bottom: 4}).onClick(() this.onMonthChange(1))} else {Image($r(app.media.rightArrowGray)).width(24vp).height(24vp).padding({left: 8,right: 8,top: 4,bottom: 4})}}.width(100%).justifyContent(FlexAlign.Center).margin({ top: 20, bottom: 30 })// 星期标题Row() {ForEach([日, 一, 二, 三, 四, 五, 六], (day: string) {Text(day).textAlign(TextAlign.Center).fontSize(18).fontColor(#999999)}, (day: string) day)}.width(93%).margin({ bottom: 10 }).justifyContent(FlexAlign.SpaceBetween)Grid() {ForEach(this.monthDays, (item: monthType, index: number) {GridItem() {Column() {Text(item.value.toString()).fontSize(18).fontWeight(this.isSelectedDate(item.value) ? FontWeight.Bold : FontWeight.Normal).fontColor(this.isSelectedDate(item.value) ? this.colors[3] :item.defaultData ? this.colors[1] : this.getDateColor(item.value))}.width(100%).height(100%).borderRadius(25).backgroundColor(this.isSelectedDate(item.value) ? this.colors[2] :(item.defaultData ? this.colors[0] : Color.Transparent)).justifyContent(FlexAlign.Center)}.aspectRatio(1).onClick(() this.onDateSelected(item.value))})}.width(100%).columnsTemplate(1fr 1fr 1fr 1fr 1fr 1fr 1fr).rowsGap(8).columnsGap(8).height(260vp)// 按钮Row() {Button(取消, { type: ButtonType.Normal }).width(140vp).height(50vp).backgroundColor(#f6f6f6).fontColor(#171d29).borderRadius(12).onClick(() {this.cancel();})Button(确定, { type: ButtonType.Normal }).width(140vp).height(50vp).backgroundColor(#171d29).borderRadius(12).onClick(() {console.log(this.selectedDate, this.selectedDate);this.confirm(this.selectedDate)console.log(this.monthDays, JSON.stringify(this.monthDays))})}.width(100%).height(50vp).justifyContent(FlexAlign.SpaceBetween).padding({ left: 18, right: 18 }).margin({ bottom: 10 });}.width(100%).padding({left: 16,right: 16,top: 16,bottom: 16}).backgroundColor(#ffffff)}private onMonthChange(increment: number) {let newMonth this.currentMonth incrementlet newYear this.currentYearif (newMonth 11) {newMonth 0newYear} else if (newMonth 0) {newMonth 11newYear--}this.currentMonth newMonth;this.currentYear newYear;let result this.getDaysInMonth();this.monthDays [...result];}private onDateSelected(day: number) {const newSelectedDate new Date(this.currentYear, this.currentMonth, day);const currentDate new Date(this.currentYear, this.currentMonth, day)const today new Date()// 如果点击的值大于今天值不选中if (currentDate today) {return}if (this.isDateSelected this.selectedDate.getDate() day this.selectedDate.getMonth() this.currentMonth this.selectedDate.getFullYear() this.currentYear) {// 如果点击的是已选中的日期取消选中// this.isDateSelected falsethis.isDateSelected true} else {// 否则选中新的日期this.selectedDate newSelectedDatethis.isDateSelected true}}// 默认选中private onDefaultDataSelect(value: string) {let date value.split(-);let year Number(date[0]); // 获取当前年let month Number(date[1]) - 1; // 获取当前月如果需要渲染到页面需要1不渲染默认进行计算let day Number(date[2]); // 获取当前天数this.selectedDate new Date(year, month, day);this.isDateSelected true;}private isSelectedDate(day: number): boolean {return this.isDateSelected this.selectedDate.getDate() day this.selectedDate.getMonth() this.currentMonth this.selectedDate.getFullYear() this.currentYear}private getDaysInMonth(): monthType[] {const daysInMonth new Date(this.currentYear, this.currentMonth 1, 0).getDate();const selectMonth new Date(this.currentYear, this.currentMonth 1, 0).getMonth() 1;const selectYear new Date(this.currentYear, this.currentMonth 1, 0).getFullYear();let array Array.fromnumber, number({ length: daysInMonth }, (_, i) i 1);let result: monthType[] [];for (let i 0; i array.length; i) {let obj: monthType {value: array[i],defaultData: false,}let selectData this.defaultSelectDates.find((item: string) {let date item.split(-);let year date[0];let month date[1];let day date[2];if (selectYear Number(year) selectMonth Number(month) Number(day) array[i]) {return item} else {return undefined}});if (selectData) {obj.defaultData true;} else {obj.defaultData false;}result.push(obj);}return result;}private getDateColor(day: number): string {const currentDate new Date(this.currentYear, this.currentMonth, day)const today new Date()today.setHours(0, 0, 0, 0)if (currentDate today) {return #CCCCCC // 灰色显示过去的日期} else if (this.isSelectedDate(day)) {return #ffffff // 选中日期的文字颜色} else {return #000000 // 未选中日期的文字颜色}}private getLunarDate(day: number): string {return LunarDate.solarToLunar(this.currentYear, this.currentMonth 1, day);}
}class LunarDate {private static lunarInfo: number[] [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2,0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977,0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970,0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950,0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557,0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5d0, 0x14573, 0x052d0, 0x0a9a8, 0x0e950, 0x06aa0,0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0,0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b5a0, 0x195a6,0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570,0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0,0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5,0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930,0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530,0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45,0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0];private static Gan [甲, 乙, 丙, 丁, 戊, 己, 庚, 辛, 壬, 癸];private static Zhi [子, 丑, 寅, 卯, 辰, 巳, 午, 未, 申, 酉, 戌, 亥];private static Animals [鼠, 牛, 虎, 兔, 龙, 蛇, 马, 羊, 猴, 鸡, 狗, 猪];private static lunarMonths [正, 二, 三, 四, 五, 六, 七, 八, 九, 十, 冬, 腊];private static lunarDays [初一, 初二, 初三, 初四, 初五, 初六, 初七, 初八, 初九, 初十,十一, 十二, 十三, 十四, 十五, 十六, 十七, 十八, 十九, 二十,廿一, 廿二, 廿三, 廿四, 廿五, 廿六, 廿七, 廿八, 廿九, 三十];static solarToLunar(year: number, month: number, day: number): string {if (year 1900 || year 2100) {return 无效年份;}const baseDate new Date(1900, 0, 31);const objDate new Date(year, month - 1, day);let offset Math.floor((objDate.getTime() - baseDate.getTime()) / 86400000);let i: number, leap 0, temp 0;for (i 1900; i 2101 offset 0; i) {temp LunarDate.getLunarYearDays(i);offset - temp;}if (offset 0) {offset temp;i--;}const lunarYear i;leap LunarDate.getLeapMonth(i);let isLeap false;for (i 1; i 13 offset 0; i) {if (leap 0 i (leap 1) isLeap false) {--i;isLeap true;temp LunarDate.getLeapDays(lunarYear);} else {temp LunarDate.getLunarMonthDays(lunarYear, i);}if (isLeap true i (leap 1)) {isLeap false;}offset - temp;}if (offset 0 leap 0 i leap 1) {if (isLeap) {isLeap false;} else {isLeap true;--i;}}if (offset 0) {offset temp;--i;}const lunarMonth i;const lunarDay offset 1;const monthStr (isLeap ? 闰 : ) LunarDate.lunarMonths[lunarMonth - 1];const dayStr LunarDate.lunarDays[lunarDay - 1];return dayStr 初一 ? monthStr 月 : dayStr;}private static getLunarYearDays(year: number): number {let i 0, sum 348;for (i 0x8000; i 0x8; i 1) {sum (LunarDate.lunarInfo[year - 1900] i) ? 1 : 0;}return sum LunarDate.getLeapDays(year);}private static getLeapMonth(year: number): number {return LunarDate.lunarInfo[year - 1900] 0xf;}private static getLeapDays(year: number): number {if (LunarDate.getLeapMonth(year)) {return (LunarDate.lunarInfo[year - 1900] 0x10000) ? 30 : 29;}return 0;}private static getLunarMonthDays(year: number, month: number): number {return (LunarDate.lunarInfo[year - 1900] (0x10000 month)) ? 30 : 29;}
}日期处理utils代码
class CalendarUtils {private totalDays: number 0;// 获取日历全部时间列表值public getCalendarListCount() {let list: number[] []for (let i 1; i this.getDaysInLastTenYears(); i) {list.push(i);}return list;}// 获取前10年的总共天数public getDaysInLastTenYears(): number {const now new Date();const tenYearsAgo new Date(now.getFullYear() - 10, now.getMonth(), now.getDate());const millisecondsInDay 1000 * 60 * 60 * 24;const diffInMilliseconds now.getTime() - tenYearsAgo.getTime();this.totalDays Math.ceil(diffInMilliseconds / millisecondsInDay);return Math.ceil(diffInMilliseconds / millisecondsInDay);}// 根据当前天数获取年月日public getDateFromDaysAgo(days: number): string {const now new Date();let dayCount this.totalDays - days;const millisecondsPerDay 1000 * 60 * 60 * 24;const targetDate new Date(now.getTime() - dayCount * millisecondsPerDay);const year targetDate.getFullYear();const month String(targetDate.getMonth() 1).padStart(2, 0); // Months are zero-basedconst day String(targetDate.getDate()).padStart(2, 0);return ${year}-${month}-${day};}// 根据年月日获取天数下标 反值public getDaysFromDate(dateString: string): number {const dateParts dateString.split(-);const targetDate new Date(Number(dateParts[0]), Number(dateParts[1]) - 1, Number(dateParts[2]));const now new Date();const diffInMilliseconds now.getTime() - targetDate.getTime();const millisecondsPerDay 1000 * 60 * 60 * 24;let days Math.floor(Math.abs(diffInMilliseconds) / millisecondsPerDay);return (this.totalDays - 1) - days;}// 获取上一天年月日public getPreviousDay(value: string | Date): string {const now new Date(value);now.setDate(now.getDate() - 1); // 获取前一天const year now.getFullYear();const month String(now.getMonth() 1).padStart(2, 0); // 月份从0开始所以需要1并补0const day String(now.getDate()).padStart(2, 0); // 补0return ${year}-${month}-${day};}// 获取下一天年月日public getNextDay(value: string | Date): string {const now new Date(value);now.setDate(now.getDate() 1); // 获取后一天const year now.getFullYear();const month String(now.getMonth() 1).padStart(2, 0); // 月份从0开始所以需要1并补0const day String(now.getDate()).padStart(2, 0); // 补0return ${year}-${month}-${day};}// 获取当前年月日public getCurrentDay() {const now new Date();const year now.getFullYear();const month String(now.getMonth() 1).padStart(2, 0); // 月份从0开始加一补0const day String(now.getDate()).padStart(2, 0); // 补0return ${year}-${month}-${day};}// 获取前10年的年月茹public getTheFirstYearsDate(value: number) {const currentDate new Date();const currentYear currentDate.getFullYear();// 获取前10年的日期const previousTenYearsDate new Date(currentDate.setFullYear(currentYear - value));const Year previousTenYearsDate.getFullYear();const Month String(previousTenYearsDate.getMonth() 1).padStart(2, 0);const Day String(previousTenYearsDate.getDate()).padStart(2, 0);return ${Year}-${Month}-${Day};}
}// 获取数据预加载
export class MyDataSource implements IDataSource {private list: number[] []constructor(list: number[]) {this.list list}totalCount(): number {return this.list.length}getData(index: number): number {return this.list[index]}registerDataChangeListener(listener: DataChangeListener): void {}unregisterDataChangeListener() {}
}export const calendarUtils new CalendarUtils();
