DatePicker

DatePicker主要供用户选择日期。

支持的XML属性

DatePicker的共有XML属性继承自：StackLayout

DatePicker的自有XML属性见下表：

使用DatePicker

• 在XML中创建DatePicker

  <DatePicker    ohos:id="$+id:date_pick"    ohos:height="match_content"    ohos:width="300vp"></DatePicker>
  

  图1 创建默认的DatePicker

• 获取当前选择日期，日/月/年，DatePicker默认选择当前日期。

  // 获取DatePicker实例DatePicker datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_pick);int day = datePicker.getDayOfMonth();int month = datePicker.getMonth();int year = datePicker.getYear();
  

• 响应日期改变事件：

  在XML中添加Text显示选择日期：

  <Text    ohos:id="$+id:text_date"    ohos:height="match_content"    ohos:width="match_parent"    ohos:hint="date"    ohos:margin="8vp"    ohos:padding="4vp"    ohos:text_size="14fp"></Text>
  

  在Java代码中响应日期改变事件：

  Text selectedDate = (Text) findComponentById(ResourceTable.Id_text_date);datePicker.setValueChangedListener(        new DatePicker.ValueChangedListener() {            @Override            public void onValueChanged(DatePicker datePicker, int year, int monthOfYear, int dayOfMonth) {                selectedDate.setText(String.format("%02d/%02d/%4d", dayOfMonth, monthOfYear, year));            }        });
  

  图2 日期改变响应效果

• 设置当前日期

  datePicker.updateDate(2021, 8, 8);
  

• 设置日期的范围

  如需对DatePicker的日期选择范围有要求，可以设置属性min_date和max_date。设置的值为日期对应的Unix时间戳。

  1. 设置最小日期

     在xml设置：

     <DatePicker    ...    ohos:min_date="1627747200"></DatePicker>
     

     在代码中设置：

     datePicker.setMinDate(1627747200);
     

     图3 设置最小日期为2021/08/01

  2. 设置最大日期

     在XML中设置：

     <DatePicker    ...    ohos:max_date="1630339200"></DatePicker>
     

     在代码中设置：

     datePicker.setMaxDate(1630339200);
     

     图4 设置最大日期为2021/08/31

• 固定年/月/日

  在XML中设置：

  <DatePicker    ...    ohos:year_fixed="true"></DatePicker>
  

  在代码中设置：

  datePicker.setYearFixed(true);
  

样式设置

• 文本相关属性

  1. 设置待选项的字体大小和颜色

     <DatePicker    ...    ohos:normal_text_color="#00FFFF"    ohos:normal_text_size="20fp"></DatePicker>
     

     图5 设置待选项的字体大小和颜色效果

  2. 设置已选项的字体大小和颜色

     在XML中设置：

     <DatePicker    ...    ohos:selected_text_color="#00FFFF"    ohos:selected_text_size="20fp"></DatePicker>
     

     在代码中设置：

     datePicker.setSelectedTextSize(40);datePicker.setSelectedTextColor(new Color(Color.getIntColor("#FFA500")));
     

     图6 设置已选项的字体大小和颜色效果

  3. 设置操作项的字体颜色

     在XML中设置：

     <DatePicker    ...    ohos:operated_text_color="#00FFFF"></DatePicker>
     

     在代码中设置：

     datePicker.setOperatedTextColor(new Color(Color.getIntColor("#00FFFF")));
     

     图7 设置操作项的字体颜色效果

• 设置DatePicker中所选文本边距与普通文本边距的比例

  在XML中设置：

  <DatePicker    ...    ohos:selected_normal_text_margin_ratio="10"></DatePicker>
  

  在代码中设置：

  datePicker.setSelectedNormalTextMarginRatio(10.0f)
  

  图8 已选文本边距与正常文本边距比例设置为10

• 设置滚轮绕行

  在XML中设置：

  <DatePicker    ...    ohos:wheel_mode_enabled="true"></DatePicker>
  

  在代码中设置：

  datePicker.setWheelModeEnabled(true);
  

  图9 滚轮绕行效果

• 设置选中日期的上下边框

  在XML中设置：

  <DatePicker    ...    ohos:top_line_element="#9370DB"    ohos:bottom_line_element="#9370DB"></DatePicker>
  

  在代码中设置：

  ShapeElement shape = new ShapeElement();shape.setShape(ShapeElement.RECTANGLE);shape.setRgbColor(RgbColor.fromArgbInt(0xFF9370DB));datePicker.setDisplayedLinesElements(shape,shape);
  

  图10 添加选中项上下边框效果

• 设置着色器颜色

  在XML中设置：

  <DatePicker    ...    ohos:shader_color="gray"></DatePicker>
  

  在代码中设置：

  datePicker.setShaderColor(new Color(Color.getIntColor("#00CED1")));
  

  图11 设置着色器颜色效果