鸿蒙ArkUI日期选择组件，基于基础组件进行的二次封装的日期选择组件，快速实现日期选择。

/*** 日期*/
@Component
export default  struct DiygwDate{//绑定的值@Link @Watch('onValue') value:string;// 隐藏值@State valueField: string = 'value';// 显示值@State labelField: string = 'label';// 选中/未选中状态下的图标@State checkedValues: Resource[] = [];@State placeHolder:string = '请选择'//未选中图标@State labelImg: Resource = $r('app.media.user');//是否文本图片@State isLabelImg: boolean = false;@State labelImgWidth: number = 20;@State labelImgHeight: number = 20;//标题文本@State label:string = '下拉';//水平状态时，文本占大小@State labelWidth:number = 80;//是否标题文本换行@State isWrapLabel:boolean = false;//是否标题文本@State isLabel:boolean = true;//标题颜色@State labelColor:string = "#333333";//自动标题长度@State isLabelAuto:boolean = false;//文本字体大小@State textSize:number = 14;//选中图版本大小@State imgSize:number = 28;//组件内边距@State leftRightPadding:number = 16;@State topBottomPadding:number = 6;@State textAlign:TextAlign = TextAlign.End@State range:string[]=[];@State selectLabel:string = "";@State isBorder:boolean = true;//初始化选中initCheck(){}//监听选中onValue() {this.initCheck()}build() {Flex({alignItems:this.isWrapLabel?ItemAlign.Start:ItemAlign.Center,direction:this.isWrapLabel?FlexDirection.Column:FlexDirection.Row,justifyContent:FlexAlign.Start}){if(this.isLabel){Row(){if(this.isLabelImg){Image(this.labelImg).width(this.labelImgWidth).height(this.labelImgHeight).margin({ left:3 }).flexShrink(0)}if(this.isLabelAuto){Text(this.label).flexShrink(0).fontColor(this.labelColor).fontSize(this.textSize).margin({bottom:this.isWrapLabel?10:0,right:10,}).textAlign(TextAlign.Start);}else{Text(this.label).fontColor(this.labelColor).width(this.isWrapLabel?'100%':this.labelWidth).fontSize(this.textSize).margin({bottom:this.isWrapLabel?10:0}).textAlign(TextAlign.Start);}}.margin({top:this.isWrapLabel?10:0})}Flex({alignItems:ItemAlign.Center,}){Text(this.selectLabel).width('100%').fontSize(this.textSize).textAlign(this.isWrapLabel?TextAlign.Start:this.textAlign);Image($r('app.media.ic_arrow')).flexShrink(0).objectFit(ImageFit.Contain).width('12vp').height('24vp')}.onClick(() => {DatePickerDialog.show({// selected: this.selectedDate,lunar: false,onAccept: (value: DatePickerResult) => {this.value = `${value.year}-${value.month + 1}-${value.day}`this.selectLabel = this.value}})}).flexGrow(1)}.borderWidth({bottom: this.isBorder?1:0}).borderColor({bottom: "#eee"}).borderStyle(BorderStyle.Solid).height(this.textSize+(this.isWrapLabel?20:0)+30+this.topBottomPadding*2).padding({left:this.leftRightPadding,right:this.leftRightPadding,top:this.topBottomPadding,bottom:this.topBottomPadding}).onAppear(() => {this.selectLabel = this.placeHolder;this.initCheck()})}
}

import {navigateTo
} from '../common/Page'
import {IDynamicObject
} from '../component/IType';
import DiygwDate from '../component/Date'
@Entry
@Component
export struct User {@State date: string = '';async onPageShow() {}async aboutToAppear() {await this.onPageShow()}build() {Column() {Navigation().width('100%').height('56vp').backgroundColor('#07c160').title(this.NavigationTitle()).titleMode(NavigationTitleMode.Mini).align(Alignment.Center).hideBackButton(true)Scroll() {Flex({direction: FlexDirection.Column}) {DiygwDate({label: '日期',value: $date})}.height('100%')}.height('100%').layoutWeight(1)}.alignItems(HorizontalAlign.Start).height('100%')}@BuilderNavigationTitle() {Column() {Text('个人中心').width('100%').textAlign(TextAlign.Center).height('28vp').fontSize('20fp').fontWeight(500).fontColor('#fff')}}}