DEV Community

Cover image for Easy WheelDateTimePicker — Compose Multiplatform(KMP)
Mobile innovation Network
Mobile innovation Network

Posted on • Edited on

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")

}
Enter fullscreen mode Exit fullscreen mode




WheelDatePickerView

WheelDatePicker




@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
        )
    }
}






    Enter fullscreen mode
    


    Exit fullscreen mode
    









}
Enter fullscreen mode Exit fullscreen mode




WheelDateTimePickerView

WheelDateTimePicker




@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
        )
    }
}






    Enter fullscreen mode
    


    Exit fullscreen mode
    









}
Enter fullscreen mode Exit fullscreen mode




WheelTimePickerView

WheelTimePicker




@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
        )
    }
}






    Enter fullscreen mode
    


    Exit fullscreen mode
    









}
Enter fullscreen mode Exit fullscreen mode




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 👇

Top comments (0)

Read next

add00_3 profile image

Releasing a Package

Add00 -

shri_sudharsanm_a006d726 profile image

Pathfinding: Understanding the Rat in the Maze Algorithm

Shri Sudharsan M -

shobiha_509918109238322c8 profile image

Traversing the Maze: Hamiltonian Cycles and Their Real-World Magic

Shobiha -

liamdewitt profile image

Project Spotlight: Building an OOP RPG Game Grid

Liam D. -