Skip to content

Latest commit

 

History

History
143 lines (120 loc) · 4.32 KB

README.md

File metadata and controls

143 lines (120 loc) · 4.32 KB

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.