​

Guide language: hello, everyone, I am your friend Peng ge, Hongmeng development has been half a year, to understand the powerful hongmeng, also encountered some defects of Hongmeng, but a new system development is really cool, follow up to talk about feelings.

Student: Does Hongmeng have a good time selector?

Coder: Of course there is, Android has the hongmui certainly have.

Student: Is development complicated? As a developer, it’s better to have system support!

Coder: The date picker was developed with only one component.

Application scenario: Develop an information submission page. On the page, collect information and select a date to submit the information.

All right, let’s start with DatePicker……

​

Let’s start today’s article, as usual, by saying the following:

1. Introduction 2. Properties used 3

Introduction to the

DatePicker allows users to select dates. You can set the date selection format, you can set the style, effect is as follows:

​

Attributes used

The common XML attribute of DatePicker is inherited from StackLayout

In actual combat

1, create a project to add the default DatePicker

<DatePicker    
ohos:id="$+id:date_pick"    
ohos:height="match_content"    
ohos:width="match_parent"    
ohos:text_size="16fp"    
/>
Copy the code

The default date picker, which is added directly to the XML configuration property to display the effect, is in the format of year month day.

​

2. Set the minimum and maximum value of dates

<DatePicker  
ohos:id="$+id:date_pick1"  
ohos:height="match_content"  
ohos:width="match_parent"  
ohos:text_size="16fp"  
ohos:min_date="1627747200"  
ohos:max_date="1630339200"  >
</DatePicker>
Copy the code

Ohos :max_date=”1630339200″ // Set the timestamp of the maximum date

3. Set a fixed year, month and day

<DatePicker  
ohos:id="$+id:date_pick2"  
ohos:height="match_content"  
ohos:width="match_parent"  
ohos:text_size="16fp"  
ohos:year_fixed="true"  
ohos:month_fixed="true"  
ohos:day_fixed="true"  
>
</DatePicker>
Copy the code

1, fixed year month day, fixed current date year month day, Ohos: Month_FIXED =”true” // Fixed year OHOS: Month_fixed =”true” // Fixed month oHOS :day_fixed=”true” // Fixed day

​

4. Set the date picker style

<DatePicker ohos:id="$+id:date_pick3" ohos:height="match_content" ohos:width="match_parent" ohos:text_size="16fp" Ohos :normal_text_color="#000000" // Set the color to be selected oHOs :normal_text_size="20fp" // Set the font size to be selected Ohos :selected_text_color="#098988" // Set selected font color oHOs :selected_text_size="25fp" // Set selected font size Ohos :operated_text_color="#776655" oHOs :selected_normal_text_margin_ratio="5" // Ohos :wheel_mode_enabled="true" // Sets the scroll wheel to go around oHOs :top_line_element="#9370DB" // Sets the top border of the selected date Ohos :bottom_line_element="#9370DB" oHOs :shader_color="gray" // Set shader color > </DatePicker>Copy the code

5. Set the current date

datePicker.updateDate(2021, 8, 8); // Set the current date

6. Get the date picker’s selection date

datePicker.setValueChangedListener( new DatePicker.ValueChangedListener() { @Override public void OnValueChanged (DatePicker DatePicker, int year, int monthOfYear, int dayOfMonth) {selectedDate.settext (" select date: "+String.format("%02d/%02d/%4d", dayOfMonth, monthOfYear, year)); }});Copy the code

Complete code:

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> <Text ohos:height="match_content" Ohos: width = "match_parent" ohos: margin = "4 vp" ohos: text_alignment = "center | left" ohos: text_size = "16 fp ohos: text =" date selector, /> <DatePicker ohos:id="$+id:date_pick" ohos:height="match_content" ohos:width="match_parent" ohos:text_size="16fp" /> <Text ohos:id="$+id:text_date" ohos:height="match_content" ohos:width="match_parent" ohos:hint="date" ohos:margin="4vp" ohos:text_alignment="center|left" ohos:text_size="16fp"> </Text> <Text ohos:height="match_content" ohos:width="match_parent" ohos:margin="8vp" ohos:text_alignment="center|left" Ohos :text_size="16fp" oHOs :multiple_lines="true" oHOs :text=" date selector, /> <DatePicker ohos:id="$+id:date_pick1" ohos:height="match_content" ohos:width="match_parent" ohos:text_size="16fp" ohos:min_date="1627747200" ohos:max_date="1630339200" > </DatePicker> <Text ohos:height="match_content" ohos:width="match_parent" ohos:margin="4vp" ohos:text_alignment="center|left" Ohos :text_size="16fp" oHOs :multiple_lines="true" oHOs :text=" date selector, <DatePicker ohos:id="$+id:date_pick2" ohos:height="match_content" ohos:width="match_parent" ohos:text_size="16fp" ohos:year_fixed="true" ohos:month_fixed="true" ohos:day_fixed="true" > </DatePicker> <Text ohos:height="match_content" ohos:width="match_parent" ohos:margin="4vp" ohos:text_alignment="center|left" Ohos :text_size="16fp" oHOs :multiple_lines="true" oHOs :text=" date selector, /> <DatePicker ohos:id="$+id:date_pick3" ohos:height="match_content" ohos:width="match_parent" ohos:text_size="16fp" ohos:normal_text_color="#000000" ohos:normal_text_size="20fp" ohos:selected_text_color="#098988" ohos:selected_text_size="25fp" ohos:operated_text_color="#776655" ohos:selected_normal_text_margin_ratio="5" ohos:wheel_mode_enabled="true" ohos:top_line_element="#9370DB" ohos:bottom_line_element="#9370DB" ohos:shader_color="gray" > </DatePicker> </DirectionalLayout>Copy the code

package com.example.datepicker.slice; import com.example.datepicker.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.DatePicker; import ohos.agp.components.Text; public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); DatePicker DatePicker = (DatePicker) findComponentById(resourcetable.id_date_pick); int day = datePicker.getDayOfMonth(); int month = datePicker.getMonth(); int year = datePicker.getYear(); // datePicker.updateDate(2021, 8, 8); // Set the current date. 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 (" select date: "+String.format("%02d/%02d/%4d", dayOfMonth, monthOfYear, year)); }}); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); }}Copy the code

Old rules code can not be less, otherwise small partners should say I stingy. Source: gitee.com/codegrowth/…

Original is not easy, useful attention. I’ll give you a triple if I help you. Thanks for your support.

Feel good friends, remember to help me like and attention yo, pen xin pen xin ~**

Author: code worker

If you have any questions, please leave a message or send a private message. You can search the public number on wechat: Programmer chat programming