Material TimeDate Pickers for Jetpack Compose

TimeDatePickers.kt

import android.content.Context
import androidx.appcompat.app.AppCompatActivity
import androidx.core.util.component1
import androidx.core.util.component2
import androidx.fragment.app.DialogFragment
import com.google.android.material.datepicker.MaterialDatePicker
import com.google.android.material.timepicker.MaterialTimePicker

/**
 * Time and Date Pickers for Jetpack Compose.
 *
 * Note: Requires the Activity it is being called from to extend AppCompatActivity instead of
 * ComponentActivity.
 */


/**
 * Show time picker
 *
 * Example usage:
 * Button(onClick = {
 *     showTimePicker(
 *         context = LocalContext.current,
 *         onTimePicked = { timePicker ->
 *             viewModel.updateTime(timePicker.hour+":"+timePicker.minute)
 *         }
 *     )
 * }) { Text(text = "Select time") }
 * @param context Context.
 * @param title Sets the text used to guide the user at the top of the picker. Setting to null will
 * use the default title.
 * @param onTimePicked Returns the selected time.
 */
fun showTimePicker(
    context: Context,
    title: String? = null,
    onTimePicked: (MaterialTimePicker) -> Unit
) {
    MaterialTimePicker.Builder().apply {
        if (title != null ) setTitleText(title)
    }.build().apply {
        addOnPositiveButtonClickListener {
            onTimePicked(this)
        }
        showPicker(context)
    }
}

/**
 * Show date picker
 *
 * Example usage:
 * Button(onClick = {
 *     showDatePicker(
 *         context = LocalContext.current,
 *         onDatePicked = { datePicker ->
 *             viewModel.updateDate(datePicker)
 *         }
 *     )
 * }) { Text(text = "Select date") }
 * @param context Context.
 * @param title Sets the text used to guide the user at the top of the picker. Setting to null will
 * use a default title.
 * @param onDatePicked Returns the selected date as an epoch timestamp
 */
fun showDatePicker(
    context: Context,
    title: String? = null,
    onDatePicked: (MaterialDatePicker: (Long?)) -> Unit
) {
    MaterialDatePicker.Builder.datePicker().apply {
        if (title != null ) setTitleText(title)
    }.build().apply {
        addOnPositiveButtonClickListener {
            onDatePicked(this.selection)
        }
        showPicker(context)
    }
}

/**
 * Show date range picker
 *
 * Example usage:
 * Button(onClick = {
 *     showDateRangePicker(
 *         context = LocalContext.current,
 *         onDatePicked = { startDate, endDate ->
 *             if (startDate != null  && endDate != null) {
 *                 viewModel.updateDateRange(startDate, endDate)
 *             }
 *         }
 *     )
 * }) { Text(text = "Select date range") }
 * @param context Context.
 * @param title Sets the text used to guide the user at the top of the picker. Setting to null will
 * use a default title.
 * @param onDatePicked Returns the selected dates as epoch timestamps
 */
fun showDateRangePicker(
    context: Context,
    title: String? = null,
    onDatePicked: (startDate: Long?, endDate: Long?) -> Unit
) {
    MaterialDatePicker.Builder.dateRangePicker().apply {
        if (title != null ) setTitleText(title)
    }.build().apply {
        addOnPositiveButtonClickListener {
            this.selection?.let { pair ->
                val (startDate, endDate) = pair
                onDatePicked(startDate, endDate)
            }
        }
        showPicker(context)
    }
}

private fun DialogFragment.showPicker(context: Context) {
    (context as AppCompatActivity).let { activity ->
        this.show(activity.supportFragmentManager, null)
    }
}