This article demonstrates an age calculation implementation in HarmonyOS NEXT, featuring comprehensive date information display including Gregorian/Lunar calendar conversions, zodiac signs, and astronomical statistics.
Key Features
- Dual calendar system support (Gregorian & Lunar)
- Age calculation (Real age & Nominal age)
- Zodiac and Chinese zodiac display
- Next birthday countdown
- Life duration statistics (months/days/hours)
- Seasonal determination
- Festival recognition
Implementation Overview
1. Core Data Structure
class Info {
sYear: number = 0 // Gregorian year
sMonth: number = 0 // Gregorian month
sDay: number = 0 // Gregorian day
week: number = 0 // Weekday index (0-6)
weekZH: string = "" // Weekday in Chinese
date: string = "" // Formatted date string
zodiac: string = "" // Western zodiac sign
lYear: number = 0 // Lunar year
lMonth: number = 0 // Lunar month
lDay: number = 0 // Lunar day
isLeap: boolean = false // Leap month flag
lMonthZH: string = "" // Lunar month in Chinese
lDayZH: string = "" // Lunar day in Chinese
gzYearZH: string = "" // Heavenly stem/Earthly branch year
gzMonthZH: string = "" // Heavenly stem/Earthly branch month
gzDayZH: string = "" // Heavenly stem/Earthly branch day
animal: string = "" // Chinese zodiac animal
term: string = "" // Solar term
festival: string = "" // Festival information
}
2. State Management
@Entry
@Component
struct AgeCalculatorPage {
@State season: string = '-'
@State realAge: number = 0
@State lunarAge: number = 0
@State festival: string = '-'
@State weekday: string = '-'
@State isLunar: boolean = false
@State zodiac: string = '-'
@State animal: string = '-'
@State daysToNextGregorianBirthday: number = 0
@State daysToNextLunarBirthday: number = 0
@State dayOfWeekNextGregorianBirthday: number = 0
@State dayOfWeekNextLunarBirthday: number = 0
@State totalMonthsAlive: number = 0
@State totalDaysAlive: number = 0
@State totalHoursAlive: number = 0
@State gregorianBirthDate: string = '-'
@State lunarBirthDate: string = '-'
private selectedBirthDate: Date = new Date('1989-01-17')
private weekdays: string[] = ['Sunday', 'Monday', 'Tuesday', 'Wednesday',
'Thursday', 'Friday', 'Saturday']
}
3. Core Algorithms
Age Calculation
private calculateRealAge(birthInfo: Info) {
const today = new Date()
let realAge = today.getFullYear() - birthInfo.sYear
if (today.getMonth() < birthInfo.sMonth - 1 ||
(today.getMonth() === birthInfo.sMonth - 1 &&
today.getDate() < birthInfo.sDay)) {
realAge--
}
this.realAge = realAge
}
Lunar Age Calculation
private calculateLunarAge() {
const today = new Date()
const lunarNewYear = new Date(today.getFullYear(), 1, 22)
let lunarAge = this.realAge + 1
if (today < lunarNewYear) {
lunarAge--
}
this.lunarAge = lunarAge
}
Life Duration Calculation
private calculateEarthTime(birthDate: Date) {
const currentDate = new Date()
const diff = currentDate.getTime() - birthDate.getTime()
this.totalMonthsAlive = Math.floor(diff / (1000 * 60 * 60 * 24 * 30.44))
this.totalDaysAlive = Math.floor(diff / (1000 * 60 * 60 * 24))
this.totalHoursAlive = Math.floor(diff / (1000 * 60 * 60))
}
4. UI Components
build() {
Column() {
Text("Age Calculator")
.width('100%')
.height(44)
.backgroundColor(Color.Orange)
.textAlign(TextAlign.Center)
.fontColor(Color.White)
Scroll() {
// UI layout implementation
// Contains multiple Row/Column components for data display
// Uses border styling and flexible layout
}
DatePicker({
start: new Date('1900-1-1'),
end: new Date('2100-1-1'),
selected: this.selectedBirthDate
})
.onDateChange((value: Date) => {
// Handle date change events
})
}
}
Technical Highlights
Dual Calendar Integration
- Utilizes
calendar-toollibrary for lunar date conversions - Supports bidirectional conversion between Gregorian and Lunar dates
- Utilizes
Reactive UI
- Uses @State decorators for automatic UI updates
- Implements complex layout with Scroll/Row/Column components
Performance Optimization
- Memoization of date calculations
- Efficient date difference algorithms
Localization Support
- Chinese cultural elements (Zodiac, Stems-Branches)
- Localized date formatting
Conclusion
This implementation demonstrates HarmonyOS NEXT's capabilities in handling complex date calculations and cultural-specific requirements. The component-based architecture and reactive programming model enable efficient development of feature-rich applications.