Skip to content

An Android jetpack compose library for elegant Date and Time Picker.

License

Notifications You must be signed in to change notification settings

vsnappy1/ComposeDatePicker

Repository files navigation

ComposeDatePicker

An Android Jetpack Compose library that provides a Date & Time Picker functionality.

API

Setup

Step 1. Add the JitPack repository to your build file (Add it in your root build.gradle at the end of repositories)

allprojects {
    repositories {
        ..
        maven { url 'https://jitpack.io' }
    }
}

Step 2. Add the dependency

dependencies {
    ..
    implementation 'com.github.vsnappy1:ComposeDatePicker:2.0.0'
}

Usage

Adding a date picker or time picker is incredibly easy, requiring just two lines of code.

DatePicker(onDateSelected = { year, month, day ->
    
})

DatePicker Gif Screenshot_datepicker_1 (1)

TimePicker(onTimeSelected = { hour, minute ->

})

TimePicker Gif Screenshot_timepicker

Customization

The date and time picker offer extensive customization options, allowing users to modify the TextStyle, Color, Size, Shape, and other elements to align with their preferred theme.

Date Picker


Set Custom Date

DatePicker(
    onDateSelected = { year, month, day ->
    },
    date = ComposeDatePickerDate(year = 2023, month = 0, day = 5)
)

Please note that the year should be within a range of <current_year> ± 100 (inclusive). Additionally, for the month, please keep in mind that 0 represents January, while 11 corresponds to December.

Set Selection Limit

DatePicker(
    onDateSelected = { year, month, day ->
    },
    selectionLimiter = SelectionLimiter(
        fromDate = ComposeDatePickerDate(year = 2023, month = 4, day = 7),
        toDate = ComposeDatePickerDate(year = 2023, month = 4, day = 21)
    )
)

Customize the Appearance

DatePicker(
    modifier = Modifier.padding(16.dp),
    onDateSelected = { year, month, day ->
    },
    configuration = DatePickerConfiguration.Builder()
        .height(height = 300.dp)
        .dateTextStyle(DefaultDatePickerConfig.dateTextStyle.copy(color = Color(0xFF333333)))
        .selectedDateTextStyle(textStyle = TextStyle(Color(0xFFFFFFFF)))
        .selectedDateBackgroundColor(color = Color(0xFF64DD17))
        .build()
)

In addition to dateTextStyle, selectedDateTextStyle, and selectedDateBackgroundColor, there are a total of 20 attributes available for users to customize the appearance of the date picker.


Time Picker


Set Custom Time

TimePicker(
    onTimeSelected = { hour, minute ->
    },
    time = ComposeTimePickerTime(
        hour = 12,
        minute = 45
    )
)

Set Is24Hour & MinuteGap

TimePicker(
    onTimeSelected = { hour, minute ->
    },
    is24Hour = true,
    minuteGap = MinuteGap.FIVE
)

The minuteGap parameter determines the interval between consecutive items in the list. For example, if set to MinuteGap.FIVE, the minutes in the time picker will be displayed in the order 00, 05, 10,..., 60.

Customize the Appearance

TimePicker(
    modifier = Modifier
        .padding(16.dp)
        .background(Color(0xFF1B5E20), RoundedCornerShape(8.dp)),
    onTimeSelected = { hour, minute ->
    },
    configuration = TimePickerConfiguration.Builder()
        .numberOfTimeRowsDisplayed(count = 5)
        .selectedTimeScaleFactor(scaleFactor = 1.4f)
        .build()
)

There are a total of 8 attributes available for users to customize the appearance of the time picker.

Troubleshot

  • If multiple date/time pickers are used, a unique id parameter should be included in the function call for each composable.

  • When adjusting the height of a date/time picker, it is recommended to use TimePickerConfiguration.Builder().height() instead of Modifier.height() to ensure smooth rendering.

About

An Android jetpack compose library for elegant Date and Time Picker.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages