HarmonyOS Next — Date and Calendar Components

In HarmonyOS application development, date and calendar components are an indispensable part of user interaction. The HarmonyOS system provides rich components and interfaces to meet developers’ needs for date and calendar functions.

1. Core Functions of Date and Calendar Components
The HarmonyOS system offers multiple date and calendar-related components, supporting the following functions:

Date Selection: Users can select specific dates.
Time Selection: Users can select specific times (hours and minutes).
Calendar View: Displays a calendar interface, supporting operations such as month switching and date clicking.
Internationalization Support: Supports date display in multiple languages and regional formats.
2. Common Date and Calendar Components
(1) DatePicker Component
Function: Used for date selection.
Application Scenarios: Birthday selection, date booking, etc.
Key Attributes:
selected: The currently selected date.
start and end: The range of date selection.
onDateChange: Callback event when the date changes.

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

    build() {
        Column() {
            DatePicker({
                selected: this.selectedDate,
                start: new Date('2020-01-01'),
                end: new Date('2030-12-31')
            }).onDateChange((value: Date) => {
                this.selectedDate = value;
                console.info('Selected date: ' + this.selectedDate.toString());
            });
        }
    }
}

(2) TimePicker Component

Function: Used for time selection.
Application Scenarios: Setting alarms, scheduling appointments, etc.
Key Attributes:
selected: The currently selected time.
useMilitaryTime: Whether to use 24-hour format.
onChange: Callback event when the time changes.

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

    build() {
        Column() {
            TimePicker({
                selected: this.selectedTime,
                useMilitaryTime: false
            }).onChange((value: TimePickerResult) => {
                this.selectedTime.setHours(value.hour, value.minute);
                console.info('Selected time: ' + this.selectedTime.toString());
            });
        }
    }
}

(3) Calendar View Component

Function: Displays a complete calendar interface, supporting month switching and date clicking.
Implementation Methods:
Implement the calendar view through custom components.
Quickly integrate calendar functions using third-party open-source libraries (such as CalendarView).
Key Functions:
Display dates of the current month.
Support switching to the previous month and the next month.
Trigger events when dates are clicked.

1. Custom Calendar Components If the system-provided components cannot meet requirements, developers can customize calendar components. The following are the key steps for customizing calendar components:

Designing the Calendar Layout
Use the Grid or GridItem component to build the grid layout of the calendar.
Each grid item represents a day, displaying the date and status.
Handling Date Logic
Dynamically generate date data based on the current month.
Calculate which day of the week the first day of each month falls on and the number of days in each month.
Adding Interaction Functions
Trigger events when dates are clicked, such as displaying details or navigating to other pages.
Support month switching.

@Entry
@Component
struct CustomCalendar {
    @State currentDate: Date = new Date();

    build() {
        Column() {

            Text(`${this.currentDate.getFullYear()}${this.currentDate.getMonth() + 1}`)
                .fontSize(20)
                .margin({ bottom: 10 });


            Row() {
                ['7', '1', '2', '3', '4', '5', '6'].forEach(day => {
                    Text(day).width('14%').textAlign(TextAlign.Center);
                });
            }.margin({ bottom: 5 });

            Grid({ columns: 7, rows: 6 }) {

                for (let i = 0; i < 42; i++) {
                    let date = this.getDateForIndex(i);
                    GridItem() {
                        if (date) {
                            Text(date.getDate().toString())
                                .width('100%')
                                .height('100%')
                                .textAlign(TextAlign.Center)
                                .onClick(() => {
                                    console.info('Selected date: ' + date.toString());
                                });
                        }
                    };
                }
            }
        }
    }


    getDateForIndex(index: number): Date | null {
        let firstDayOfMonth = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);
        let dayOfWeek = firstDayOfMonth.getDay();
        let dateIndex = index - dayOfWeek + 1;

        if (dateIndex < 1 || dateIndex > this.getDaysInMonth()) {
            return null; 
        }

        return new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), dateIndex);
    }


    getDaysInMonth(): number {
        return new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 0).getDate();
    }
}