Lightweight, customizable Hijri date picker offering Material 3 styling, full localization (Arabic numerals and RTL), hoistable state management, themeable colors/strings, and customizable year range.
A simple, lightweight, and customizable Hijri (Islamic) date picker for Compose Multiplatform (Android, iOS, and Desktop).
Here is the date picker shown on Android in both light and dark modes, for both English (LTR) and Arabic (RTL) locales.
| English (Light Mode) | English (Dark Mode) |
|---|---|
 |
This library is published to Maven Central.
Add the dependency to your commonMain source set in your build.gradle.kts file:
// In your build.gradle.kts (in commonMain)
dependencies {
implementation("io.github.helmy2:hijri-date-picker:0.0.2")
}
The HijriDatePicker is a content composable. It's designed to be placed inside a container like DatePickerDialog (from Material 3) or a BottomSheet.
Here is a complete example of how to use it inside a DatePickerDialog:
You can customize the picker by passing parameters to rememberHijriDatePickerState and HijriDatePicker.
val state = rememberHijriDatePickerState(
// Set an initial selected date
initialDate = HijriCalendar.of(1447, 9, 1), // 1 Ramadan 1447
// Provide a custom range of years for the year picker
yearRange = 1400..1450
)
// Get the default colors and strings
val customColors = HijriDatePickerDefaults.colors().copy(
selectedDayContainerColor = Color(),
onSelectedDayContainerColor = Color.White
)
customStrings = HijriDatePickerDefaults.strings().copy(
selectDateTitle =
)
HijriDatePicker(
state = state,
colors = customColors,
strings = customStrings
)
Our goal is to bring the full functionality of the Material 3 Date Picker to the Hijri calendar system.
✅ Single Date Selection
✅ Calendar View (Month & Year)
⏳ Implement a for selecting a start and end date.
This library is licensed under the Apache License 2.0 License.
 |
| Arabic (Light Mode) | Arabic (Dark Mode) |
 |  |
Multiplatform: Works seamlessly on Android, iOS, and Desktop (JVM).
Material 3 Design: A clean, modern UI that fits perfectly with M3 themes.
Lightweight & Hoistable API: Uses a HijriDatePickerState for easy state management.
Full Localization & Theming:
Month/day names and numbers (٠١٢٣) are automatically localized.
Layout automatically switches to RTL for Arabic.
Customizable Colors: All colors can be themed via HijriDatePickerDefaults.colors().
Customizable Strings: All text can be overridden for custom i18n via HijriDatePickerDefaults.strings().
Flexible: Allows you to set a custom range of years for the year picker.
var showPicker by remember { mutableStateOf(false) }
var selectedDate by remember { mutableStateOf<HijrahDate?>(null) }
// 1. Create and remember the state for the picker
val datePickerState = rememberHijriDatePickerState()
// 2. A button to show the dialog
Button(onClick = { showPicker = true }) {
Text("Show Hijri Date Picker")
}
// 3. Show the dialog when showPicker is true
if (showPicker) {
DatePickerDialog(
onDismissRequest = { showPicker = false },
confirmButton = {
TextButton(
onClick = {
// 4. Get the date from the state and close the dialog
selectedDate = datePickerState.selectedDate
showPicker = false
}
) {
Text("OK")
}
},
dismissButton = {
TextButton(onClick = { showPicker = false }) {
Text("Cancel")
}
}
) {
// 5. Place the HijriDatePicker as the dialog's content
HijriDatePicker(state = datePickerState)
}
}
✅ Android
✅ Desktop (JVM)
✅ iOS
HijriDateRangePicker⏳ Date Input Mode: Add a toggle to switch from the calendar grid to text fields for manual date entry.
⏳ Web (JS) Support: Complete the KMP targets by adding a web canvas implementation.
⏳ Advanced Validation: Add SelectableDates support to disable specific dates or ranges (e.g., weekends).
Surfaced from shared tags and platforms — no rankings paid for.