跳转至
Structure

DatePicker

A picker control for selecting dates.

Declaration

struct DatePicker<Label> : View where Label : View

Overview

You create a picker by providing 3 things:

  1. a selection binding
  2. a label
  3. the editable parts of the Date

There are four types of pickers, and three types of labels, making 12 total initializers.

Picker types:

  1. Unlimited range
  2. Closed range (maximum and minimum)
  3. From range (minimum only)
  4. Through range (maximum only)

Label types:

  1. String
  2. LocalizedStringKey
  3. View

A simple example looks like this:

struct DatePickerView: View {
    @State private var date = Date()

    var body: some View {
        DatePicker("Date", selection: $date)
    }
}
Gif displays a date picker view consisting of a calendar in which a date is selected and a time selector in which an hour and minute can be entered and a toggle flips between AM and PM.

You can limit the DatePicker to specific ranges of dates, allowing selections only before or after a certain date, or between two dates. The following example shows a date-and-time picker that only permits selections within the year 2021 (in the UTC time zone).

struct ContentView: View { @State private var date = Date()

let dateRange: ClosedRange<Date> = {
    let calendar = Calendar.current
    let startComponents = DateComponents(year: 2021, month: 1, day: 1)
    let endComponents = DateComponents(year: 2021, month: 12, day: 31, hour: 23, minute: 59, second: 59)
    return calendar.date(from:startComponents)!
        ...
        calendar.date(from:endComponents)!
}()

var body: some View {
    DatePicker(
        "Start Date",
         selection: $date,
         in: dateRange,
         displayedComponents: [.date, .hourAndMinute]
    )
}
}

A gif displaying a SwiftUI standard date picker on iOS, with the label Start Date, and buttons for the time 9:58 AM and the date April 12, 2021. The user can only pick within the set range year 2021, so when another year is selected, the picker defaults back to 2021.

Styling Date Pickers

You can customize the appearance and interaction of date pickers using one of the DatePickerStyles provided by SwiftUI. The full list of styles is:

Currently, you cannot create your own custom DatePickerStyle.

To set a specific style for all picker instances within a view, use the datePickerStyle(_:) modifier.

struct StyledDatePickerView: View {
    @State private var date = Date()

    var body: some View {
        DatePicker(selection: $date, label: { Text("Date") })
            .datePickerStyle(WheelDatePickerStyle())
    }
}
A gif displaying a wheel style date picker, in which the week day month and date, the hour time, the minute time, and meridiam (am/pm) can be selected separately by scrolling around a wheel; a light gray box highlights the current selections.

Availability

iOS 13.0+

macOS 10.15+

Topics

Initializer

init(_:selection:displayedComponents:) Creates a date picker with unlimited range and a string label.

init(_:selection:displayedComponents:) Creates a date picker with unlimited range and a localized string key label.

init(_:selection:in:displayedComponents:) Creates a date picker with closed range and a localized string key label.

init(_:selection:in:displayedComponents:) Creates a date picker with "from" range and a localized string key label.

init(_:selection:in:displayedComponents:) Creates a date picker with closed range and a string label.

init(_:selection:in:displayedComponents:) Creates a date picker with "through" range and a string label.

init(_:selection:in:displayedComponents:) Creates a date picker with "through" range and a localized string key label.

init(_:selection:in:displayedComponents:) Creates a date picker with "from" range and a string label.

init(selection:displayedComponents:label:) Creates a date picker with unlimited range and a View label.

init(selection:in:displayedComponents:label:) Creates a date picker with closed range and a View label.

init(selection:in:displayedComponents:label:) Creates a date picker with "through" range and a View label.

init(selection:in:displayedComponents:label:) Creates a date picker with "from" range and a View label.

Instance Property

body The content and behavior of the view.

Type Alias

Body The type of view representing the body of this view.

Components A type alias for the DatePickerComponents option set used in DatePicker.