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)
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.

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:

  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)
      }
  }

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(0xFF800000), // Dark red
    onSelectedDayContainerColor = Color.White
)

val customStrings = HijriDatePickerDefaults.strings().copy(
    selectDateTitle = "Select Hijri Date"
)

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.

• [x] ✅ Single Date Selection

• [x] ✅ Calendar View (Month & Year)

• [x] ✅ Android

• [x] ✅ Desktop (JVM)

• [x] ✅ iOS

• [ ] ⏳ Date Range Selection: Implement a HijriDateRangePicker for selecting a start and end date.

• [ ] ⏳ 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).

This library is licensed under the Apache License 2.0 License.