# rememberDateRangePickerState

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/DateRangePickerState` | `@https://developer.android.com/reference/kotlin/androidx/annotation/RequiresApi(value = 26) @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/rememberDateRangePickerState.composable#rememberDateRangePickerState(java.time.LocalDate,java.time.LocalDate,java.time.YearMonth,kotlin.ranges.IntRange,androidx.compose.material3.DisplayMode,androidx.compose.material3.SelectableDates)( initialSelectedStartDate: https://developer.android.com/reference/java/time/LocalDate.html?, initialSelectedEndDate: https://developer.android.com/reference/java/time/LocalDate.html?, initialDisplayedMonth: https://developer.android.com/reference/java/time/YearMonth.html?, yearRange: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-int-range/index.html, initialDisplayMode: https://developer.android.com/reference/kotlin/androidx/compose/material3/DisplayMode, selectableDates: https://developer.android.com/reference/kotlin/androidx/compose/material3/SelectableDates )` Creates a `https://developer.android.com/reference/kotlin/androidx/compose/material3/DateRangePickerState` for a `https://developer.android.com/reference/kotlin/androidx/compose/material3/DateRangePicker.composable#DateRangePicker(androidx.compose.material3.DateRangePickerState,androidx.compose.ui.Modifier,androidx.compose.material3.DatePickerFormatter,androidx.compose.material3.DatePickerColors,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.focus.FocusRequester)` that is remembered across compositions. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/DateRangePickerState` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/rememberDateRangePickerState.composable#rememberDateRangePickerState(kotlin.Long,kotlin.Long,kotlin.Long,kotlin.ranges.IntRange,androidx.compose.material3.DisplayMode,androidx.compose.material3.SelectableDates)( initialSelectedStartDateMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html?, initialSelectedEndDateMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html?, initialDisplayedMonthMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html?, yearRange: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-int-range/index.html, initialDisplayMode: https://developer.android.com/reference/kotlin/androidx/compose/material3/DisplayMode, selectableDates: https://developer.android.com/reference/kotlin/androidx/compose/material3/SelectableDates )` Creates a `https://developer.android.com/reference/kotlin/androidx/compose/material3/DateRangePickerState` for a `https://developer.android.com/reference/kotlin/androidx/compose/material3/DateRangePicker.composable#DateRangePicker(androidx.compose.material3.DateRangePickerState,androidx.compose.ui.Modifier,androidx.compose.material3.DatePickerFormatter,androidx.compose.material3.DatePickerColors,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.focus.FocusRequester)` that is remembered across compositions. | Cmn |

## Functions

### rememberDateRangePickerState

android Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/DatePicker.jvmAndAndroid.kt+function: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 `https://developer.android.com/reference/kotlin/androidx/compose/material3/DateRangePickerState` for a `https://developer.android.com/reference/kotlin/androidx/compose/material3/DateRangePicker.composable#DateRangePicker(androidx.compose.material3.DateRangePickerState,androidx.compose.ui.Modifier,androidx.compose.material3.DatePickerFormatter,androidx.compose.material3.DatePickerColors,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.focus.FocusRequester)` that is remembered across compositions.

Note: This composable uses `https://developer.android.com/reference/java/time/LocalDate.html` and `https://developer.android.com/reference/java/time/YearMonth.html`. For a lower-level composable that uses UTC milliseconds, see the other `https://developer.android.com/reference/kotlin/androidx/compose/material3/rememberDateRangePickerState.composable#rememberDateRangePickerState(java.time.LocalDate,java.time.LocalDate,java.time.YearMonth,kotlin.ranges.IntRange,androidx.compose.material3.DisplayMode,androidx.compose.material3.SelectableDates)` overload.

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

- `initialSelectedStartDate` is used to set `https://developer.android.com/reference/kotlin/androidx/compose/material3/DateRangePickerState#selectedStartDateMillis()`.

- `initialSelectedEndDate` is used to set `https://developer.android.com/reference/kotlin/androidx/compose/material3/DateRangePickerState#selectedEndDateMillis()`.

- `initialDisplayedMonth` is used to set `https://developer.android.com/reference/kotlin/androidx/compose/material3/DateRangePickerState#displayedMonthMillis()`, based on the first day of that month.

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

```kotlin
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.Button
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.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics
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(
                    modifier =
                        Modifier.semantics {
                            // TODO(b/496338253): Remove this modifier once bug where tooltip
                            //  text is not announced by a11y screen readers is resolved.
                            liveRegion = LiveRegionMode.Assertive
                            paneTitle = "Close"
                        }
                ) {
                    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: https://developer.android.com/reference/java/time/LocalDate.html?` | a `https://developer.android.com/reference/java/time/LocalDate.html` that represents an initial selection of a start date. Provide a `null` to indicate no selection. |
| `initialSelectedEndDate: https://developer.android.com/reference/java/time/LocalDate.html?` | a `https://developer.android.com/reference/java/time/LocalDate.html` that represents an initial selection of an end date. Provide a `null` to indicate no selection. |
| `initialDisplayedMonth: https://developer.android.com/reference/java/time/YearMonth.html? = initialSelectedStartDate?.let { YearMonth.from(it) }` | an optional `https://developer.android.com/reference/java/time/YearMonth.html` for an initial month that will be displayed to the user. By default, in case an `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#rememberDateRangePickerState(java.time.LocalDate,java.time.LocalDate,java.time.YearMonth,kotlin.ranges.IntRange,androidx.compose.material3.DisplayMode,androidx.compose.material3.SelectableDates)` 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: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-int-range/index.html = DatePickerDefaults.YearRange` | an `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-int-range/index.html` that holds the year range that the date range picker will be limited to |
| `initialDisplayMode: https://developer.android.com/reference/kotlin/androidx/compose/material3/DisplayMode = DisplayMode.Picker` | an initial `https://developer.android.com/reference/kotlin/androidx/compose/material3/DisplayMode` that this state will hold |
| `selectableDates: https://developer.android.com/reference/kotlin/androidx/compose/material3/SelectableDates = DatePickerDefaults.AllDates` | a `https://developer.android.com/reference/kotlin/androidx/compose/material3/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

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/DateRangePicker.kt+function: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 `https://developer.android.com/reference/kotlin/androidx/compose/material3/DateRangePickerState` for a `https://developer.android.com/reference/kotlin/androidx/compose/material3/DateRangePicker.composable#DateRangePicker(androidx.compose.material3.DateRangePickerState,androidx.compose.ui.Modifier,androidx.compose.material3.DatePickerFormatter,androidx.compose.material3.DatePickerColors,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.focus.FocusRequester)` that is remembered across compositions.

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

| Parameters |
|---|---|
| `initialSelectedStartDateMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html? = 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: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html? = 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: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html? = 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: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-int-range/index.html = DatePickerDefaults.YearRange` | an `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-int-range/index.html` that holds the year range that the date range picker will be limited to |
| `initialDisplayMode: https://developer.android.com/reference/kotlin/androidx/compose/material3/DisplayMode = DisplayMode.Picker` | an initial `https://developer.android.com/reference/kotlin/androidx/compose/material3/DisplayMode` that this state will hold |
| `selectableDates: https://developer.android.com/reference/kotlin/androidx/compose/material3/SelectableDates = DatePickerDefaults.AllDates` | a `https://developer.android.com/reference/kotlin/androidx/compose/material3/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. |