Published on

SwiftUI-da DatePicker

Authors

Hammaga xush kelibsiz! Mening ismim Nick, bu β€” Swiftful Thinking kanali.

Oldingi ikki videoda Picker va ColorPicker ko'rdik. Bu videoda esa DatePicker bilan tanishamiz β€” foydalanuvchiga sana va vaqt tanlash imkonini beradigan tayyor SwiftUI komponenti.

Yangi fayl yaratish

Navigatorda o'ng tugma bosib yangi SwiftUI fayli yarating. Uni DatePickerBootcamp deb nomlang va Create tugmasini bosing. Canvas-da Resume bosing.

Oddiy DatePicker

struct DatePickerBootcamp: View {

    @State var selectedDate: Date = Date()

    var body: some View {
        DatePicker(
            "Sana tanlang",
            selection: $selectedDate
        )
        .padding()
    }
}

Date() β€” hozirgi sana va vaqtni avtomatik oladi.

Live preview-da picker bosilganda ochiladigan taqvim ko'rinadi. Sana va vaqtni tanlash mumkin.

Accent rangini o'zgartirish

SwiftUI-dagi ko'k rang odatda accent color dan keladi. Uni .accentColor() bilan o'zgartirish mumkin:

DatePicker("Sana tanlang", selection: $selectedDate)
    .accentColor(.red)
    .padding()

DatePicker stillari

1. CompactDatePickerStyle β€” ixcham (standart)

DatePicker("Sana tanlang", selection: $selectedDate)
    .datePickerStyle(CompactDatePickerStyle())

Bosilganda taqvim ochiladi. Bu standart ko'rinish.

2. GraphicalDatePickerStyle β€” darhol ochiq taqvim

DatePicker("Sana tanlang", selection: $selectedDate)
    .datePickerStyle(GraphicalDatePickerStyle())

Taqvim darhol ekranda ko'rinadi β€” foydalanuvchi bosmasdan ham ko'radi.

3. WheelDatePickerStyle β€” g'ildirak

DatePicker("Sana tanlang", selection: $selectedDate)
    .datePickerStyle(WheelDatePickerStyle())

Eski iOS uslubidagi aylanuvchan g'ildirak ko'rinishi.

Faqat sana yoki faqat vaqt ko'rsatish

displayedComponents parametri orqali nimani ko'rsatishni belgilash mumkin:

// Faqat sana
DatePicker("Sana tanlang", selection: $selectedDate, displayedComponents: .date)

// Faqat vaqt
DatePicker("Vaqt tanlang", selection: $selectedDate, displayedComponents: .hourAndMinute)

// Sana va vaqt (standart)
DatePicker(
    "Sana va vaqt",
    selection: $selectedDate,
    displayedComponents: [.date, .hourAndMinute]
)

Diapazon cheklash β€” faqat ma'lum sanalar

Foydalanuvchi faqat belgilangan sanalar oralig'ini tanlashi kerak bo'lsa (masalan, tug'ilgan kun yoki uchrashuv sanasi), in: parametri ishlatiladi.

Boshlang'ich va tugash sanasini aniqlash

struct DatePickerBootcamp: View {

    @State var selectedDate: Date = Date()

    let startingDate: Date = Calendar.current.date(
        from: DateComponents(year: 2018)
    ) ?? Date()

    let endingDate: Date = Date()

    var body: some View {
        DatePicker(
            "Sana tanlang",
            selection: $selectedDate,
            in: startingDate...endingDate,
            displayedComponents: .date
        )
        .padding()
    }
}

Bu misoldΠ°:

  • Minimal sana: 2018 yil 1 yanvar
  • Maksimal sana: bugun

Foydalanuvchi 2018 yildan oldingi yoki bugundan keyingi sanani tanlay olmaydi.

Eslatma: Calendar.current.date(from:) opsional (Date?) qaytaradi. ?? Date() β€” agar sana aniqlanmasa, bugungi sanani ishlatadi.

Amaliy misollar

// Tug'ilgan kun β€” faqat o'tgan sanalar
DatePicker("Tug'ilgan kun", selection: $selectedDate, in: ...Date())

// Uchrashuv β€” faqat kelajak sanalar
DatePicker("Uchrashuv", selection: $selectedDate, in: Date()...)

Sanani formatlash

Date ob'ektining .description xususiyati juda uzun va amaliy emas:

2024-02-08 10:26:00 +0000

Sanani chiroyli ko'rsatish uchun DateFormatter ishlatiladi:

struct DatePickerBootcamp: View {

    @State var selectedDate: Date = Date()

    var dateFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.dateStyle = .short   // .short, .medium, .long, .full
        formatter.timeStyle = .short   // .none, .short, .medium, .long, .full
        return formatter
    }

    var body: some View {
        VStack(spacing: 20) {
            Text("Tanlangan sana:")
            Text(dateFormatter.string(from: selectedDate))
                .font(.title)

            DatePicker("Sana tanlang", selection: $selectedDate)
                .datePickerStyle(GraphicalDatePickerStyle())
        }
        .padding()
    }
}

dateStyle variantlari

StilKo'rinishi
.short2/8/24
.mediumFeb 8, 2024
.longFebruary 8, 2024
.fullThursday, February 8, 2024

To'liq kod

struct DatePickerBootcamp: View {

    @State var selectedDate: Date = Date()

    let startingDate: Date = Calendar.current.date(
        from: DateComponents(year: 2018)
    ) ?? Date()
    let endingDate: Date = Date()

    var dateFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.dateStyle = .medium
        formatter.timeStyle = .short
        return formatter
    }

    var body: some View {
        VStack(spacing: 20) {
            Text("Tanlangan:")
            Text(dateFormatter.string(from: selectedDate))
                .font(.title)

            DatePicker(
                "Sana tanlang",
                selection: $selectedDate,
                in: startingDate...endingDate,
                displayedComponents: [.date, .hourAndMinute]
            )
            .datePickerStyle(GraphicalDatePickerStyle())
            .accentColor(.red)
            .padding()
        }
    }
}

Xulosa

Bu videoda o'rgandik:

  • DatePicker β€” foydalanuvchiga sana va vaqt tanlash imkonini beradigan tayyor SwiftUI komponenti
  • .accentColor() β€” picker-ning ko'k rangini o'zgartirish
  • CompactDatePickerStyle β€” ixcham, bosilganda ochiladi (standart)
  • GraphicalDatePickerStyle β€” taqvim darhol ko'rinadi
  • WheelDatePickerStyle β€” aylanuvchan g'ildirak
  • displayedComponents β€” faqat sana, faqat vaqt yoki ikkalasi
  • in: start...end β€” foydalanuvchi tanlashi mumkin bo'lgan sana diapazoni
  • DateFormatter β€” sanani matn sifatida formatlash

DatePicker ko'proq tug'ilgan kun yoki uchrashuv sanasini tanlashda ishlatiladi.

Rahmat tomosha qilganingiz uchun! Men β€” Nick, bu Swiftful Thinking. Keyingi videoda ko'rishamiz!

Buy mea coffee