3.10 HarmonyOS Hongmon Component DatePicker

Author: Han Ru

Company: Program Ka (Beijing) Technology Co., LTD

Hong Meng Bus columnist

DatePicker allows users to select dates.

Supported XML attributes

The common XML attribute of DatePicker is inherited from StackLayout

DatePicker’s own XML attributes are shown in the following table:

The attribute name Product description The values The values that Use case
date_order Display format, year month day 0 The date is displayed in the format of day-month-year. ohos:date_order=”0″
1 Indicates the date in the format of month-day-year.
2 Indicates the date in year-month-day format.
3 Indicates that the date is displayed in year-day-month format.
4 Indicates that the date is displayed in day-month format.
5 Indicates that the date is displayed in month-day format.
6 Indicates the date in year-month format.
7 Indicates the date in month-year format.
8 Indicates that only years are displayed.
9 Indicates that only months are displayed.
10 Indicates that only the date is displayed.
day_fixed Is the date fixed? Boolean type You can set true/false directly or refer to a Boolean resource. ohos:day_fixed=”true”ohos:day_fixed=”$boolean:true”
month_fixed Is the month fixed? Boolean type You can set true/false directly or refer to a Boolean resource. ohos:month_fixed=”true”ohos:month_fixed=”$boolean:true”
year_fixed Is the year fixed? Boolean type You can set true/false directly or refer to a Boolean resource. ohos:year_fixed=”true”ohos:year_fixed=”$boolean:true”
max_date The biggest date long You can set a long integer value directly, or you can reference a string resource. ohos:time=”1234567″ohos:time=”$string:date”
min_date The minimum date long You can set a long integer value directly, or you can reference a string resource. ohos:time=”1234567″ohos:time=”$string:date”
text_size Text size A float A float type representing the size. They can be floating point values, which default to px; It can also be a floating point value with px/ VP /fp units; Float resources can also be referenced. ohos:text_size=”30″ohos:text_size=”16fp”ohos:text_size=”$float:size_value”
normal_text_size Deselect the size of selected text A float A float type representing the size. They can be floating point values, which default to px; It can also be a floating point value with px/ VP /fp units; Float resources can also be referenced. ohos:normal_text_size=”30″ohos:normal_text_size=”16fp”ohos:normal_text_size=”$float:size_value”
selected_text_size Select the size of the text A float A float type representing the size. They can be floating point values, which default to px; It can also be a floating point value with px/ VP /fp units; Float resources can also be referenced. ohos:selected_text_size=”30″ohos:selected_text_size=”16fp”ohos:selected_text_size=”$float:size_value”
normal_text_color Deselect the color of the selected text Color type You can set the color value directly or reference the color resource. ohos:normal_text_color=”#A8FFFFFF”ohos:normal_text_color=”$color:black”
selected_text_color Select the color of the text Color type You can set the color value directly or reference the color resource. ohos:selected_text_color=”#A8FFFFFF”ohos:selected_text_color=”$color:black”
operated_text_color The text color of the action item Color type You can set the color value directly or reference the color resource. ohos:operated_text_color=”#A8FFFFFF”ohos:operated_text_color=”$color:black”
selected_normal_text_margin_ratio Ratio of selected text margins to normal text margins A float Floating-point values can be set directly, or float floating-point resources can be referenced. The value must be greater than 0.0F. The default value is 1.0F. Ohos: selected_normal_text_margin_ratio = “0.5” ohos: selected_normal_text_margin_ratio = “$float: thewire”
selector_item_num The number of items displayed The integer types You can set integer values directly or refer to an INTEGER resource. ohos:selector_item_num=”10″ohos:selector_item_num=”$integer:num”
shader_color Shader color Color type You can set the color value directly or reference the color resource. ohos:shader_color=”#A8FFFFFF”ohos:shader_color=”$color:black”
top_line_element The top row of the selected item Element type Can directly configure the color value, also can reference color resources or reference media/graphic image resources. ohos:top_line_element=”#FFFFFFFF”ohos:top_line_element=”
c o l o r : b l a c k ” o h o s : t o p l i n e e l e m e n t = ” color:black”ohos:top_line_element=” media:media_src”ohos:top_line_element=”$graphic:graphic_src”
bottom_line_element The bottom line of the selected item Element type Can directly configure the color value, also can reference color resources or reference media/graphic image resources. ohos:bottom_line_element=”#FFFFFFFF”ohos:bottom_line_element=”
c o l o r : b l a c k ” o h o s : b o t t o m l i n e e l e m e n t = ” color:black”ohos:bottom_line_element=” media:media_src”ohos:bottom_line_element=”$graphic:graphic_src”
wheel_mode_enabled Select whether the wheel goes around Boolean type You can set true/false directly or refer to a Boolean resource. ohos:wheel_mode_enabled=”true”ohos:wheel_mode_enabled=”$boolean:true”

Use DatePicker

1. Create DatePicker in XML

<DatePicker
        ohos:id="$+id:date_pick"
        ohos:height="match_content"
        ohos:width="300vp"
        ohos:background_element="#22AA0000"
        >
Copy the code

Create a default DatePicker:

2. Get the current selected date, day/month/year, DatePicker defaults to the current date.

DatePicker DatePicker = (DatePicker) findComponentById(resourcetable.id_date_pick); int day = datePicker.getDayOfMonth(); int month = datePicker.getMonth(); int year = datePicker.getYear(); System.out.println("day:"+day+",month:"+month+",year:"+year);Copy the code

We can get information about the year, month and day:

3. Response date change event:

Add Text to the XML to show the selected date:

<Text
        ohos:id="$+id:text_date"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:hint="date"
        ohos:text_alignment="center"
        ohos:margin="10vp"
        ohos:padding="4vp"
        ohos:text_color="#AA0000"
        ohos:text_size="20fp">
Copy the code

Responding to a date change event in Java code:

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) {
                        // Formats the display string
                        selectedDate.setText(String.format("%02d/%02d/%4d", dayOfMonth, monthOfYear, year)); }});Copy the code

Date change response effect:

4. Set the current date

datePicker.updateDate(2021.8.8);
Copy the code

Set the current date effect:

5. Set the date range

To specify the date selection range for the DatePicker, set the min_date and max_date properties. The value is set to the Unix timestamp corresponding to the date.

Set the minimum date:

<DatePicker
    ...
    ohos:min_date="1623895868">
</DatePicker>
Copy the code

Or set it in code:

datePicker.setMinDate(1623895868);
Copy the code

Set the minimum date to 2021/06/17:

Set maximum date:

Set in XML:

<DatePicker
    ...
    ohos:max_date="1630339200">
</DatePicker>
Copy the code

Set in code:

datePicker.setMaxDate(1630339200);
Copy the code

Set maximum date to 2021/08/31:

Fixed year/month/day

Set in XML:

<DatePicker
    ...
    ohos:year_fixed="true">
</DatePicker>
Copy the code

Set in code:

datePicker.setYearFixed(true);
Copy the code

Third, style Settings

1. Text-related attributes

Sets the font size and color to be selected

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

Set the font size and color effect to be selected:

Sets the selected font size and color

Set in XML:

<DatePicker
    ...
    ohos:selected_text_color="#FF00FF"
    ohos:selected_text_size="20fp">
</DatePicker>
Copy the code

Set in code:

datePicker.setSelectedTextSize(40);
datePicker.setSelectedTextColor(new Color(Color.getIntColor("#FF00FF")));
Copy the code

Set the selected font size and color effect:

Sets the font color of the action item

Set in XML:

<DatePicker
    ...
    ohos:operated_text_color="#FFA500">
</DatePicker>
Copy the code

Set in code:

datePicker.setOperatedTextColor(new Color(Color.getIntColor("#FFA500")));
Copy the code

Sets the font color effect of the action item

2. Set the ratio of the selected text margin in DatePicker to the normal text margin

Set in XML:

<DatePicker
    ...
    ohos:selected_normal_text_margin_ratio="10">
</DatePicker>
Copy the code

Set in code:

datePicker.setSelectedNormalTextMarginRatio(10.0 f)
Copy the code

The effect drawing with the selected text margin and the normal text margin ratio set to 10:

3. Set the roller to go around

Set in XML:

<DatePicker
    ...
    ohos:wheel_mode_enabled="true">
</DatePicker>
Copy the code

Set in code:

datePicker.setWheelModeEnabled(true);
Copy the code

Rolling effect:

4. Set the border around the selected date

Set in XML:

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

Set in code:

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

Add the top and bottom border effect to the selected item:

5. Set the shader color

Set in XML:

<DatePicker
    ...
    ohos:shader_color="gray">
</DatePicker>
Copy the code

Set in code:

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

Set the shader color effect:

More:

1. Community: Hongmeng Bus www.harmonybus.net/

2. HarmonyBus