HarmonyOS 鸿蒙Next中api17以下怎么写只显示年月的日期选择器

HarmonyOS 鸿蒙Next中api17以下怎么写只显示年月的日期选择器

api17以下怎么写只显示年月的日期选择器，而且要有确定返回按钮，需美观

3 回复

【背景知识】

  • DatePickerDialog是一个用于显示日期选择对话框的组件，用户可以在指定的日期范围内通过滑动或点击来选择具体的日期。
  • TextPicker是一个允许用户从一组预定义的选项中通过滑动选择文本内容的组件。

【解决方案】

  • 方案一：DatePickerOptions中提供相应属性mode可设置日期展示模式。具体可参考官网示例：设置显示月、日列。该属性在HarmonyOS API18及以上版本支持。
  • 方案二：可通过TextPicker的多列模式自定义年月选择器，示例代码如下：
    1. 使用range属性定义两列数据（第一列为年份，第二列为月份）。
    2. 结合onChange监听选择结果的变化。

以下是示例代码：

// xxx.ets
@CustomDialog
struct CustomDialogExample {
  controller?: CustomDialogController;
  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 multi: string[][] = [this.years, this.months]
  @State value:string | string[]=[]
  build() {
    Column() {
      TextPicker({ range: this.multi })
        .onChange((value: string | string[], index: number | number[]) => {
          this.value =value;
          console.info(`---TextPicker 多列:onChange ${value}, index: ${index}`)
        }).margin(50)
      Button('确定').margin({ top: 20 })
        .onClick(() => {
          console.info(`---date= ${this.value}`);
          this.controller?.close();
        })
    }
  }
}
@Entry
@Component
struct DatePickerExample {
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample({}),
    autoCancel: true,
    onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
      console.info(`reason= ${dismissDialogAction.reason}`);
      console.info('dialog onWillDismiss');
      if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
        dismissDialogAction.dismiss();
      }
      if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
        dismissDialogAction.dismiss();
      }
    },
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false,
    cornerRadius: 10,
  })

  build() {
    Column() {
      Button("DatePickerDialog")
        .margin(20)
        .onClick(() => {
          this.dialogController!.open();
        })
    }.width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next中api17以下怎么写只显示年月的日期选择器的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，若需在API 17以下实现仅显示年月的日期选择器，可使用DatePicker组件并设置其模式为DatePickerMode.YEAR_MONTH。示例代码：

import { DatePicker, DatePickerMode } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State selectedDate: Date = new Date();

  build() {
    Column() {
      DatePicker({
        start: new Date('1970-1-1'),
        end: new Date('2100-1-1'),
        selected: this.selectedDate
      })
      .mode(DatePickerMode.YEAR_MONTH)
    }
  }
}

通过设置mode属性为YEAR_MONTH，选择器将仅显示年月选项。

在HarmonyOS Next中，针对API 17以下版本实现只显示年月的日期选择器，可以通过自定义布局和DatePicker组件实现。以下是具体步骤：

  1. 使用DatePicker组件：
    DatePicker默认支持年月日选择，但可以通过隐藏日选择区域来仅显示年月。
    在XML布局中设置ohos:mode="month"属性，但需注意API 17以下可能不支持此模式，因此需通过代码动态调整。

  2. 自定义布局隐藏日选择：
    创建自定义DatePicker，通过getChildAt()方法获取子视图并隐藏日的部分。例如：

    DatePicker datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_picker);
// 获取日选择器并隐藏
Component dayComponent = datePicker.getComponentAt(2); // 通常索引2为日
if (dayComponent != null) {
    dayComponent.setVisibility(Component.HIDE);
}

  3. 添加确定按钮：
    在布局中添加Button组件，并设置点击事件，通过datePicker.getYear()和datePicker.getMonth()获取选择的年月。

  4. 美化样式：
    通过XML或代码设置背景、字体大小和颜色，确保与整体UI风格一致。例如，使用setTextSize()和setTextColor()调整日期文本样式。

完整示例代码：

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent">
    <DatePicker
        ohos:id="$+id:date_picker"
        ohos:width="match_content"
        ohos:height="match_content"/>
    <Button
        ohos:id="$+id:confirm_button"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="确定"/>
</DirectionalLayout>

public class MySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        setUIContent(ResourceTable.Layout_layout_date_picker);
        
        DatePicker datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_picker);
        Button confirmButton = (Button) findComponentById(ResourceTable.Id_confirm_button);
        
        // 隐藏日选择部分
        datePicker.getComponentAt(2).setVisibility(Component.HIDE);
        
        confirmButton.setClickedListener(component -> {
            int year = datePicker.getYear();
            int month = datePicker.getMonth() + 1; // 月份从0开始
            // 处理年月数据
        });
    }
}

此方法在API 17以下兼容，确保功能简洁美观。

回到顶部