DOCSEARCHbyAlgolia
Submit Docs

WheelPickerCompose

repository·master·Indexed 20 days ago

https://github.com/commandiron/wheelpickercompose

A Jetpack Compose library providing wheel-style pickers for selecting dates, times, or both. It includes WheelDateTimePicker, WheelDatePicker, and WheelTimePicker composables with support for custom date-time ranges, 12/24-hour formats, and configurable visual styles.

Tokens
1.2K
Snippets
3
Records
3
Agent score
20%

What's inside WheelPickerCompose

  1. Setup WheelPickerCompose via JitPack

    master

    To use WheelPickerCompose in your Android Jetpack Compose project, follow these steps:

    1. Add the JitPack repository to your settings.gradle file within the dependencyResolutionManagement block:

    2. Sync your project with Gradle files.

    3. Add the library dependency to your module-level build.gradle file:

    4. (Optional) If your project targets API levels below 26, enable core library desugaring to support modern Java 8+ APIs (like LocalDateTime) used by the picker.

    // 1. settings.gradle
dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}

// 2. build.gradle (dependencies)
dependencies {
    implementation 'com.github.commandiron:WheelPickerCompose:1.1.11'
}

// 3. build.gradle (for API < 26)
android {
    compileOptions {
        coreLibraryDesugaringEnabled true
    }
}

dependencies {
    coreLibraryDesugaring "com.android.tools:desugar_jdk_libs:1.1.6"
}

  2. Use WheelPickerCompose pickers

    master

    WheelPickerCompose provides three main composable pickers for selecting dates and times. Each picker accepts a lambda that provides the currently selected/snapped value.

    • WheelDateTimePicker { snappedDateTime -> ... }: Selects both date and time.
    • WheelDatePicker { snappedDate -> ... }: Selects only the date.
    • WheelTimePicker { snappedTime -> ... }: Selects only the time (uses 24-hour format by default).
    • WheelTimePicker(timeFormat = TimeFormat.AM_PM) { snappedTime -> ... }: Selects time using the AM/PM format.
    // Date and Time Picker
WheelDateTimePicker { snappedDateTime -> /* use LocalDateTime */ }

// Date Picker
WheelDatePicker { snappedDate -> /* use LocalDate */ }

// Time Picker (24h)
WheelTimePicker { snappedTime -> /* use LocalTime */ }

// Time Picker (AM/PM)
WheelTimePicker(timeFormat = TimeFormat.AM_PM) { snappedTime -> /* use LocalTime */ }

  3. Configure WheelDateTimePicker options

    master

    The WheelDateTimePicker composable is highly configurable. You can define the range of selectable dates, the visual size, text styles, and the appearance of the selector component using WheelPickerDefaults.selectorProperties.

    Key parameters include:

    • startDateTime: The earliest selectable date/time.
    • minDateTime: The minimum allowed value.
    • maxDateTime: The maximum allowed value.
    • timeFormat: Use TimeFormat.AM_PM for 12-hour format.
    • size: A DpSize defining the picker dimensions.
    • rowCount: Number of visible rows.
    • textStyle: The TextStyle for the picker text.
    • textColor: The color of the picker text.
    • selectorProperties: Configuration for the selection highlight/shape/border.
    WheelDateTimePicker(
    startDateTime = LocalDateTime.of(2025, 10, 20, 5, 30),
    minDateTime = LocalDateTime.now(),
    maxDateTime = LocalDateTime.of(2025, 10, 20, 5, 30),
    timeFormat = TimeFormat.AM_PM,
    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 -> 
    // Handle selection
}