Tarih seçici

61 · Formlar

Tarayıcının kendi tarih ve saat seçicisini panel stiliyle gösterir. acun:input üzerine kurulduğu için etiket, ipucu ve hata gösterimi aynıdır. Tarih aralığı seçmek için flatpickr tabanlı uiDateRangePicker kullanılır.

PRO acun:date-picker

Temel kullanım

Varsayılan tür date'tir. value her zaman YYYY-MM-DD biçiminde verilir; ekranda ise kullanıcının tarayıcı diline göre gösterilir (Türkçede 07.10.2026).

CANLI ÖRNEK

<acun:date-picker name="teslimat_tarihi" label="Teslimat tarihi" value="2026-10-07" hint="Müşteriye e-postayla bildirilen gün." />

Prop	Değerler
`value`	YYYY-MM-DD
`label, hint`	acun:input ile aynı

Türler

type ile tarih ve saat, yalnızca saat ya da ay seçimi yapılabilir. Her türün value biçimi farklıdır; aşağıdaki tabloya bakın.

CANLI ÖRNEK

<acun:date-picker name="gun" label="Gün" value="2026-10-07" />
<acun:date-picker name="randevu" type="datetime-local" label="Randevu" value="2026-10-07T09:30" />
<acun:date-picker name="saat" type="time" label="Saat" value="09:30" />
<acun:date-picker name="donem" type="month" label="Dönem" value="2026-10" />

Prop	Değerler
`type`	date \| datetime-local \| time \| month
`value`	YYYY-MM-DD · YYYY-MM-DDTHH:MM · HH:MM · YYYY-MM

En erken ve en geç tarih

min ve max nitelikleri doğrudan alana geçer; tarayıcı bu aralığın dışındaki günleri seçtirmez. Değerler value ile aynı biçimde yazılır.

CANLI ÖRNEK

<acun:date-picker name="ekim_teslim" label="Teslim tarihi" min="2026-10-01" max="2026-10-31" hint="Yalnızca Ekim 2026 içinden bir gün." />

Prop	Değerler
`min`	Seçilebilecek ilk değer
`max`	Seçilebilecek son değer

Tarih aralığı

Başlangıç ve bitiş gününü tek alanda seçtirmek için alanı uiDateRangePicker Alpine bileşeniyle sarın ve alana x-ref="input" verin. Alan tarihleri gg.aa.yyyy gösterir; geniş ekranda iki ay yan yana açılır. Her iki gün seçildiğinde date-range-picked olayı { start, end } (Y-m-d) ile yayınlanır; Livewire olmayan sayfalarda seçimi bu olayla alın. Takvimden iki gün seçerek deneyin.

CANLI ÖRNEK

<div x-data="{ aralik: null }" x-on:date-range-picked="aralik = $event.detail" class="space-y-2">
    <div x-data="uiDateRangePicker()">
        <acun:input x-ref="input" label="Rapor dönemi" readonly />
    </div>
    <p class="text-sm text-gray-600 dark:text-zinc-400" x-text="aralik ? 'Seçilen aralık: ' + aralik.start + ' – ' + aralik.end : 'Bir başlangıç ve bir bitiş günü seçin.'"></p>
</div>

Prop	Değerler
`date-range-picked`	Aralık tamamlanınca yayınlanan olay: { start, end }

Livewire ile

Livewire bileşeni içinde seçilen aralık ayrıca bileşenin startDate ve endDate özelliklerine Y-m-d biçiminde yazılır. Başlangıçta seçili aralığı aynı özelliklerden verin; kapsayıcıya wire:ignore ekleyerek Livewire güncellemelerinin takvimi bozmasını önleyin.

BLADE

{{-- Livewire bileşeninde: public ?string $startDate = null; public ?string $endDate = null; --}}
<div wire:ignore x-data="uiDateRangePicker({ startDate: @js($startDate), endDate: @js($endDate) })">
    <acun:input x-ref="input" label="Rapor dönemi" readonly />
</div>

Prop	Değerler
`startDate, endDate`	Başlangıçta seçili aralık (Y-m-d)

Aralık seçenekleri

Varsayılan olarak her gün seçilebilir; rezervasyon gibi yalnızca ileri tarihlerin seçilmesi gereken yerlerde minDate: 'today' verin. disabledRanges seçilemeyecek günleri belirler. Livewire'da değerlerin yazılacağı özellik adlarını startProperty / endProperty ile değiştirebilirsiniz.

BLADE

<div wire:ignore x-data="uiDateRangePicker({
    startDate: @js($baslangic),
    endDate: @js($bitis),
    minDate: 'today',
    disabledRanges: [{ from: '2026-12-25', to: '2027-01-01' }],
    startProperty: 'baslangic',
    endProperty: 'bitis',
})">
    <acun:input x-ref="input" label="İzin dönemi" readonly />
</div>

Prop	Değerler
`minDate`	'today' \| null \| 'YYYY-MM-DD'
`disabledRanges`	Kapalı günler: tarihler ya da { from, to } aralıkları
`startProperty, endProperty`	Yazılacak özellikler ('startDate', 'endDate')

Kurulum

flatpickr pakete dahil değildir; uygulamanızda kurup, PRO JS girişi @acunsoft/acun-ui-pro (CSS, JavaScript ve derleme kılavuzundaki Vite takma adı) üzerinden Türkçe diliyle birlikte registerDateRangePicker'a verin. Livewire kullanmayan sayfalarda aynı satırı alpine:init olayında çalıştırın.

import flatpickr from 'flatpickr';
import { Turkish } from 'flatpickr/dist/l10n/tr.js';
import 'flatpickr/dist/flatpickr.min.css';
import { registerDateRangePicker } from '@acunsoft/acun-ui-pro';

document.addEventListener('livewire:init', () => registerDateRangePicker(Alpine, flatpickr, Turkish));

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`label`	`null`	Alanın üstündeki etiket
`name`	`null`	Alan adı; yoksa wire:model değeri
`hint`	`null`	Alttaki yardım metni
`type`	`date`	date · datetime-local · time · month
`uiDateRangePicker: startDate, endDate`	`''`	Başlangıçta seçili aralık (Y-m-d)
`uiDateRangePicker: minDate`	`null`	Seçilebilecek ilk gün; 'today' geçmiş günleri kapatır
`uiDateRangePicker: disabledRanges`	`[]`	Seçilemeyen günler (flatpickr disable biçimi)
`uiDateRangePicker: startProperty, endProperty`	`'startDate', 'endDate'`	Livewire bileşeninde seçimin yazıldığı özellikler
`uiDateRangePicker: date-range-picked`	—	Aralık tamamlanınca yayınlanan olay; detail: { start, end } (Y-m-d)

Slot'lar: value, min, max, required, disabled gibi nitelikler acun:input üzerinden alana eklenir.