compose-datetime-wheel-picker

Customizable wheel pickers enable interactive date, time, and datetime selection with a simple implementation interface and various formatting and styling options.

#ui
#design-system
#datepicker
#compose-ui
#compose-multiplatform

Suggest an edit

Android JVMJVMKotlin/NativeWasmJS

GitHub stars0

Authorsduonglkh

Open issues0

LicenseApache License 2.0

Creation date6 months ago

Last activity6 months ago

Latest release1.0.2 (6 months ago)

GitHub repository Wiki page

datetime-wheel-picker (work-in-progress 👷🔧️👷‍♀️⛏)

Compose Multiplatform datetime picker implementation featuring customizable wheel pickers for date, time, and datetime selection.

Picker	Usage
	`WheelDateTimePicker { snappedDateTime -> }`
	`WheelDatePicker { snappedDate -> }`
	`WheelTimePicker { snappedTime -> }`
	`WheelTimePicker(timeFormatter = timeFormatter(timeFormat = TimeFormat.AM_PM)) { snappedTime -> }`

Features

WheelDateTimePicker(
  startDateTime = LocalDateTime(
    year = 2025,
    month = 10,
    day = 20,
    hour = 5,
    minute = 30
  ),
  minDateTime = Clock.System
    .now()
    .toLocalDateTime(TimeZone.currentSystemDefault()),
  maxDateTime = LocalDateTime(
    year = 2025,
    month = 10,
    day = 20,
    hour = 5,
    minute = 30
  ),
  dateFormatter = dateFormatter(
    locale = Locale.current, 
    monthDisplayStyle = MonthDisplayStyle.SHORT,
    cjkSuffixConfig = CjkSuffixConfig.HideAll
  ),
  timeFormatter = timeFormatter(
    timeFormat = TimeFormat.HOUR_24
  ),
  size = DpSize(200.dp, 100.dp),
  rowCount = 5,
  textStyle = MaterialTheme.typography.titleSmall,
  textColor = Color(0xFFffc300),
  selectorProperties = WheelPickerDefaults.selectorProperties(
    enabled = true,
    shape = RoundedCornerShape(0.dp),
    color = Color(0xFFf1faee).copy(alpha = 0.2f),
    border = BorderStroke(2.dp, Color(0xFFf1faee))
  )
) { snappedDateTime -> }

Setup

datetime-wheel-picker has multiple active versions. The higher one uses the latest versions for Compose, while the others use only stable versions. Choose the one that matches your Compose version, considering this table:

Compose Version	datetime-wheel-picker Version
Compose 1.7
Compose 1.8
Compose 1.9

Add the Maven Central repository if it is not already there:

repositories {
  mavenCentral()
}

In Compose multiplatform projects, add a dependency to the commonMain source set dependencies:

kotlin {
  sourceSets {
    val commonMain by getting {
      dependencies {
        implementation("io.github.darkokoa:datetime-wheel-picker:<version>")
        implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.7.1")
      }
    }
  }
}

To use the library in a single-platform project (such as Android project), add a dependency to the dependencies block:

dependencies {
  implementation("io.github.darkokoa:datetime-wheel-picker:<version>")
  implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.7.1")
}

If your minimum Android platform's API level (minSdk) < 26, please enable Desugaring like this:

compileOptions {
  isCoreLibraryDesugaringEnabled = true
}

//...

dependencies {
  coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.1.5")
}

License

Released under the Apache License, Version 2.0.

Thx

WheelPickerCompose