Date Text Field

Bir gün için metin alanı: gün rakamlarla yazılır ya da kutunun sonundaki bir düğmenin açtığı takvimden seçilir.

import com.pantrixui.components.date.datetextfield.PantrixDateTextField

• Yalnız rakam. Alan yalnız rakam alır; her parça tamamlanınca ayraç kendiliğinden gelir: Türkçede 18102026 18.10.2026 olur, Amerikan İngilizcesinde 10182026 10/18/2026. Telefonda rakam klavyesi açılır. Ayraçtan sonra Backspace önündeki rakamı siler.
• Yapıştırılan gün. Yazılmış bir gün yazıldığı gibi okunur: önce alanın sırasıyla, olmazsa yılı başta, ISO 8601 gibi. Türkçede 2026-10-18 de 18.10.2026 olur; iki haneli bir yıl bugünün çevresindeki yüz yıldandır (18.10.26, 2026). Böyle okunmayan bir metin rakamlarıyla girer.
• Biçim. format parçaların sırasını ve aralarındaki ayracı verir; varsayılanı temanın dilinden ve bölgesinden gelir: Türkçe ve Almanca GG.AA.YYYY, İngiltere ve Arapça DD/MM/YYYY, ABD MM/DD/YYYY, bilinmeyen bir dil ISO 8601 (YYYY-MM-DD). Alan boşken düzeni gösterir; ekran okuyucu onu parçaların sırası olarak duyar ("Gün, Ay, Yıl").
• Değer. onValueChange alanın günü her değiştiğinde çağrılır: takvimin aldığı tam bir gün, ya da alan boş, yarım, gün olmayan rakamlar ya da almadığı bir gün tuttuğunda null. Yarım yazılan gün value null iken ekranda kalır; dışarıdan gelen başka bir gün alana yazılır.
• Kendi hatası. Alan yanlış yazılanı kutunun altına kendisi yazar: alandan çıkınca tamamlanmamış bir tarih, takvimde olmayan bir gün (31 Şubat), minDate ile maxDate dışında bir gün, isDateEnabled'ın almadığı bir gün. Uygulamanın error'u önce gelir; mesajı supportingText'tir.
• Takvim. Düğmeyle, masaüstünde ve web'de Alt+↓ ile, salt okunur alanda kutuya basınca, Enter ya da Boşluk ile açılır. presentation neyde açılacağını söyler: varsayılan dar bir pencerede bir sheet, daha geniş pencerede kutunun altında bir popover; ya da her pencerede bir popover, bir sheet ya da bir dialog; her platformda aynı. Takvimde bir güne basmak günü alır ve takvimi kapatır; Escape ve dışarı basmak bir şey değiştirmeden kapatır. Klavyeyle açılınca odak seçili güne, yoksa bugüne geçer; kapanınca alana döner.
• Üç biçim. value ve onValueChange alan biçim; state alan biçim (rememberDateTextFieldState()): date alanın günüdür, yazmak günü alana koyar, text yarım yazılmış alanı boş alandan ayırır; field alan biçim bir formun alanına bağlanır.
• Tarih türü. Günler PantrixDate'tir; kotlinx-datetime'a ya da java.time'a çevirmek için docs/guide/date-time/DATE_TIME_GUIDE.md.

Örnekler

Doğum günü, yazarak

Bir doğum günü, yazarak: bugünden sonrası alınmaz. Takvim de açılır, ama uzak bir yıla yazmak daha çabuktur. Gün tamamlanınca altta yazılır; yarım bırakıp alandan çıkınca alan düzeni söyleyen hatasını gösterir.

var birthday by remember { mutableStateOf<PantrixDate?>(null) }
val strings = PantrixTheme.strings
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixDateTextField(
        value = birthday,
        onValueChange = { birthday = it },
        label = "Doğum günü",
        maxDate = rememberToday(),
        showClearButton = true,
        tagKey = "birthday"
    )
    PantrixText(
        text = birthday?.let { "Doğum günü: ${strings.date(it.day, it.month, it.year)}" } ?: "Henüz bir gün yok",
        style = PantrixTheme.typography.body
    )
}

Hafta içi bir teslim günü

Önümüzdeki bir ay içinde, hafta içi bir teslim günü. Takvimde hafta sonları soluktur. Yazılan bir cumartesi alınmaz ve alan "Bu gün seçilemez" der; bir ay sonrası sınırı söyler.

var delivery by remember { mutableStateOf<PantrixDate?>(null) }
val today = rememberToday()
PantrixDateTextField(
    value = delivery,
    onValueChange = { delivery = it },
    label = "Teslim günü",
    supportingText = "Yalnız hafta içi teslim edilir",
    minDate = today.plusDays(1),
    maxDate = today.plusMonths(1),
    isDateEnabled = { it.dayOfWeek <= FRIDAY },
    tagKey = "delivery"
)

private const val FRIDAY = 5

Takvim bir sheet'te ya da dialog'da

Takvim bir sheet'te açılır: telefonda parmağa yakın, ekranın genişliğinde. presentation = Dialog onu pencerenin ortasında bir dialog'da açar. Bir gün seçilince sheet kapanır ve gün alana yazılır.

var appointment by remember { mutableStateOf<PantrixDate?>(null) }
var presentation by remember { mutableStateOf(DatePickerPresentation.Sheet) }
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixSegmentButton(
        options = listOf(
            SegmentOption(DatePickerPresentation.Popover, "Popover", tagKey = "popover"),
            SegmentOption(DatePickerPresentation.Sheet, "Sheet", tagKey = "sheet"),
            SegmentOption(DatePickerPresentation.Dialog, "Dialog", tagKey = "dialog")
        ),
        selected = presentation,
        onSelect = { presentation = it },
        fullWidth = false,
        tagKey = "presentation"
    )
    PantrixDateTextField(
        value = appointment,
        onValueChange = { appointment = it },
        label = "Randevu günü",
        minDate = rememberToday(),
        presentation = presentation,
        tagKey = "appointment"
    )
}

Uygulamanın hatası ve devre dışı

Uygulamanın kendi hatası alanınkinden önce gelir: dolu bir gün error ve supportingText ile söylenir. Altındaki alan devre dışıdır: odak almaz, takvimi açılmaz.

var meeting by remember { mutableStateOf<PantrixDate?>(PantrixDate(2026, 11, 2)) }
val taken = meeting == PantrixDate(2026, 11, 2)
PantrixDateTextField(
    value = meeting,
    onValueChange = { meeting = it },
    label = "Toplantı günü",
    supportingText = if (taken) "Bu gün dolu, başka bir gün seçin" else "Ofisin açık olduğu bir gün",
    error = taken,
    tagKey = "meeting"
)
PantrixDateTextField(
    value = PantrixDate(2026, 10, 1),
    onValueChange = {},
    enabled = false,
    label = "Sözleşme başlangıcı",
    tagKey = "contract"
)

Salt okunur: yalnız takvimden

Salt okunur bir alan yazılmaz: gün yalnız takvimden seçilir. Kutuya basmak, Enter ya da Boşluk takvimi açar. Bir gün seçimi zorunlu olan, yazılanın yanlış anlaşılmaması gereken yerler için.

var checkIn by remember { mutableStateOf<PantrixDate?>(null) }
PantrixDateTextField(
    value = checkIn,
    onValueChange = { checkIn = it },
    readOnly = true,
    label = "Giriş günü",
    placeholder = "Takvimden seçin",
    minDate = rememberToday(),
    tagKey = "check_in"
)

Forma bağlı

Bir formun alanına bağlı: gün boşken "Kaydet" hatayı gösterir ve odağı alana gönderir. Hata alandan çıkınca da görünür; takvime geçmek alandan çıkmak sayılmaz. Gün olmayan rakamlar değeri null bırakır, kural onu yakalar.

val form = rememberFormState()
val scope = rememberCoroutineScope()
val report = LocalExampleEvents.current
val start = form.field<PantrixDate?>("start", initial = null, Rules.required("İşe başlama gününü yazın"))
PantrixDateTextField(
    field = start,
    modifier = Modifier.fillMaxWidth(),
    form = form,
    label = "İşe başlama günü",
    minDate = rememberToday()
)
PantrixButton(
    text = "Kaydet",
    onClick = { scope.launch { form.submit { report("Kaydedildi") } } },
    form = form,
    tagKey = "save_start"
)

Bir durumla, ISO 8601 biçiminde

Bir durumla: state.date alanın günü, state.text yazılan rakamlar. İkisi birlikte boş alanı yarım yazılmış alandan ayırır. ISO 8601 biçimi her dilde aynı okunur. Düğme durumun gününü değiştirir; alan onu kendisi yazar.

val state = rememberDateTextFieldState()
val today = rememberToday()
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixDateTextField(
        state = state,
        label = "Rapor günü",
        format = DateFieldFormat.Iso,
        tagKey = "report_day"
    )
    PantrixText(
        text = when {
            state.date != null -> "Gün: ${state.date}"
            state.text.isEmpty() -> "Alan boş"
            else -> "Yarım: ${state.text}"
        },
        style = PantrixTheme.typography.body
    )
    PantrixButton(
        text = "Bugünü yaz",
        onClick = { state.date = today },
        variant = ButtonVariant.Outline,
        tagKey = "write_today"
    )
}

Kendi biçimin

Alanın biçimi temanın dilinden gelir; format başkasını söyler. Dillerin çoğunun biçimi DateFieldFormat'ta hazırdır (DayMonthYearDots, MonthDayYearSlashes, Iso, …); kendi biçimin parçaların sırası (DateFieldOrder) ve bir ayraçtır: ilki Japoncadaki gibi yıl başta, eğik çizgiyle. Biçimi değiştir: alanın günü aynı kalır, yalnızca yazılışı değişir.

var shipping by remember { mutableStateOf<PantrixDate?>(PantrixDate(2026, 10, 18)) }
var format by remember { mutableStateOf(DateFieldFormat(DateFieldOrder.YearMonthDay, '/')) }
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixSegmentButton(
        options = listOf(
            SegmentOption(DateFieldFormat(DateFieldOrder.YearMonthDay, '/'), "YYYY/AA/GG", tagKey = "year_first"),
            SegmentOption(DateFieldFormat.MonthDayYearSlashes, "AA/GG/YYYY", tagKey = "month_first"),
            SegmentOption(DateFieldFormat(DateFieldOrder.DayMonthYear, '-'), "GG-AA-YYYY", tagKey = "day_first")
        ),
        selected = format,
        onSelect = { format = it },
        fullWidth = false,
        tagKey = "format"
    )
    PantrixDateTextField(
        value = shipping,
        onValueChange = { shipping = it },
        label = "Gönderim günü",
        format = format,
        tagKey = "shipping"
    )
}

Dar pencerede sheet

Varsayılan presentation = DatePickerPresentation.Adaptive: dar bir pencerede takvim alttan bir sheet'te açılır, parmağa yakın ve pencerenin genişliğinde; daha geniş pencerede kutunun altında bir popover'da. Karttaki pencere seçicisinden "Dar"ı seç ve takvimi aç. Takvim açılırken seçilir: açıkken pencere değişse de değişmez.

var day by remember { mutableStateOf<PantrixDate?>(null) }
// Kartın penceresi örnek kadar uzundur: dar bir pencerede açılan sheet'e yer kalsın diye örnek uzun tutulur.
Column(Modifier.fillMaxWidth().height(460.dp)) {
    PantrixDateTextField(
        value = day,
        onValueChange = { day = it },
        modifier = Modifier.fillMaxWidth(),
        label = "Toplantı günü",
        minDate = rememberToday(),
        presentation = DatePickerPresentation.Adaptive,
        tagKey = "adaptive_day"
    )
}

API

value

Bir gün için metin alanı: gün rakamlarla yazılır ya da kutunun sonundaki bir düğmenin açtığı takvimden seçilir.

state

Çağıranın tuttuğu bir state üstünde bir tarih alanı, başka her yönden bir değerin PantrixDateTextField'ı gibi: durumun date'i alanın günüdür, ona yazmak günü alana koyar, text'i yarım yazılmış alanı boş alandan ayırır.

field

Bir formun alanına bağlı bir tarih alanı: günü, hatası ve adı field'dan gelir.

TextFieldStyle

PantrixTextField'ın kutusu: şekli, en az yüksekliği ve genişliği, metninin çevresindeki boşluk, ikonları ve kenarlığı.

TextFieldColors

Temanın renklerini almayan bir alan için PantrixTextField'ın boyandığı renkler: verilen renk kullanılır, verilmeyen temadaki rolünde kalır. Bir ürün yalnızca değiştirdiği renkleri verir, başkasını vermez: