Modern, customizable Hijri date picker with Material3 styling — single, range and multi-date selection, text-input mode, locale-aware UI, selectable-date constraints, HijrahDate support.
[!CAUTION] This library is deprecated and has been moved to a new artifact:
com.abdulrahman-b.hijrahdatetime:hijrahdatetime-compose-pickers:2.0.0-alpha07Refer to the new Github Repository. Please migrate to the new artifact to continue receiving updates and new features.
Adjust base imports:
Change from: com.abdulrahman_b.hijridatepicker.*
To: com.abdulrahman_b.hijrahdatetime.pickers.*
Naming convention change:
Replace Hijri with Hijrah for consistency with the HijrahDate model. For example, HijriDatePicker -> HijrahDatePicker.
A modern and customizable Hijri Date Picker for Compose Multiplatform. Inspired by the Material3 Date Picker.
The Hijri Date Picker allows users to select dates in the Hijri calendar with ease. It's designed to be simple, flexible, and customizable, making it easy for developers to integrate into their apps. This library fills the gap for modern, high-quality date pickers with Hijri calendar support, providing a seamless experience for Muslim users.
Here are examples of the Hijri Date Picker in action:
Date Picker (Arabic/English):
Date Range Picker (Arabic/English):
Text Input Variants (Arabic/English):
Note: The multi-date picker uses the same visual style as the single-date picker, but allows selecting multiple, non-contiguous Hijri dates.
This library is built with Compose Multiplatform and supports the following targets:
The library provides three main components:
HijriDatePicker – Single date selection.HijriDateRangePicker – Range selection.HijriMultiDatePicker – Multiple individual dates.Here’s how to set up the HijriDatePicker for selecting a single date:
Here’s an example of how to implement a HijriDateRangePicker for selecting a date range:
Here’s an example of how to implement a HijriMultiDatePicker for selecting multiple different dates:
Step 1: Add the Maven Central repository (if not present):
repositories {
mavenCentral()
}
Step 2: Add the library dependency:
dependencies {
implementation("com.abdulrahman-b.hijridatepicker:hijridatepicker:2.0.0-alpha01")
}
kotlin {
commonMain.dependencies {
implementation("com.abdulrahman-b.hijridatepicker:hijridatepicker:2.0.0-alpha01")
}
}
If you find this project helpful, please support me! Donations are greatly appreciated:
Thank you for your contributions!
fun DatePickerExample() {
val datePickerState = rememberHijriDatePickerState(
initialSelectedDate = Clock.System.now.toHijrahDateTime(TimeZone.currentSystemDefault()).date, // Default selected date (optional)
selectableDates = HijriSelectableDates { date ->
// Allow all dates, but customize this to restrict selectable dates
true
},
initialDisplayMode = DisplayMode.Picker // Start in calendar view (default is Picker)
)
var selectDateDialogOpen by remember { mutableStateOf(false) }
// Render the HijriDatePicker inside a dialog when `selectDateDialogOpen` is true
if (selectDateDialogOpen) {
DatePickerDialog(
onDismissRequest = { selectDateDialogOpen = false },
confirmButton = {
TextButton(
onClick = {
datePickerState.selectedDate?.let { date: HijrahDate -> //HijrahDate from my other library (HijrahDateTime)
// Do something with the selected date
}
selectDateDialogOpen = false
},
content = { Text(stringResource(Res.string.ok)) }
)
},
) {
HijriDatePicker(
state = datePickerState,
/* You can customize some appearance properties */
)
}
}
/*
* Other code, You can show the dialog by setting `selectDateDialogOpen` to true on a button click or any other event
*/
}
fun DateRangePickerExample() {
var selectRangeDialogOpen by remember { mutableStateOf(false) }
// State to manage the selected Hijri date range
val rangePickerState = rememberHijriDateRangePickerState(
initialSelectedRange = null, // Optional: Pre-select a date range
selectableDates = HijriSelectableDates { date ->
// Optional: Implement your own selectable date logic
true // Select all dates for the range
},
//Other params ...
)
// Render the HijriDateRangePicker inside a dialog when `selectRangeDialogOpen` is true
if (selectDateDialogOpen) {
DatePickerDialog(
onDismissRequest = { selectDateDialogOpen = false },
confirmButton = {
TextButton(
onClick = {
val selectedRange: SelectedDateRange? = datePickerState.getSelectedDateRange()
selectedRange?.let { range: SelectedDateRange ->
//Do something with the selected date range
}
selectDateDialogOpen = false
},
content = { Text(stringResource(Res.string.ok)) }
)
},
) {
HijriDateRangePicker(state = datePickerState /* You can customize some appearance properties */)
}
}
/*
* Other code, You can show the dialog by setting `selectDateDialogOpen` to true on a button click or any other event
*/
}
fun MultiDatePickerExample() {
var selectMultiDatesDialogOpen by remember { mutableStateOf(false) }
// State to manage the selected Hijri dates (multi-select)
val multiDatePickerState = rememberHijriMultiDatePickerState(
initialSelectedDates = emptySet(), // Optional: pre-select multiple dates
selectableDates = HijriSelectableDates { date ->
// Optional: Implement your own selectable date logic
true // Allow all dates to be selected
},
// Other params ...
)
// Render the HijriMultiDatePicker inside a dialog when `selectMultiDatesDialogOpen` is true
if (selectMultiDatesDialogOpen) {
DatePickerDialog(
onDismissRequest = { selectMultiDatesDialogOpen = false },
confirmButton = {
TextButton(
onClick = {
val selectedDates = multiDatePickerState.selectedDates
// Do something with the selected dates (e.g., save them in state or DB)
selectMultiDatesDialogOpen = false
},
content = { Text(stringResource(Res.string.ok)) }
)
}
) {
HijriMultiDatePicker(
state = multiDatePickerState
// You can customize some appearance properties here if needed
)
}
}
/*
* Other code: You can show the dialog by setting `selectMultiDatesDialogOpen` to true
* on a button click or any other event, for example:
*
* Button(onClick = { selectMultiDatesDialogOpen = true }) {
* Text(stringResource(Res.string.select_dates))
* }
*/
}
Surfaced from shared tags and platforms — no rankings paid for.