1 Star 0 Fork 0

ScenarioSamples/DataPickerNoCycle

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

DateTimePicker组件实现不循环滚动

介绍

本示例介绍DatePicker组件实现不循环滚动,支持选择日期和时间。

  • 支持嵌入页面形式展示
  • 支持弹窗形式展示

效果预览图

DatePicker组件实现不循环滚动GIF图

实现思路

DateTimePicker组件本身不支持不循环滚动,通过TextPicker组件实现,通过设置canLoop属性来实现不循环滚动,通过timeFormat属性控制组件展示列数

@Builder
function CustomPicker($$: PickerClass) {
  TextPicker({ range: $$.range, selected: $$.selected })
    .layoutWeight(1)
    .canLoop($$.option?.isLoop ?? false)
    .visibility(isVisibility($$.dateIndex, $$.option?.timeFormat))
    .onChange((value: string | string[], index: number | number[]) => {
      $$.callback($$.dateIndex, value, index)
    })
}

实现思路

嵌入页面形式展示

嵌入到页面中,返回值通过传入的resultCb返回

Column({ space: 24 }) {
  Text(this.selectDate.toString() + '\n' + Lunar.fromDate(this.selectDate).toString())
    .fontSize(20)
    .fontColor(Color.Red)
    .textAlign(TextAlign.Center)

  Column({ space: 12 }) {
    Text('页面形式展示日期时间选择器')
      .fontSize(20)
      .fontWeight(FontWeight.Bold)

    // 直接在页面上调用该组件
    DateTimePicker({
      data: {
        startYear: 2000,
        endYear: 2050,
        resultCb: this.updateSelectData,
      },
      option: {
        timeFormat: this.timeFormat
      }
    })
  }
  .borderWidth(2)
  .borderColor(Color.Gray)
  .borderRadius(8)

  Button('点击底部弹窗形式唤起日期时间选择器')
    .onClick(this.openDateTimePicker)
}

弹窗形式展示

通过PromptAction弹窗形式展示,返回值通过传入的resultCb返回。弹窗形式目前仅支持设置DateTimePickerStyle接口中的样式

export function DateTimePickerDialog(uiContext: UIContext, param: DateTimePickerParam,
  dialogOptions?: promptAction.BaseDialogOptions) {
  const now: number = Date.now();
  let contentNode = new ComponentContent(uiContext, wrapBuilder(DateTimePickerDialogBuilder), {
    node: now,
    param: param
  } as DateTimePickerDialogParam);
  uiContext.getPromptAction().openCustomDialog(contentNode, dialogOptions);
  mapContext.set(now, { context: uiContext, content: contentNode });
}

DateTimePickerDialog(this.getUIContext(), {
  data: {
    startYear: 2000,
    endYear: 2050,
    selectedDate: this.selectDate,
    resultCb: this.updateSelectData,
  },
  option: {
    timeFormat: TimeFormat.Second
  },
  style: {
    backgroundColor: Color.White,
    borderRadius: 8,
    borderColor: Color.Orange,
    borderWidth: 2,
    margin: 4
  }
} as DateTimePickerParam, {
  alignment: DialogAlignment.Bottom,
  offset: { dx: 0, dy: -40 },
});

工程结构&模块类型

DatePickerNoCycle                           // entry类型
|---pages
|   |---Index                               // 入口页面
dateTimePicker                              // har包类型
|---common
|   |---Constants                           // 常量定义
|---interface
|   |---DateTimePickerInterface             // 日期时间选择器参数接口
|---pages
|   |---DateTimePicker                      // 日期时间选择器
|---utils
|   |---DateTimeBase                        // 日期时间基类
|   |---DateTimeLunar                       // 日期时间农历类
|   |---DateTimeRange                       // 日期时间范围
|   |---DateTimeSolar                       // 日期时间公历类

一份简单的问卷反馈

亲爱的Harmony Next开发者,您好!
为了协助您高效开发,提高鸿蒙场景化示例的质量,希望您在浏览或使用后抽空填写一份简单的问卷,我们将会收集您的宝贵意见进行优化

点击此处填写问卷

空文件

简介

【鸿蒙 Harmony Next 示例 代码】本示例介绍DatePicker组件实现不循环滚动,支持选择日期和时间。 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/scenario-samples/data-picker-no-cycle.git
git@gitee.com:scenario-samples/data-picker-no-cycle.git
scenario-samples
data-picker-no-cycle
DataPickerNoCycle
master

搜索帮助