Easy WheelDateTimePicker — Compose Multiplatform(KMP)
Published: 2024-05-20 11:32:35

Easy Date Picker is a Kotlin Multiplatform library for selecting date and time in your Android, iOS & 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.3")
}

```

## WheelDatePickerView

![WheelDatePicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv6r9jlii8atv0ewppcx.png)

```
@Composable
fun WheelDatePickerBottomSheet() {
    var showDatePicker by remember { mutableStateOf(false) }
    var selectedDate by remember { mutableStateOf("") }

    if (showDatePicker) {
        WheelDatePickerView(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 22.dp, bottom = 26.dp),
            showDatePicker = showDatePicker,
            title = "DUE DATE",
            doneLabel = "Done",
            titleStyle = TextStyle(
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold,
                color = Color(0xFF333333),
            ),
            doneLabelStyle = TextStyle(
                fontSize = 16.sp,
                fontWeight = FontWeight(600),
                color = Color(0xFF007AFF),
            ),
            dateTextColor = Color(0xff007AFF),
            selectorProperties = WheelPickerDefaults.selectorProperties(
                borderColor = Color.LightGray,
            ),
            rowCount = 5,
            height = 180.dp,
            dateTextStyle = TextStyle(
                fontWeight = FontWeight(600),
            ),
            dragHandle = {
                HorizontalDivider(
                    modifier = Modifier.padding(top = 8.dp).width(50.dp).clip(CircleShape),
                    thickness = 4.dp,
                    color = Color(0xFFE8E4E4)
                )
            },
            shape = RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp),
            dateTimePickerView = DateTimePickerView.BOTTOM_SHEET_VIEW,
            onDoneClick = {
                selectedDate = it.toString()
                showDatePicker = false
            },
            onDismiss = {
                showDatePicker = false
            }
        )
    }

    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        Column(
            modifier = Modifier
                .height(200.dp)
                .fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(
                onClick = {
                    showDatePicker = true
                },
                colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF007AFF)),
            ) {
                Text(
                    text = "Show Date Picker",
                    modifier = Modifier.background(Color.Transparent)
                        .padding(horizontal = 12.dp, vertical = 12.dp),
                    fontSize = 16.sp
                )
            }
            Text(
                text = selectedDate,
                modifier = Modifier
                    .padding(top = 10.dp)
                    .fillMaxWidth(),
                textAlign = TextAlign.Center
            )
        }
    }
}
```

## WheelDateTimePickerView

![WheelDateTimePicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjwl9w83bti6gk92a0mn.png)

```
@Composable
fun WheelDateTimePickerDialog() {
    var showDatePicker by remember { mutableStateOf(false) }
    var selectedDate by remember { mutableStateOf("") }

    if (showDatePicker) {
        WheelDateTimePickerView(
            modifier = Modifier.padding(top = 18.dp, bottom = 10.dp).fillMaxWidth(),
            showDatePicker = showDatePicker,
            titleStyle = TextStyle(
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold,
                color = Color(0xFF333333),
            ),
            doneLabelStyle = TextStyle(
                fontSize = 16.sp,
                fontWeight = FontWeight(600),
                color = Color(0xFF007AFF),
            ),
            selectorProperties = WheelPickerDefaults.selectorProperties(
                borderColor = Color.LightGray,
            ),
            timeFormat = TimeFormat.AM_PM,
            dateTextColor = Color(0xff007AFF),
            rowCount = 5,
            height = 170.dp,
            dateTextStyle = TextStyle(
                fontWeight = FontWeight(600),
            ),
            onDoneClick = {
                selectedDate = dateTimeToString(it, "yyyy-MM-dd hh:mm a")
                showDatePicker = false
            },
            dateTimePickerView = DateTimePickerView.DIALOG_VIEW,
            onDismiss = {
                showDatePicker = false
            }
        )
    }

    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        Column(
            modifier = Modifier
                .height(200.dp)
                .fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(
                onClick = {
                    showDatePicker = true
                },
                colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF007AFF)),
            ) {
                Text(
                    text = "Show Date Time Picker",
                    modifier = Modifier.background(Color.Transparent)
                        .padding(horizontal = 12.dp, vertical = 12.dp),
                    fontSize = 16.sp
                )
            }
            Text(
                text = selectedDate,
                modifier = Modifier
                    .padding(top = 10.dp)
                    .fillMaxWidth(),
                textAlign = TextAlign.Center
            )
        }
    }
}
```

## WheelTimePickerView

![WheelTimePicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea8qxzq2slu6pyokxol4.png)

```
@Composable
fun WheelTimePickerBottomSheet() {
    var showTimePicker by remember { mutableStateOf(false) }
    var selectedTime by remember { mutableStateOf("") }

    if (showTimePicker) {
        WheelTimePickerView(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 22.dp, bottom = 26.dp),
            showTimePicker = showTimePicker,
            titleStyle = TextStyle(
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold,
                color = Color(0xFF333333),
            ),
            doneLabelStyle = TextStyle(
                fontSize = 16.sp,
                fontWeight = FontWeight(600),
                color = Color(0xFF007AFF),
            ),
            textColor = Color(0xff007AFF),
            timeFormat = TimeFormat.AM_PM,
            selectorProperties = WheelPickerDefaults.selectorProperties(
                borderColor = Color.LightGray,
            ),
            rowCount = 5,
            height = 170.dp,
            textStyle = TextStyle(
                fontWeight = FontWeight(600),
            ),
            dateTimePickerView = DateTimePickerView.BOTTOM_SHEET_VIEW,
            dragHandle = {
                HorizontalDivider(
                    modifier = Modifier.padding(top = 8.dp).width(50.dp).clip(CircleShape),
                    thickness = 4.dp,
                    color = Color(0xFFE8E4E4)
                )
            },
            shape = RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp),
            onDoneClick = {
                selectedTime = timeToString(it, "hh:mm a")
                showTimePicker = false
            },
            onDismiss = {
                showTimePicker = false
            }
        )
    }

    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        Column(
            modifier = Modifier.fillMaxSize().height(200.dp),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(
                onClick = {
                    showTimePicker = true
                },
                colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF007AFF)),
            ) {
                Text(
                    text = "Show Time Picker",
                    modifier = Modifier.background(Color.Transparent)
                        .padding(horizontal = 12.dp, vertical = 12.dp),
                    fontSize = 16.sp
                )
            }
            Text(
                text = selectedTime,
                style = MaterialTheme.typography.titleMedium,
                color = Color.Black,
                textAlign = TextAlign.Center,
                modifier = Modifier
            )
        }
    }
}
```

## Conclusion

Efficient and user-friendly, Easy Wheel Date Time Picker simplifies date and time selection with intuitive controls, enhancing user experience and productivity seamlessly.

> https://github.com/ChainTechNetwork/compose_multiplatform_date_time_picker.git

Happy coding ❤

Connect with us 👇

- [Linkedin](https://www.linkedin.com/showcase/mobile-innovation-network)

- [GitHub](https://github.com/ChainTechNetwork)