鸿蒙实现年月日十分选择框，支持年月日、月日、日、年月日时分、时分切换

import DateTimeUtils from './DateTimeUtils';@CustomDialog
export default struct RQPickerDialog {controller: CustomDialogControllertitle: string = '这是标题'TAG: string = 'RQPickerDialog'// 0 - 日期类型（年月日）    1 - 时间类型（时分）    2 - 日期+时间类型    3 - 日期类型2（月日）    4-日期类型3（日）@State type: string = '4'private dateFormat: string = 'yyyy-MM-dd HH:mm'monthList: string[] = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];arr: number[] = [1, 3, 5, 7, 8, 10, 12] // 含有31天的月份@State dayList: string[] = []minimumDate: Date = new Date()maximumDate: Date = new Date()currentDate: Date = new Date()selectedTime: Date = new Date()@State @Watch('monthChange') selectedMonth: number = 0;selectedDay: number = 0;monthChange() {let year = this.currentDate.getFullYear()let dayOfMonth = this.arr.some(v => v === (this.selectedMonth + 1)) ? 31 : ((this.selectedMonth + 1) === 2 ? ((year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)) ? 29 : 28) : 30)console.log(this.TAG, year + "-" + this.selectedMonth + "----有多少天 " + dayOfMonth)this.dayList = []for (let i = 0; i < dayOfMonth; i++) {this.dayList.push((i + 1) + "日")}console.log(this.TAG, this.dayList.join(','))}aboutToAppear() {this.minimumDate = new Date('1999-1-1 00:00');this.maximumDate = new Date('2124-1-1 00:00');this.currentDate = new Date('2016-2-27 10:00');this.selectedTime = this.currentDate;//月份本来就是从0开始的this.selectedMonth = this.currentDate.getMonth()this.selectedDay = this.currentDate.getDate() - 1console.log(this.TAG, this.selectedMonth + "----" + this.selectedDay)}build() {Column() {Text(this.title + this.type).fontSize(25).textAlign(TextAlign.Center).margin({ top: 10, bottom: 10 });Row() {if (this.type == '0') {DatePicker({start: new Date(this.minimumDate),end: new Date(this.maximumDate),selected: this.currentDate,}).lunar(false).onChange((value: DatePickerResult) => {this.currentDate.setFullYear(value.year, value.month, value.day)console.info('select current date is: ' + JSON.stringify(value))}).width('100%')} else if (this.type == '1') {TimePicker({ selected: this.selectedTime }).useMilitaryTime(true).onChange((date: TimePickerResult) => {this.currentDate.setHours(date.hour, date.minute)console.info('select current date is: ' + JSON.stringify(date))}).width('100%')} else if (this.type == '2') {DatePicker({start: new Date(this.minimumDate),end: new Date(this.maximumDate),selected: this.currentDate,}).lunar(false).onChange((value: DatePickerResult) => {this.currentDate.setFullYear(value.year, value.month, value.day)console.info('select current date is: ' + JSON.stringify(value))}).width('66%')TimePicker({ selected: this.selectedTime }).useMilitaryTime(true).onChange((date: TimePickerResult) => {this.currentDate.setHours(date.hour, date.minute)console.info('select current date is: ' + JSON.stringify(date))}).width('34%')} else if (this.type == '3') { //月日TextPicker({ range: this.monthList, selected: this.selectedMonth }).onChange((value: string, index: number) => {this.selectedMonth = indexlet month = ~~value.substring(0, value.length - 1)this.currentDate.setMonth(month - 1)console.info(this.TAG, 'month value is ' + value + "==" + month)}).width('50%')TextPicker({ range: this.dayList, selected: this.selectedDay }).onChange((value: string, index: number) => {this.selectedDay = indexlet day = ~~value.substring(0, value.length - 1)this.currentDate.setDate(day)console.info(this.TAG, 'day value is ' + value + "==" + day)}).width('50%')} else if (this.type == '4') { //日TextPicker({ range: this.dayList, selected: this.selectedDay }).onChange((value: string, index: number) => {this.selectedDay = indexlet day = ~~value.substring(0, value.length - 1)this.currentDate.setDate(day)console.info(this.TAG, 'day value is ' + value)}).width('100%')} else {DatePicker({start: new Date(this.minimumDate),end: new Date(this.maximumDate),selected: this.currentDate,}).lunar(false).onChange((value: DatePickerResult) => {this.currentDate.setFullYear(value.year, value.month, value.day)console.info('select current date is: ' + JSON.stringify(value))}).width('100%')}}Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {Button('取消', { type: ButtonType.Normal }).onClick(() => {// this.that.sendDialogEventToJsApi(this.dialogId, "cancel", { ok: false,//   dismissByClickBg: false,//   inputContent: '' })// this.that.closeH5Dialog(this.dialogId)this.controller.close()}).backgroundColor(0xffffff).fontColor(Color.Black).layoutWeight(1).height('100%')Divider().vertical(true).strokeWidth(1).color('#F1F3F5').opacity(1).height('100%')Button('确认', { type: ButtonType.Normal }).onClick(() => {this.controller.close()var formatResult = DateTimeUtils.dateFormat(this.currentDate, this.dateFormat)console.info(this.TAG, "select current date is: " + formatResult)}).backgroundColor(0xffffff).fontColor(Color.Blue).layoutWeight(1).height('100%')}.height(50)}}
}

日期格式化工具

/*timestamp: 13位时间戳 | new Date() | Date()console.log(dateFormat(1714528800000, 'YY-MM-DD HH:mm:ss'))format => YY：年，M：月，D：日，H：时，m：分钟，s：秒，SSS：毫秒
*/
export default class DateTimeUtils {static fixedTwo(value: number): string {return value < 10 ? '0' + value : String(value)}static dateFormat(timestamp: number | string | Date, format = 'yyyy-MM-dd HH:mm:ss'): string {var date = new Date(timestamp)var showTime = formatif (showTime.includes('SSS')) {const S = date.getMilliseconds()showTime = showTime.replace('SSS', '0'.repeat(3 - String(S).length) + S)}if (showTime.includes('yy')) {const Y = date.getFullYear()showTime = showTime.includes('yyyy') ? showTime.replace('yyyy', String(Y)) : showTime.replace('yy', String(Y).slice(2, 4))}if (showTime.includes('M')) {const M = date.getMonth() + 1showTime = showTime.includes('MM') ? showTime.replace('MM', this.fixedTwo(M)) : showTime.replace('M', String(M))}if (showTime.includes('d')) {const D = date.getDate()showTime = showTime.includes('dd') ? showTime.replace('dd', this.fixedTwo(D)) : showTime.replace('d', String(D))}if (showTime.includes('H')) {const H = date.getHours()showTime = showTime.includes('HH') ? showTime.replace('HH', this.fixedTwo(H)) : showTime.replace('H', String(H))}if (showTime.includes('m')) {var m = date.getMinutes()showTime = showTime.includes('mm') ? showTime.replace('mm', this.fixedTwo(m)) : showTime.replace('m', String(m))}if (showTime.includes('s')) {var s = date.getSeconds()showTime = showTime.includes('ss') ? showTime.replace('ss', this.fixedTwo(s)) : showTime.replace('s', String(s))}return showTime}
}