Posted on May 20, 2024 • Edited on Jun 25, 2024

Easy WheelDateTimePicker — Compose Multiplatform(KMP)

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

 @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.