日期滚动选择器(二)

效果图

子组件

无

接口

start

开始时间

end

结束时间

selected

默认选中时间

属性

lunar

农历 和 公历 切换

disappearTextStyle

设置所有选项中最上和最下两个选项的文本样式。

textStyle

设置所有选项中除了最上、最下及选中项以外的文本样式。

selectedTextStyle

设置选中项的文本样式。

事件

onDateChange

日期改变的时候触发

 .onDateChange((value:Date)=>{
  this.selectDate = value;
  console.info("select current date is:" +value.toString())
  console.info( new Date(value).getFullYear().toString())
  console.info( (new Date(value).getMonth()+1).toString())
  console.info( new Date(value).getDate().toString())
})

示例

@Entry
@Component
struct Index6 {
    // 是否显示 弹出框
    @State showDialog:boolean = false;

    // 农历和阳历 切换
    @State isLunar:boolean = false;

    // 默认选中的日期
    private selectDate:Date = new Date('2021-08-08')

    build() {
       Column({space:20}){
         Row(){
           Button("点击我").type(ButtonType.Normal).onClick(()=>{
             this.showDialog  =!this.showDialog
           })
         }
         Row(){
           Button("切换农历和阳历").type(ButtonType.Normal).onClick(()=>{
             this.isLunar  =!this.isLunar
           })
         }
         if(this.showDialog){
           DatePicker({
             // 开始时间
             start: new Date('1970-01-01'),
             // 结束时间
             end: new Date('2100-01-01'),
             // 默认时间
             selected:this.selectDate
           })
             // 阴历和阳历切换
             .lunar(this.isLunar)
             // 日期改变
             .onDateChange((value:Date)=>{
               this.selectDate = value;
               console.info("select current date is:" +value.toString())
               console.info( new Date(value).getFullYear().toString())
               console.info( (new Date(value).getMonth()+1).toString())
               console.info( new Date(value).getDate().toString())
             })
             // 最上和最下两列
             .disappearTextStyle({
               color: Color.Red,
               font: {
                 size: '18fp',
                 weight: FontWeight.Bold
               }
             })
             // 除了 最上和最下 中间两列
             .textStyle({
               color: Color.Green,
               font: {
                 size: '18fp',
                 weight: FontWeight.Bold
               }
             })
             // 中间选中的样式
             .selectedTextStyle({
               color: Color.Yellow,
               font: {
                 size: '24fp',
                 weight: FontWeight.Bold
               }
             })
             .position({
               bottom:10
             })
         }

       }
       .width('100%')
       .height('100%')
       .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
    }
}