HarmonyOS 鸿蒙Next 半屏时间弹窗实现滚动日历功能比如选择2月对应日期只有28天滚动

半屏时间弹窗需要实现滚动日历功能比如选择2月对应日期只有28天滚动

@Entry
@Component
struct DilogDemo {
  @State textValue: string = ''
  dialogController: CustomDialogController = new CustomDialogController({
    builder: TimeSelectDialog(),
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    customStyle: true,
  })

  build() {
    Column({ space: 10 }) {
      Text('TimeSelectDialog').onClick(() => {
        this.dialogController.open()
      })
    }.width('100%').margin({ top: 5 })
  }
}

class bottom {
  bottom: number = 50
}

let bott: bottom = new bottom()

@CustomDialog
export struct TimeSelectDialog {
  controller: CustomDialogController = new CustomDialogController({ builder: TimeSelectDialog({}), })
  private years: string[] =
    ['1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003',
      '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017',
      '2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027', '2028', '2029', '2030']
  private months: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
  private hours: string[] =
    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
      '21', '22', '23', '24'];
  private minutes: string[] =
    ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
      '21', '22', '23', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40',
      '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'];
  private seconds: string[] =
    ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
      '21', '22', '23', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40',
      '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'];
  private multi: string[][] = [this.years, this.months, this.hours, this.minutes, this.seconds]

  build() {
    Column() {
      TextPicker({ range: this.multi }).onChange((value: string | string[], index: number | number[]) => {
        console.info('TextPicker 多列:onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index))
      }).margin(bott)
    }
  }
}

更多关于HarmonyOS 鸿蒙Next 半屏时间弹窗实现滚动日历功能比如选择2月对应日期只有28天滚动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 1楼•2 天前

可以参考下示例5的省市联动，自己实现一个主子联动

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-textpicker-V5#示例

itying888 2楼•2 天前

在HarmonyOS鸿蒙Next中实现半屏时间弹窗并添加滚动日历功能，可以按照以下步骤操作：

创建弹窗布局：在XML文件中设计半屏弹窗布局，包含日期选择器控件。使用CalendarPicker组件来实现日期的选择功能。
设置弹窗逻辑：在JavaScript或Dart（取决于你使用的框架）中，编写弹窗显示和隐藏的逻辑。通过点击按钮或其他触发条件来显示弹窗。
配置CalendarPicker：在弹窗布局中找到CalendarPicker组件，并设置其属性，例如选择月份后的日期范围。由于2月通常只有28天（闰年有29天），CalendarPicker会自动根据选择的年份调整日期范围。
实现滚动效果：CalendarPicker组件本身支持日期滚动选择。你可以通过调整其样式和属性来优化滚动体验，如设置滚动速度、日期格式等。
处理选择结果：当用户从CalendarPicker中选择日期后，通过事件监听器获取选择的日期，并在弹窗关闭时将日期传递给主页面或进行其他处理。

示例代码片段（简化）：

<!-- 弹窗布局XML -->
<div class="popup">
  <CalendarPicker id="calendarPicker" />
</div>

// 弹窗显示逻辑
document.getElementById('openPopup').addEventListener('click', () => {
  // 显示弹窗逻辑
});

// 获取选择日期
document.getElementById('calendarPicker').addEventListener('change', (e) => {
  const selectedDate = e.detail.value;
  // 处理选择日期
});

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部

HarmonyOS 鸿蒙Next 半屏时间弹窗实现滚动日历功能 比如选择2月对应日期只有28天滚动

HarmonyOS 鸿蒙Next 半屏时间弹窗实现滚动日历功能比如选择2月对应日期只有28天滚动