Skip to content

Latest commit

 

History

History
148 lines (123 loc) · 4.69 KB

README.md

File metadata and controls

148 lines (123 loc) · 4.69 KB
Raw

ComposeDatePicker

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

API

date_time_picker.mp4

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

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

Step 2. Add the dependency

dependencies {
    ..
    implementation 'com.github.vsnappy1:ComposeDatePicker:2.2.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 = DatePickerDate(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 = DatePickerDate(year = 2023, month = 4, day = 7),
        toDate = DatePickerDate(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 = TimePickerTime(
        hour = 12,
        minute = 45
    )
)

Set Is24Hour & MinuteGap

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

The interval between consecutive items in the minute list is determined by the minuteGap parameter. When minuteGap is set to MinuteGap.FIVE, the minutes in the time picker will be displayed in increments of 5, such as 00, 05, 10,..., 55. The default value for minuteGap is MinuteGap.ONE, which means the minutes will be displayed in sequential order from 00 to 59.

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.