[SUI] DatePicker

Usar DatePicker para seleccionar una sola fecha.

• DatePicker.init(_:selection:in:displayedComponents:): titleKey es la etiqueta. selection es un Binding que almacena la Date seleccionada. in es un rango de selección de fechas. displayComponents, de tipo DatePickerComponents es el tipo de valores almacenados que puede ser date o hourAndMinute.

El estilo por defecto del Picker permite elegir la fecha con un calendario y la hora con una rueda.

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

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

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

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

Rango de fechas

El rango de fechas puede ser cerrado o abierto. El siguiente ejemplo presenta un DatePicker que permite elegir fechas desde hoy hasta un futuro distante por medio del rango Date().... En caso de necesitar lo contrario (i.e. desde un pasado distante hasta hoy) se usa ...Date().

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

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

Cambiar el estilo del DatePicker

Usar datePickerStyle(_:) para definir el estilo de tipo DatePickerStyle, que puede tomar valores predefinidos:

• automatic
• compact: Muestra un botón para revelar un calendario o rueda.
• graphical: Directamente se muestra el calendario.
• wheel: Directamente se muestra una rueda.

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

  var body: some View {
    VStack {
      Text("Fecha: \(date.formatted(.dateTime.day().month()))")
      DatePicker(
        "Start Date",
        selection: $date,
        in: Date()...,
        displayedComponents: [.date]
      )
      .datePickerStyle(.wheel)
    }
  }
}

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

  var body: some View {
    VStack {
      Text("Fecha: \(date.formatted(.dateTime.day().month()))")
      DatePicker(
        "Start Date",
        selection: $date,
        in: Date()...,
        displayedComponents: [.date]
      )
      .datePickerStyle(.graphical)
    }
  }
}