Easy Date Picker

Easy Date Picker is a Kotlin Multiplatform library for selecting date and time in your Android, iOS and Desktop App. It offers a customizable UI to use in your multiplatform projects.

Installation

Add the dependency to your build.gradle.kts file:

commonMain.dependencies {
    implementation("network.chaintech:kmp-date-time-picker:1.0.7")
}

Usage

WheelDatePickerView

A composable for selecting dates using a wheel picker.

Screenshots

       

WheelDatePickerView(
    modifier: Modifier = Modifier,
    showDatePicker: Boolean = false,
    title: String = "Due Date",
    doneLabel: String = "Done",
    titleStyle: TextStyle = LocalTextStyle.current,
    doneLabelStyle: TextStyle = LocalTextStyle.current,
    startDate: LocalDate = LocalDate.now(),
    minDate: LocalDate = LocalDate.MIN(),
    maxDate: LocalDate = LocalDate.MAX(),
    yearsRange: IntRange? = IntRange(1922, 2122),
    height: Dp,
    rowCount: Int = 3,
    showShortMonths: Boolean = false,
    showMonthAsNumber: Boolean = false,
    dateTextStyle: TextStyle = MaterialTheme.typography.titleMedium,
    dateTextColor: Color = LocalContentColor.current,
    hideHeader: Boolean = false,
    containerColor: Color = Color.White,
    shape: Shape = RoundedCornerShape(10.dp),
    dateTimePickerView: DateTimePickerView = DateTimePickerView.BOTTOM_SHEET_VIEW,
    selectorProperties: SelectorProperties = WheelPickerDefaults.selectorProperties(),
    dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
    onDoneClick: (snappedDate: LocalDate) -> Unit = {},
    onDateChangeListener: (snappedDate: LocalDate) -> Unit = {},
    onDismiss: () -> Unit = {}
) 

• If you want to use custom wrapper around WheelDatePicker use below code.

WheelDatePicker(
    modifier: Modifier = Modifier,
    title: String = "Due Date",
    doneLabel: String = "Done",
    titleStyle: TextStyle = LocalTextStyle.current,
    doneLabelStyle: TextStyle = LocalTextStyle.current,
    startDate: LocalDate = LocalDate.now(),
    minDate: LocalDate = LocalDate.MIN(),
    maxDate: LocalDate = LocalDate.MAX(),
    yearsRange: IntRange? = IntRange(1922, 2122),
    height: Dp = 128.dp,
    rowCount: Int = 3,
    showShortMonths: Boolean = false,
    showMonthAsNumber: Boolean = false,
    dateTextStyle: TextStyle = MaterialTheme.typography.titleMedium,
    dateTextColor: Color = LocalContentColor.current,
    hideHeader: Boolean = false,
    selectorProperties: SelectorProperties = WheelPickerDefaults.selectorProperties(),
    onDoneClick: (snappedDate: LocalDate) -> Unit = {},
    onDateChangeListener: (snappedDate: LocalDate) -> Unit = {}
) 

• modifier: Modifies the layout of the date picker.
• title: Title displayed above the date picker.
• doneLabel: Label for the "Done" button.
• titleStyle: Style for the title text.
• doneLabelStyle: Style for the "Done" label text.
• startDate: Initial date selected in the picker.
• minDate: Minimum selectable date.
• maxDate: Maximum selectable date.
• yearsRange: Initial years range.
• height: height of the date picker component.
• rowCount: Number of rows displayed in the picker and it's depending on height also.
• showShortMonths: show short month name.
• dateTextStyle: Text style for the date display.
• dateTextColor: Text color for the date display.
• hideHeader: Hide header of picker.
• selectorProperties: Properties defining the interaction with the date picker.
• onDoneClick: Callback triggered when the "Done" button is clicked, passing the selected date.
• onDateChangeListener: Callback triggered when the Date is changed, passing the selected date.
• showMonthAsNumber: flag to show month as a number.

WheelDateRangePickerView

A Composable for selecting a date range with a wheel picker.

Screenshots

       

fun WheelDateRangePickerView(
    modifier: Modifier = Modifier,
    showDatePicker: Boolean = false,
    title: String = "Due Date",
    doneLabel: String = "Done",
    centerText: String = "to",
    titleStyle: TextStyle = LocalTextStyle.current,
    doneLabelStyle: TextStyle = LocalTextStyle.current,
    initialFromDate: LocalDate? = null,
    initialToDate: LocalDate? = null,
    selectFutureDate: Boolean = true,
    selectPastDate: Boolean = true,
    minDate: LocalDate = LocalDate.MIN(),
    maxDate: LocalDate = LocalDate.MAX(),
    yearsRange: IntRange? = IntRange(1922, 2122),
    height: Dp,
    rowCount: Int = 3,
    showShortMonths: Boolean = false,
    showMonthAsNumber: Boolean = false,
    dateTextStyle: TextStyle = MaterialTheme.typography.titleMedium,
    dateTextColor: Color = LocalContentColor.current,
    hideHeader: Boolean = false,
    containerColor: Color = Color.White,
    shape: Shape = RoundedCornerShape(10.dp),
    dateTimePickerView: DateTimePickerView = DateTimePickerView.BOTTOM_SHEET_VIEW,
    selectorProperties: SelectorProperties = WheelPickerDefaults.selectorProperties(),
    dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
    dateRangeBoxColor: Color = Color.White,
    dateRangeSelectedBoxColor: Color = Color.LightGray,
    dateRangeBoxBorderColor: Color = Color.LightGray,
    dateRangeSelectedBoxBorderColor: Color = Color.DarkGray,
    dateRangeBoxShape: Shape = RoundedCornerShape(8.dp),
    dateRangeTextStyle: TextStyle = LocalTextStyle.current,
    dateTextFormat:String = "yyyy-MM-dd",
    onDoneClick: (fromDate: LocalDate, toDate: LocalDate) -> Unit = { _, _ -> },
    onFromDateChangeListener: (snappedDate: LocalDate) -> Unit = {},
    onToDateChangeListener: (snappedDate: LocalDate) -> Unit = {},
    onDismiss: () -> Unit = {}
)

• If you want to use custom wrapper around WheelDateRangePicker use below code

fun WheelDateRangePicker(
    modifier: Modifier = Modifier,
    title: String = "Due Date",
    doneLabel: String = "Done",
    centerText: String = "to",
    titleStyle: TextStyle = LocalTextStyle.current,
    doneLabelStyle: TextStyle = LocalTextStyle.current,
    initialFromDate: LocalDate? = null,
    initialToDate: LocalDate? = null,
    selectFutureDate: Boolean = true,
    selectPastDate: Boolean = true,
    minDate: LocalDate = LocalDate.MIN(),
    maxDate: LocalDate = LocalDate.MAX(),
    yearsRange: IntRange? = IntRange(1922, 2122),
    height: Dp = 128.dp,
    rowCount: Int = 3,
    showShortMonths: Boolean = true,
    showMonthAsNumber: Boolean = false,
    dateTextStyle: TextStyle = MaterialTheme.typography.titleMedium,
    dateTextColor: Color = LocalContentColor.current,
    hideHeader: Boolean = false,
    selectorProperties: SelectorProperties = WheelPickerDefaults.selectorProperties(),
    dateRangeBoxColor: Color = Color.White,
    dateRangeSelectedBoxColor: Color = Color.LightGray,
    dateRangeBoxBorderColor: Color = Color.LightGray,
    dateRangeSelectedBoxBorderColor: Color = Color.DarkGray,
    dateRangeBoxShape: Shape = RoundedCornerShape(8.dp),
    dateRangeTextStyle: TextStyle = LocalTextStyle.current,
    dateTextFormat:String = "yyyy-MM-dd",
    onDoneClick: (fromDate: LocalDate, toDate: LocalDate) -> Unit = { _, _ -> },
    onFromDateChangeListener: (fromDate: LocalDate) -> Unit = {},
    onToDateChangeListener: (fromDate: LocalDate) -> Unit = {}
 )

• modifier: Modifies the layout of the date picker.
• title: Title displayed above the date picker.
• doneLabel: Label for the "Done" button.
• titleStyle: Style for the title text.
• centerText: Text between dateBox.
• doneLabelStyle: Style for the "Done" label text.
• initialFromDate: Initially assign from Date
• initialToDate: Initially assign to Date
• selectFutureDate: User can select future date.
• selectPastDate: User can select past date
• minDate: Minimum selectable date.
• maxDate: Maximum selectable date.
• yearsRange: Initial years range.
• height: height of the date picker component.
• rowCount: Number of rows displayed in the picker and it's depending on height also.
• showShortMonths: show short month name.
• showMonthAsNumber: show month number
• dateTextStyle: Text style for the date display.
• dateTextColor: Text color for the date display.
• hideHeader: Hide header of picker.
• selectorProperties: Properties defining the interaction with the date picker.
• dateRangeBoxColor: Background color of the date boxes when not selected
• dateRangeSelectedBoxColor: Background color of the date boxes when selected
• dateRangeTextStyle: TextStyle for the date text inside the boxes
• dateRangeBoxBorderColor: Border color of the date boxes when not selected
• dateRangeSelectedBoxBorderColor: Border color of the date boxes when not selected
• dateRangeBoxShape: Shape of the date Boxes
• dateTextFormat: Date Format can be changed.
• onDoneClick: Callback triggered when the "Done" button is clicked, passing the selected date.
• onFromDateChangeListener:Callback triggered when the From Date Changes, passing the From date.
• onToDateChangeListener:Callback triggered when the to Date Changes, passing the to date.

WheelDateTimePickerView

A composable for selecting date & time using a wheel picker.

Screenshots

       

WheelDateTimePickerView(
    modifier: Modifier = Modifier,
    showDatePicker: Boolean = false,
    title: String = "DATE & TIME PICKER",
    doneLabel: String = "Done",
    timeFormat: TimeFormat = TimeFormat.HOUR_24,
    titleStyle: TextStyle = LocalTextStyle.current,
    doneLabelStyle: TextStyle = LocalTextStyle.current,
    startDate: LocalDateTime = LocalDateTime.now(),
    minDate: LocalDateTime = LocalDateTime.MIN(),
    maxDate: LocalDateTime = LocalDateTime.MAX(),
    yearsRange: IntRange? = IntRange(1922, 2122),
    height: Dp,
    rowCount: Int = 3,
    dateTextStyle: TextStyle = MaterialTheme.typography.titleMedium,
    dateTextColor: Color = LocalContentColor.current,
    hideHeader: Boolean = false,
    showMonthAsNumber: Boolean = false,
    containerColor: Color = Color.White,
    shape: Shape = RoundedCornerShape(10.dp),
    dateTimePickerView: DateTimePickerView = DateTimePickerView.BOTTOM_SHEET_VIEW,
    dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
    selectorProperties: SelectorProperties = WheelPickerDefaults.selectorProperties(),
    onDoneClick: (snappedDate: LocalDateTime) -> Unit = {},
    onDateChangeListener: (snappedDate: LocalDateTime) -> Unit = {},
    onDismiss: () -> Unit = {}
)  

• If you want to use custom wrapper around WheelDateTimePicker use below code.

WheelDateTimePicker(
    modifier: Modifier = Modifier,
    title: String = "DATE & TIME PICKER",
    doneLabel: String = "Done",
    titleStyle: TextStyle = LocalTextStyle.current,
    doneLabelStyle: TextStyle = LocalTextStyle.current,
    startDateTime: LocalDateTime = LocalDateTime.now(),
    minDateTime: LocalDateTime = LocalDateTime.MIN(),
    maxDateTime: LocalDateTime = LocalDateTime.MAX(),
    yearsRange: IntRange? = IntRange(1922, 2122),
    timeFormat: TimeFormat = TimeFormat.HOUR_24,
    height: Dp = 128.dp,
    rowCount: Int = 3,
    dateTextStyle: TextStyle = MaterialTheme.typography.titleMedium,
    dateTextColor: Color = LocalContentColor.current,
    hideHeader: Boolean = false,
    showMonthAsNumber: Boolean = false,
    selectorProperties: SelectorProperties = WheelPickerDefaults.selectorProperties(),
    onDoneClick: (snappedDate: LocalDateTime) -> Unit = {},
    onDateChangeListener: (snappedDate: LocalDateTime) -> Unit = {}
) 

• modifier: Modifies the layout of the datetime picker.
• title: Title displayed above the datetime picker.
• doneLabel: Label for the "Done" button.
• titleStyle: Style for the title text.
• doneLabelStyle: Style for the "Done" label text.
• minDateTime: Minimum selectable datetime.
• maxDateTime: Maximum selectable datetime.
• yearsRange: Initial years range.
• timeFormat: Format for displaying time (e.g., 24-hour format).
• height: height of the datetime picker component.
• rowCount: Number of rows displayed in the picker and it's depending on height also.
• dateTextStyle: Text style for the datetime display.
• dateTextColor: Text color for the datetime display.
• hideHeader: Hide header of picker.
• selectorProperties: Properties defining the interaction with the datetime picker.
• onDoneClick: Callback triggered when the "Done" button is clicked, passing the selected datetime.
• onDateChangeListener: Callback triggered when the Date is changed, passing the selected datetime.
• showMonthAsNumber: flag to show month as a number.

WheelTimePickerView

A composable for selecting time using a wheel picker.

Screenshots

       

WheelTimePickerView(
    modifier: Modifier = Modifier,
    showTimePicker: Boolean = false,
    title: String = "TIME PICKER",
    doneLabel: String = "Done",
    titleStyle: TextStyle = LocalTextStyle.current,
    doneLabelStyle: TextStyle = LocalTextStyle.current,
    startTime: LocalTime = LocalTime.now(),
    minTime: LocalTime = LocalTime.MIN(),
    maxTime: LocalTime = LocalTime.MAX(),
    timeFormat: TimeFormat = TimeFormat.HOUR_24,
    height: Dp,
    rowCount: Int = 3,
    textStyle: TextStyle = MaterialTheme.typography.titleMedium,
    textColor: Color = LocalContentColor.current,
    hideHeader: Boolean = false,
    containerColor: Color = Color.White,
    shape: Shape = RoundedCornerShape(10.dp),
    dateTimePickerView: DateTimePickerView = DateTimePickerView.BOTTOM_SHEET_VIEW,
    dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
    selectorProperties: SelectorProperties = WheelPickerDefaults.selectorProperties(),
    onDoneClick: (snappedDate: LocalTime) -> Unit = {},
    onTimeChangeListener: (snappedDate: LocalTime) -> Unit = {},
    onDismiss: () -> Unit = {}
)   

• If you want to use custom wrapper around WheelTimePicker use below code.

WheelTimePicker(
    modifier: Modifier = Modifier,
    title: String = "TIME PICKER",
    doneLabel: String = "Done",
    titleStyle: TextStyle = LocalTextStyle.current,
    doneLabelStyle: TextStyle = LocalTextStyle.current,
    startTime: LocalTime = LocalTime.now(),
    minTime: LocalTime = LocalTime.MIN(),
    maxTime: LocalTime = LocalTime.MAX(),
    timeFormat: TimeFormat = TimeFormat.HOUR_24,
    height: Dp,
    rowCount: Int = 3,
    textStyle: TextStyle = MaterialTheme.typography.titleMedium,
    textColor: Color = LocalContentColor.current,
    hideHeader: Boolean = false,
    selectorProperties: SelectorProperties = WheelPickerDefaults.selectorProperties(),
    onDoneClick: (snappedDate: LocalTime) -> Unit = {},
    onTimeChangeListener: (snappedDate: LocalTime) -> Unit = {}
)  

• modifier: Modifies the layout of the time picker.
• title: Title displayed above the time picker.
• doneLabel: Label for the "Done" button.
• titleStyle: Style for the title text.
• doneLabelStyle: Style for the "Done" label text.
• startTime: Initial time selected in the picker.
• minTime: Minimum selectable time.
• maxTime: Maximum selectable time.
• timeFormat: Format for displaying time (e.g., 24-hour format).
• height: height of the time picker component.
• rowCount: Number of rows displayed in the picker and it's depending on height also.
• textStyle: Text style for the time display.
• textColor: Text color for the time display.
• hideHeader: Hide header of picker.
• selectorProperties: Properties defining the interaction with the time picker.
• onDoneClick: Callback triggered when the "Done" button is clicked, passing the selected time.
• onTimeChangeListener: Callback triggered when the time is changed, passing the selected time.

• For Demo Checkout This Class
• Medium Article for detailed explaination.
  
  

🌐 Stay Connected with Us

Stay connected and keep up with our latest innovations! 💼 Let's innovate together!

📄 License

Copyright 2023 Mobile Innovation Network 
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.