Date Picker

Ay ay gezilen ve bir gün seçtiren bir takvim: ayın başlığı ve iki yanında ayı çeviren oklar, sütunların üstünde haftanın günleri, bir de ayın günleri.

import com.pantrixui.components.date.datepicker.PantrixDatePicker

• Gezinme. Oklar ayı çevirir; başlığa basınca günlerin yerine yıllar açılır, bir yıl seçilince takvim o yılın aynı ayına döner. Seçilen gün ekranda değilse takvim onun ayına gider.
• Seçilemeyen günler. minDate ve maxDate dışındaki günler ve isDateEnabled'ın almadığı günler soluk çizilir ve basılamaz; oklar sınırın ötesine geçmez.
• Aralık. İlk basış aralığın başını, ikincisi sonunu seçer; baştan önceki bir güne basmak aralığı oradan yeniden başlatır. Uç seçilirken işaretçinin altındaki güne kadar ara açık renkle önizlenir.
• Hafta. Dilin gününden başlar: İngilizcede Pazar, Türkçede Pazartesi, Arapçada Cumartesi; firstDayOfWeek ile değişir.
• Bugün. Halkalı gün ekranın saatinin bugünüdür ve gece yarısı kendiliğinden döner. Ekranın saati LocalPantrixClock'tur, varsayılanı cihazınki (PantrixClock.System); başka bir yerin günü today ile ya da bütün ekran için LocalPantrixClock ile verilir.
• Platform. Bir günün yeri telefonda platformun en küçük dokunma hedefi kadardır (Android'de 48dp, iOS'ta 44pt), masaüstünde ve web'de 36dp. Dar bir yerde günler sığacak kadar küçülür.
• Tarih türü. Günler PantrixDate'tir, tarih kütüphanesi gerekmez; kotlinx-datetime'a ya da java.time'a çevirmek için docs/guide/date-time/DATE_TIME_GUIDE.md.

Örnekler

Popover'da tek gün

Bir düğme seçilen günü gösterir ve takvimi altında bir popover'da açar; bir gün seçilince popover kapanır. Bugünden önceki günler seçilemez.

var due by remember { mutableStateOf<PantrixDate?>(null) }
var open by remember { mutableStateOf(false) }
val strings = PantrixTheme.strings
PantrixPopover(
    visible = open,
    onDismissRequest = { open = false },
    anchor = {
        PantrixButton(
            text = due?.let(strings::written) ?: "Teslim tarihi seçin",
            onClick = { open = !open },
            variant = ButtonVariant.Outline,
            leadingIcon = { PantrixIcon(PantrixIcons.Calendar, contentDescription = null) },
            tagKey = "due"
        )
    },
    alignment = PopoverAlignment.Start,
    tagKey = "due"
) {
    PantrixDatePicker(
        selected = due,
        onSelect = {
            due = it
            open = false
        },
        minDate = rememberToday(),
        tagKey = "due"
    )
}

private fun PantrixStrings.written(day: PantrixDate): String = date(day.day, day.month, day.year)

Sayfada hafta içi bir aralık

Sayfada duran bir takvimden bir izin aralığı: yalnızca hafta içi günler uç olabilir, hafta her dilde Pazartesi başlar. Seçilen aralık takvimin altında yazılır.

var leave by remember { mutableStateOf<PantrixDateRange?>(null) }
val strings = PantrixTheme.strings
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixDatePicker(
        selectedRange = leave,
        onRangeSelect = { leave = it },
        isDateEnabled = { it.dayOfWeek <= FRIDAY },
        firstDayOfWeek = MONDAY,
        tagKey = "leave"
    )
    PantrixText(
        text = leave?.let { "İzin: ${strings.written(it.start)} – ${strings.written(it.end)}" }
            ?: "İznin ilk ve son gününü seçin",
        style = PantrixTheme.typography.body
    )
}

private fun PantrixStrings.written(day: PantrixDate): String = date(day.day, day.month, day.year)

private const val MONDAY = 1

private const val FRIDAY = 5

Dialog'da sınırlı günler

Bir dialog'da önümüzdeki otuz günden biri. Takvimdeki seçim bir taslaktır: Tamam onu kabul eder, Vazgeç ya da dialog'un dışına basmak bırakır.

var appointment by remember { mutableStateOf<PantrixDate?>(null) }
var draft by remember { mutableStateOf<PantrixDate?>(null) }
var open by remember { mutableStateOf(false) }
val today = rememberToday()
val strings = PantrixTheme.strings
val report = LocalExampleEvents.current
PantrixButton(
    text = appointment?.let { "Randevu: ${strings.written(it)}" } ?: "Randevu günü seçin",
    onClick = {
        draft = appointment
        open = true
    },
    variant = ButtonVariant.Outline,
    tagKey = "appointment"
)
PantrixDialog(
    visible = open,
    onDismissRequest = { open = false },
    title = "Randevu günü",
    actions = {
        PantrixButton(text = "Vazgeç", onClick = { open = false }, variant = ButtonVariant.Text, tagKey = "cancel")
        PantrixButton(
            text = "Tamam",
            onClick = {
                appointment = draft
                open = false
                report("Randevu seçildi")
            },
            enabled = draft != null,
            tagKey = "accept"
        )
    },
    tagKey = "appointment"
) {
    PantrixDatePicker(
        selected = draft,
        onSelect = { draft = it },
        minDate = today,
        maxDate = today.plusDays(DAYS_AHEAD),
        tagKey = "appointment"
    )
}

private fun PantrixStrings.written(day: PantrixDate): String = date(day.day, day.month, day.year)

private const val DAYS_AHEAD = 30

Sheet'te doğum günü, yıllarla

Bir sheet'te doğum günü: bugünden sonrası seçilemez. Uzak bir yıl başlığa basıp yıllardan seçilir; takvim o yılın aynı ayına döner. Takvim sheet'in genişliğini doldurur (fillMaxWidth): sütunları genişler, çok geniş bir sheet'te ortada durur.

var birthday by remember { mutableStateOf<PantrixDate?>(null) }
var open by remember { mutableStateOf(false) }
val strings = PantrixTheme.strings
PantrixButton(
    text = birthday?.let { "Doğum günü: ${strings.written(it)}" } ?: "Doğum gününü seçin",
    onClick = { open = true },
    variant = ButtonVariant.Outline,
    tagKey = "birthday"
)
PantrixSheet(
    visible = open,
    onDismissRequest = { open = false },
    title = "Doğum günü",
    tagKey = "birthday"
) {
    PantrixDatePicker(
        selected = birthday,
        onSelect = {
            birthday = it
            open = false
        },
        modifier = Modifier.fillMaxWidth(),
        maxDate = rememberToday(),
        tagKey = "birthday"
    )
}

private fun PantrixStrings.written(day: PantrixDate): String = date(day.day, day.month, day.year)

Başka bir yerin bugünü

Takvimin bugünü cihazın saatine göre değil, bir otelin saatine göre: today bugünün halkasını verir, minDate de onunla seçilebilen ilk günü. Kiritimati (UTC+14) ile Pago Pago (UTC-11) arasında 25 saat vardır, ikisinde her an başka bir gündür: yer değişince halka ve ilk gün bir gün kayar. Verilmezse today ekranın saatinin günüdür (rememberToday()) ve gece yarısı kendiliğinden döner; bu örnek otelin gününü yer seçilince okur.

var hotel by remember { mutableStateOf(Hotel.Kiritimati) }
var arrival by remember { mutableStateOf<PantrixDate?>(null) }
val today = remember(hotel) { PantrixDate.of(Clock.System.now(), offset = hotel.offset) }
val strings = PantrixTheme.strings
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixSegmentButton(
        options = listOf(
            SegmentOption(Hotel.Kiritimati, "Kiritimati", tagKey = "kiritimati"),
            SegmentOption(Hotel.PagoPago, "Pago Pago", tagKey = "pago_pago")
        ),
        selected = hotel,
        onSelect = {
            hotel = it
            arrival = null
        },
        fullWidth = false,
        tagKey = "hotel"
    )
    PantrixDatePicker(
        selected = arrival,
        onSelect = { arrival = it },
        minDate = today,
        today = today,
        tagKey = "arrival"
    )
    PantrixText(
        text = "Otelde bugün ${strings.written(today)} (${hotel.zone})",
        style = PantrixTheme.typography.body
    )
    PantrixText(
        text = arrival?.let { "Varış: ${strings.written(it)}" } ?: "Varış gününü seçin",
        style = PantrixTheme.typography.body
    )
}

private enum class Hotel(
    val zone: String,
    val offset: Duration
) {
    Kiritimati("UTC+14", 14.hours),
    PagoPago("UTC-11", (-11).hours)
}

private fun PantrixStrings.written(day: PantrixDate): String = date(day.day, day.month, day.year)

Ekranın saati

Bütün bir ekranın saati: LocalPantrixClock otelin saatini verir ve içindeki her şey onu okur. Takvime today verilmedi; halkası, rememberToday() ve saatin kendisi otelin saatindedir. Bir önizleme ya da bir test ekranı böyle bir günde ve bir saatte gösterir: PantrixClock(clock, utcOffset) bir Clock'u da kendisi alır.

var hotel by remember { mutableStateOf(Hotel.Kiritimati) }
val clock = remember(hotel) { PantrixClock(Clock.System) { hotel.offset } }
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixSegmentButton(
        options = listOf(
            SegmentOption(Hotel.Kiritimati, "Kiritimati", tagKey = "kiritimati"),
            SegmentOption(Hotel.PagoPago, "Pago Pago", tagKey = "pago_pago")
        ),
        selected = hotel,
        onSelect = { hotel = it },
        fullWidth = false,
        tagKey = "screen_hotel"
    )
    CompositionLocalProvider(LocalPantrixClock provides clock) {
        var arrival by remember { mutableStateOf<PantrixDate?>(null) }
        PantrixDatePicker(selected = arrival, onSelect = { arrival = it }, tagKey = "screen_arrival")
        val today = rememberToday()
        val now = LocalPantrixClock.current.time()
        val strings = PantrixTheme.strings
        PantrixText(
            text = "Ekranda bugün ${strings.written(today)}, saat ${strings.clock(now.hour, now.minute)}",
            style = PantrixTheme.typography.body
        )
    }
}

private enum class Hotel(
    val zone: String,
    val offset: Duration
) {
    Kiritimati("UTC+14", 14.hours),
    PagoPago("UTC-11", (-11).hours)
}

private fun PantrixStrings.written(day: PantrixDate): String = date(day.day, day.month, day.year)

Kendi renkleri ve devre dışı

Takvimin kendi renkleri ve ölçüsü, bir anahtarla devre dışı. Aralığın uçları başarı renginde, arası onun açık dolgusunda, bugünün halkası uyarı renginde; verilmeyen her renk temanındır. Takvimin kenar boşluğu yok (padding = 0.dp): kartın kendi boşluğunda durur. Anahtar kapalıyken takvim soluktur: ne gün seçilir ne ay değişir, seçili aralık yerinde kalır.

var trip by remember { mutableStateOf<PantrixDateRange?>(null) }
var enabled by remember { mutableStateOf(true) }
val colors = PantrixTheme.colors
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixSwitchButton(
        checked = enabled,
        onCheckedChange = { enabled = it },
        label = "Seçilebilir",
        tagKey = "trip_enabled"
    )
    PantrixDatePicker(
        selectedRange = trip,
        onRangeSelect = { trip = it },
        enabled = enabled,
        style = DatePickerStyle(padding = 0.dp),
        colors = DatePickerColors(
            selectedContainer = colors.success.color,
            rangeContainer = colors.success.container,
            today = colors.warning.color
        ),
        tagKey = "trip"
    )
}

API

selected

Ay ay gezilen ve bir gün seçtiren bir takvim: ayın başlığı ve iki yanında ayı çeviren oklar, sütunların üstünde haftanın günleri, bir de ayın günleri.

selectedRange

Bir gün aralığı seçtiren takvim: bir konaklama, bir izin, bir raporun kapsadığı günler. Bir gün seçtiren takvimin kendisidir, iki kez basılır: ilk basış aralığın ilk gününü, ikincisi son gününü seçer.

DatePickerStyle

PantrixDatePicker'ın geometrisi: bir günün yeri, seçili bir günün çizildiği yuvarlak işaret ve ayın çevresindeki boşluk.

DatePickerColors

Bir PantrixDatePicker'ın temanın renkleri yerine boyandığı renkler: verilen renk kullanılır, verilmeyen temanın kalır.

Erişilebilirlik

• Klavye. Takvim tek bir Tab durağıdır. Oklar bir gün ya da bir hafta, Page Up ve Page Down bir ay, Shift ile bir yıl, Home ve End haftanın ilk ve son günü götürür; Enter ve Boşluk seçer.
• Ekran okuyucu. Her gün haftanın günüyle tam okunur ("17 Ekim 2026 Cumartesi"); seçili, bugün, aralığın başı, arası ve sonu söylenir. Ay değişince yeni ay kibarca duyurulur.