DateTimeText

Ne zaman kullanılır

Bir tarih ya da zaman gösterilen her yerde: oluşturulma tarihi, son güncelleme, randevu saati.

Ne zaman kullanılmaz

• Tarih seçmek için: DatePicker ya da TimeField kullanın.
• Geri sayım için: CountdownTimer kullanın.

Anatomi

Oluşturulma

8 Eki 2026

Son güncelleme

8 Ekim 2026 14:30

Saat

14:30

AçıkKoyu

Kodu kopyala

import { DateTimeText } from '@bigbang/ui';

export default function Default() {
  return (
    <dl className="grid grid-cols-[auto_1fr] gap-x-xl gap-y-sm type-body-md">
      <dt className="text-fg-subtle">Oluşturulma</dt>
      <dd>
        <DateTimeText value="2026-10-08" />
      </dd>
      <dt className="text-fg-subtle">Son güncelleme</dt>
      <dd>
        <DateTimeText value="2026-10-08T14:30:00" dateStyle="long" />
      </dd>
      <dt className="text-fg-subtle">Saat</dt>
      <dd>
        <DateTimeText value="2026-10-08T11:30:00Z" format="time" timeZone="Europe/Istanbul" />
      </dd>
    </dl>
  );
}

1. <time> öğesi: datetime özniteliği makine tarafından okunur değeri taşır.
2. Metin: Provider dilinde biçimlenmiş tarih, saat ya da göreli zaman.

Davranış

• Biçim Intl.DateTimeFormat ile Provider dilinde yapılır: Türkçede “8 Eki 2026 14:30”, İngilizcede “8 Oct 2026, 14:30”.
• Düz ISO tarih (“2026-10-08”) yerel takvim günü sayılır; saat dilimiyle bir gün kaymaz.
• relative biçimi Intl.RelativeTimeFormat kullanır (“dün”, “2 saat önce”) ve 30 saniyede bir tazelenir; değişen metin yumuşakça geçiş yapar.
• now verilirse göreli zaman ondan sayılır ve tazelenmez (sunucu tarafı çizim ve testler için).

Yönergeler

• Kayıtlarda ve tablolarda kesin zamanı, akışlarda göreli zamanı kullanın.
• Bir listede tek biçim kullanın.
• Saatin hangi bölgede olduğu önemliyse timeZone verin ve sayfada söyleyin.

İçerik

DateTimeText kendi metnini taşımaz; ay ve gün adları Intl’den gelir.

İlgili bileşenler

• Timeline: Olay zamanları.
• DatePicker: Tarih seçimi.