Composable Date Picker / Time Picker in Android Jetpack Compose

If you are wondering how to add a Composable Date Picker / Time Picker in your Android Jetpack Compose project you have reached the right place. Here I am going to show you how you can simply add a dependency and get a highly customizable Date/Time Picker.

Lets Start,

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

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

Note* In newer projects you can add it in settings.gradle as follows

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

Step 2. Add the dependency

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

Great!!! now lets add the Date/Time Picker in you layout.

To add a date picker just add this composable in your layout

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

Similarly to add a time picker add following.

TimePicker(onTimeSelected = { hour, minute ->

})

Voilà you have done it, it’s that simple.

If you like the default theme and settings, wonderful… or you can continue reading and explore how it can be customized to align with your apps theme and find out some feature that you may like.

You can customize the theme of the Date Picker appearance as follows

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

you can pass in the configuration object as a parameter and modify about 20 different properties to make it fit for your application's theme.

Also if by any chance you want the user to select a date between some range, you can pass in a selection limiter as a parameter.

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

Similarly You can customize the theme of the Time Picker as follows

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

Moreover you can specify is24Hour and Minute Gap as follows.

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

To know more and find out the latest version of library checkout this git repository: https://github.com/vsnappy1/ComposeDatePicker

I hope that this tutorial has been beneficial to you.

Thank you, enjoy coding!