Published on: Saturday, February 21, 2026

DatePicker

Authors

Name
ShoxruxC
@iOSdasturchi

Bron qilish, eslatma va taqvim ilovalari — sana bilan ishlash kerak bo'lsa DatePicker ishlatiladi. U sana va vaqt tanlashning barcha murakkabligini — lokalizatsiya, vaqt zonasi, taqvim — o'zi hal qiladi. Sizning ishingiz faqat Date tipidagi @State o'zgaruvchisini bog'lash.

Date — Swift Foundation-dagi vaqtning aniq nuqtasini ifodalovchi tur. Date() ni hech qanday parametrsiz chaqirsangiz hozirgi vaqtni qaytaradi — bu boshlang'ich qiymat sifatida qulay.

in: parametri tanlash mumkin bo'lgan sana diapazonini cheklaydi. displayedComponents sana, vaqt yoki ikkisini ham ko'rsatishni nazorat qiladi.

Swift•

ContentView.swift

import SwiftUI

struct ContentView: View {
// Date() — boshlang'ich qiymat sifatida hozirgi vaqt
@State private var tadbirSanasi = Date()

  // Bugundan bir yilgacha diapazon
  let diapazon: ClosedRange<Date> = Date.now...Date.now.addingTimeInterval(60 * 60 * 24 * 365)

  var body: some View {
      VStack(alignment: .leading, spacing: 20) {
          DatePicker(
              "Tadbir sanasi",
              selection: $tadbirSanasi,
              // Faqat diapazon ichidagi sanalar tanlanadi
              in: diapazon,
              // Sana va soat:daqiqa ikkisini ham ko'rsatadi
              displayedComponents: [.date, .hourAndMinute]
          )
          // Graphical: to'liq inline taqvim + soat
          .datePickerStyle(.graphical)

          // Tanlangan sanani formatlangan matn sifatida ko'rsatish
          Text("Tanlangan: \(tadbirSanasi.formatted(date: .abbreviated, time: .shortened))")
              .foregroundStyle(.secondary)
      }
      .padding()
  }

}

DatePicker variantlari

.compact — ixcham uslub

// Default iOS uslubi — bitta qatorda, bosish popup ochadi
DatePicker("Eslatma", selection: $eslatmaSanasi)
    .datePickerStyle(.compact)

Faqat sana (vaqtsiz)

// ...Date.now — faqat o'tgan sanalar (tug'ilgan kun uchun)
DatePicker(
    "Tug'ilgan kun",
    selection: $tugdirganKun,
    in: ...Date.now,
    displayedComponents: .date
)

Faqat vaqt

// Soat:daqiqa tanlash — uyg'onish signali va boshqalar uchun
DatePicker(
    "Uyg'onish vaqti",
    selection: $uygunishVaqti,
    displayedComponents: .hourAndMinute
)

Bir tomonlama diapazonlar haqida: Istalgan kelajak sanaga ruxsat berish uchun in: Date.now... (ochiq yuqori chegara) yoki istalgan o'tgan sanaga in: ...Date.now (ochiq quyi chegara) ishlatishingiz mumkin. Bu faqat bugungacha bo'lgan sanalarni ruxsat berishi kerak bo'lgan tug'ilgan kun pickers uchun juda mos.

Tezkor ma'lumotnoma

Sintaksis	Vazifasi
`DatePicker("label", selection: $sana)`	Sana va vaqt tanlash boshqaruvi
`displayedComponents: .date`	Faqat sana — soat yashiriladi
`displayedComponents: .hourAndMinute`	Faqat vaqt — sana yashiriladi
`in: Date.now...`	Faqat kelajak sanalar
`in: ...Date.now`	Faqat o'tgan sanalar
`.datePickerStyle(.graphical)`	To'liq inline taqvim
`.datePickerStyle(.compact)`	Ixcham, tappable label
`sana.formatted(date: .abbreviated, time: .shortened)`	Foydalanuvchi uchun formatlangan matn

Topshiriq: sayohat rejalashtiruvchi

Ikkita DatePicker yarating: "Jo'nish sanasi" (faqat sana, kelajak) va "Qaytish sanasi" (faqat sana, kelajak). Tanlangan sanalarni pastda ko'rsating. Bonus: jo'nish sanasidan oldin qaytish sanasi tanlanmasligi uchun qaytish DatePicker-iga in: jo'nishSanasi... qo'shing.