Easy WheelDateTimePicker — Compose Multiplatform(KMP)
Published in
4 min readApr 3, 2024
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.5")
}WheelDatePickerView
@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
@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
@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.
Happy coding ❤
