rememberDateRangePickerState

Functions summary

DateRangePickerState
@RequiresApi(value = 26)
@Composable
rememberDateRangePickerState(
    initialSelectedStartDate: LocalDate?,
    initialSelectedEndDate: LocalDate?,
    initialDisplayedMonth: YearMonth?,
    yearRange: IntRange,
    initialDisplayMode: DisplayMode,
    selectableDates: SelectableDates
)

Creates a DateRangePickerState for a DateRangePicker that is remembered across compositions.

android
DateRangePickerState
@Composable
rememberDateRangePickerState(
    initialSelectedStartDateMillis: Long?,
    initialSelectedEndDateMillis: Long?,
    initialDisplayedMonthMillis: Long?,
    yearRange: IntRange,
    initialDisplayMode: DisplayMode,
    selectableDates: SelectableDates
)

Creates a DateRangePickerState for a DateRangePicker that is remembered across compositions.

Cmn

Functions

rememberDateRangePickerState

@RequiresApi(value = 26)
@Composable
fun rememberDateRangePickerState(
    initialSelectedStartDate: LocalDate?,
    initialSelectedEndDate: LocalDate?,
    initialDisplayedMonth: YearMonth? = initialSelectedStartDate?.let { YearMonth.from(it) },
    yearRange: IntRange = DatePickerDefaults.YearRange,
    initialDisplayMode: DisplayMode = DisplayMode.Picker,
    selectableDates: SelectableDates = DatePickerDefaults.AllDates
): DateRangePickerState

Creates a DateRangePickerState for a DateRangePicker that is remembered across compositions.

Note: This composable uses LocalDate and YearMonth. For a lower-level composable that uses UTC milliseconds, see the other rememberDateRangePickerState overload.

The initial values are converted to UTC milliseconds at the start of the day (midnight):

To create a date range picker state outside composition, see the DateRangePickerState function.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerDefaults
import androidx.compose.material3.DateRangePicker
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TooltipAnchorPosition
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.getSelectedEndDate
import androidx.compose.material3.getSelectedStartDate
import androidx.compose.material3.rememberDateRangePickerState
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex

// Decoupled snackbar host state from scaffold state for demo purposes.
val snackState = remember { SnackbarHostState() }
val snackScope = rememberCoroutineScope()
SnackbarHost(hostState = snackState, Modifier.zIndex(1f))

// Creates a state with pre-selected date range.
val state =
    rememberDateRangePickerState(
        initialSelectedStartDate = LocalDate.of(2023, 4, 15),
        initialSelectedEndDate = LocalDate.of(2023, 4, 20),
    )
Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Top) {
    // Add a row with "Save" and dismiss actions.
    Row(
        modifier =
            Modifier.fillMaxWidth()
                .background(DatePickerDefaults.colors().containerColor)
                .padding(start = 12.dp, end = 12.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        TooltipBox(
            positionProvider =
                TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
            tooltip = { PlainTooltip { Text("Close") } },
            state = rememberTooltipState(),
        ) {
            IconButton(onClick = { /* dismiss the UI */ }) {
                Icon(Icons.Filled.Close, contentDescription = "Close")
            }
        }
        TextButton(
            onClick = {
                snackScope.launch {
                    val range = state.getSelectedStartDate()!!..state.getSelectedEndDate()!!
                    snackState.showSnackbar("Saved range: $range")
                }
            },
            enabled = state.getSelectedEndDate() != null,
        ) {
            Text(text = "Save")
        }
    }
    DateRangePicker(state = state, modifier = Modifier.weight(1f))
}
Parameters
initialSelectedStartDate: LocalDate?

a LocalDate that represents an initial selection of a start date. Provide a null to indicate no selection.

initialSelectedEndDate: LocalDate?

a LocalDate that represents an initial selection of an end date. Provide a null to indicate no selection.

initialDisplayedMonth: YearMonth? = initialSelectedStartDate?.let { YearMonth.from(it) }

an optional YearMonth for an initial month that will be displayed to the user. By default, in case an initialSelectedStartDate is provided, the initial displayed month would be the month of the selected date. You may provide a different initial month, or null to display the current one.

yearRange: IntRange = DatePickerDefaults.YearRange

an IntRange that holds the year range that the date range picker will be limited to

initialDisplayMode: DisplayMode = DisplayMode.Picker

an initial DisplayMode that this state will hold

selectableDates: SelectableDates = DatePickerDefaults.AllDates

a SelectableDates that is consulted to check if a date is allowed. In case a date is not allowed to be selected, it will appear disabled in the UI.

rememberDateRangePickerState

@Composable
fun rememberDateRangePickerState(
    initialSelectedStartDateMillis: Long? = null,
    initialSelectedEndDateMillis: Long? = null,
    initialDisplayedMonthMillis: Long? = initialSelectedStartDateMillis,
    yearRange: IntRange = DatePickerDefaults.YearRange,
    initialDisplayMode: DisplayMode = DisplayMode.Picker,
    selectableDates: SelectableDates = DatePickerDefaults.AllDates
): DateRangePickerState

Creates a DateRangePickerState for a DateRangePicker that is remembered across compositions.

To create a date range picker state outside composition, see the DateRangePickerState function.

Parameters
initialSelectedStartDateMillis: Long? = null

timestamp in UTC milliseconds from the epoch that represents an initial selection of a start date. Provide a null to indicate no selection.

initialSelectedEndDateMillis: Long? = null

timestamp in UTC milliseconds from the epoch that represents an initial selection of an end date. Provide a null to indicate no selection.

initialDisplayedMonthMillis: Long? = initialSelectedStartDateMillis

timestamp in UTC milliseconds from the epoch that represents an initial selection of a month to be displayed to the user. By default, in case an initialSelectedStartDateMillis is provided, the initial displayed month would be the month of the selected date. Otherwise, in case null is provided, the displayed month would be the current one.

yearRange: IntRange = DatePickerDefaults.YearRange

an IntRange that holds the year range that the date range picker will be limited to

initialDisplayMode: DisplayMode = DisplayMode.Picker

an initial DisplayMode that this state will hold

selectableDates: SelectableDates = DatePickerDefaults.AllDates

a SelectableDates that is consulted to check if a date is allowed. In case a date is not allowed to be selected, it will appear disabled in the UI.