HTML Tarih ve Saat Alanları: date, time, datetime-local, month ve week

Beş tür bir bakışta

Beş türün ortak özellikleri de vardır. Hepsi change ve input olaylarını tetikler; teknik özetlerine göre autocomplete, list, readonly ve step ortak özniteliklerini destekler ve hiçbirinin karşılık gelen bir ARIA rolü yoktur. Hiçbiri size özniteliğini desteklemez; genişliği CSS ile ayarlamanız gerekir. Ayrıca readonly bir alanda required etkisizdir, çünkü kullanıcı o alanı dolduramaz.

Ekranda görünen tarih ile value aynı değildir

Bu türleri anlamanın anahtarı budur. MDN'e göre seçicide gösterilen tarih, kullanıcının tarayıcısının veya işletim sisteminin yerel ayarına göre biçimlendirilir. Bir kullanıcı günü önce, başka bir kullanıcı ayı önce görebilir. Ancak value her zaman yyyy-mm-dd biçimindedir. Böylece sunucu tarafında "gün mü önce, ay mı önce" belirsizliği ortadan kalkar ve aynı kod her ülkeden gelen veriyi aynı şekilde okuyabilir.

<form action="/ara" method="get">
  <label>
    Doğum tarihiniz
    <input type="date" name="dogum" />
  </label>
  <button type="submit">Gönder</button>
</form>

Bu form GET ile gönderildiğinde adres çubuğunda ?dogum=1955-06-08 gibi bir sorgu görürsünüz. Saat içeren türlerde iki nokta üst üste karakteri URL içinde kodlanır: MDN'e göre bir time alanı name=HH%3Amm, saniye varsa name=HH%3Amm%3Ass biçiminde gider; datetime-local için verilen örnek ise party-date=2024-06-01T08%3A30 şeklindedir. Sunucu tarafında bu değeri çözüp yeniden doğrulamak sizin işinizdir. Gönderim yöntemleri için form etiketi yazısına bakın.

HTML tarih ve saat dizelerinin kuralları

MDN'in tarih ve saat biçimleri rehberi, bu dizelerin ISO 8601'in bir varyasyonu olduğunu, ama HTML'in kendi ayrıştırma kuralları bulunduğu için küçük farklar olabileceğini anlatır. value, min ve max değerlerini elle yazarken şu kurallara uymalısınız:

• Karakter kümesi ASCII'dir. Tarih ve saat dizeleri her zaman ASCII karakterlerden oluşur; Türkçe ay adı gibi yerel ifadeler yazılmaz.
• Yıl en az dört basamaktır. 1000 yılından önceki yıllar sıfırla doldurulur: 72 yılı 0072 yazılır. Dört basamaktan uzun yıl da geçerlidir; MDN tablosunda 17310-09 gibi bir ay dizesi örneği vardır. Milattan önceki yıllar desteklenmez.
• Takvim Gregoryen takvimdir. Arayüz başka bir takvim gösterse bile alttaki değer her zaman Gregoryen takvime göredir; bu takvim HTML için 1582 öncesine, 1. yıla kadar geriye doğru uzatılmış kabul edilir.
• Ay ve gün iki basamaktır. Ay 01 ile 12 arasıdır, gün ayın uzunluğuna bağlıdır. Şubat artık yıllarda 29 gündür; 400'e bölünen ya da 4'e bölünüp 100'e bölünmeyen yıllar artık yıldır.
• Saat 24 saat düzenindedir. Saat 00 ile 23, dakika 00 ile 59 arasıdır. Yalnızca saat yazmak geçersizdir; dakika zorunludur. Saniye isteğe bağlıdır ama 60 gibi bir artık saniye değeri yazılamaz. Saniyenin ardından nokta ve bir ile üç basamak arası saniye kesri eklenebilir.
• Yerel tarih-saat dizesi tarih ile saati T harfi veya bir boşlukla birleştirir ve saat dilimi bilgisi içermez.

Hafta dizeleri ayrıca dikkat ister. Bir hafta pazartesi başlar, pazar biter. Yılın ilk haftası, o yılın ilk perşembesini içeren haftadır. Bu yüzden ocak ayının ilk günleri bir önceki yılın son haftasına, aralığın son günleri ise sonraki yılın ilk haftasına düşebilir. MDN'in örneğinde 30 Aralık 1952 tarihi 1953-W01 haftasındadır. 1 Ocak'ı perşembeye denk gelen yıllar ile 1 Ocak'ı çarşambaya denk gelen artık yıllar 53 hafta, diğer yıllar 52 hafta sürer.

type="date": gün seçmek

date türü yıl, ay ve günü alır ama saati almaz. min ve max, yyyy-mm-dd biçiminde yazılmalıdır; biçim hatalıysa o sınır hiç yokmuş gibi davranılır. İkisi birlikte verildiğinde max, min ile aynı veya ondan sonraki bir tarih olmalıdır. MDN, sınır verildiğinde seçicinin aralık dışındaki günleri devre dışı bıraktığını ve aralık dışı bir tarih gönderilmeye çalışıldığında hata gösterildiğini söyler.

step gün cinsindendir ve varsayılanı 1'dir. Arka planda değer milisaniye olarak tutulduğu için tarayıcı adımı 86.400.000 ile çarpar. Adım başlangıcı min varsa odur, yoksa value, ikisi de yoksa Unix başlangıcı olan 1970-01-01. step="any" tarihte pratikte 1 ile aynı etkiyi yapar, çünkü seçici zaten yalnızca tam gün seçtirir. MDN, adımla örneğin yalnızca cumartesileri seçilebilir yapabileceğinizi belirtir: başlangıcı bir cumartesi olan min ile step="7" bunu sağlar.

<label for="etkinlik">Etkinlik günü (Nisan 2027, yalnızca cumartesi)</label>
<!-- 2027-04-03 bir cumartesidir; step="7" yalnızca cumartesileri geçerli kılar -->
<input
  id="etkinlik"
  name="etkinlik"
  type="date"
  min="2027-04-03"
  max="2027-04-30"
  step="7"
  required />

Kullanıcı adıma uymayan bir değer girerse MDN'e göre tarayıcı değeri en yakın geçerli değere yuvarlayabilir; iki değer eşit uzaklıktaysa ileri yöndekini tercih eder. Yuvarlamanın her tarayıcıda olacağını varsaymayın; geçersiz değer stepMismatch hatasıyla gönderimi de durdurabilir. Bu hata türlerinin tamamı form doğrulama yazısında anlatılıyor.

type="time": saat almak

time türünün value değeri, arayüz 12 saatlik bir düzen gösterse bile her zaman başında sıfır olan 24 saatlik HH:mm ya da saniye varsa HH:mm:ss biçimindedir. Değer boş dize de olabilir; MDN bu yüzden değerin her zaman düzgün bir saat dizesi olacağına güvenmemenizi söyler.

step saniye cinsindendir ve varsayılanı 60'tır, yani bir dakika. Bu varsayılanla çoğu arayüz yalnızca saat ve dakika gösterir. 60'a bölünmeyen bir adım verirseniz arayüze saniye eklenir. Dakika veya saat cinsinden adım için değeri saniyeye çevirin: 2 dakika için 120, 15 dakika için 900, 2 saat için 7200. list özniteliğiyle bir <datalist> bağlayarak öneri saatler de sunabilirsiniz; öneriler zorunlu değildir, kullanıcı başka bir saat yazabilir. Datalist ayrıntıları select ve datalist yazısında.

<label for="randevu">Randevu saati (12:00 ile 18:00 arası, çeyrek saatlik)</label>
<input
  id="randevu"
  name="randevu"
  type="time"
  min="12:00"
  max="18:00"
  step="900"
  list="randevu-saatleri"
  required />
<datalist id="randevu-saatleri">
  <option value="12:00"></option>
  <option value="13:30"></option>
  <option value="16:00"></option>
</datalist>

Gece yarısını aşan aralık

Saatin değer alanı dairesel (periyodik) bir alandır: en büyük değere ulaşınca başa döner. Bu yüzden time türünde min değerini max değerinden büyük verebilirsiniz. MDN'deki örnekte min="14:00" ve max="2:00" öğleden sonra ikiden gece yarısını geçip sabah ikiye kadar olan saatleri kabul eder. MDN bu ters aralık özelliğini başka hiçbir input türünün desteklemediğini de belirtir.

<label for="vardiya">Gece vardiyası başlangıcı (20:00 ile 08:00 arası)</label>
<input id="vardiya" name="vardiya" type="time" min="20:00" max="08:00" />

type="datetime-local": tarih ve saati birlikte almak

datetime-local, yıl, ay, gün, saat ve dakikayı tek alanda toplar. Değeri yyyy-mm-ddTHH:mm biçimindedir. Değeri atarken tarih ile saat arasında boşluk da kullanabilirsiniz, ama tarayıcı değeri normalleştirir: ayırıcı her zaman T olur ve saat kısmı olabildiğince kısa yazılır. MDN'in örneğine göre 0170-07-31T22:00:00 değeri, sıfır saniye atılarak 0170-07-31T22:00 hâline gelir.

Adı "local" olsa da bu tür kullanıcının saat dilimini bilmez. MDN'in ifadesiyle alan "yerel bir tarih ve saati" temsil eder, "kullanıcının yerel tarih ve saatini" değil. Kullanıcının saat diliminde var olmayan bir saat, örneğin yaz saati uygulamasına geçişteki atlanan bir saat bile girilebilir. Saat dilimini de almak isterseniz MDN iki yol önerir: kullanıcının saat dilimi zaten biliniyorsa onu type="hidden" bir alanda göndermek, bilinmiyorsa bir <select> ile seçtirmek. Her iki durumda da tarih-saat ve saat dilimi sunucuya ayrı değerler olarak gider ve onları uygun şekilde saklamak sunucunun işidir.

<form action="/rezervasyon" method="post">
  <label for="baslangic">Rezervasyon başlangıcı (Haziran 2027)</label>
  <input
    id="baslangic"
    name="baslangic"
    type="datetime-local"
    min="2027-06-01T08:30"
    max="2027-06-30T16:30"
    required />
  <!-- oturum açmış kullanıcının bilinen saat dilimi -->
  <input type="hidden" name="saat_dilimi" value="+03:00" />
  <button type="submit">Rezervasyon yap</button>
</form>

Bu örnekte geçerli aralık 1 Haziran 08:30 ile 30 Haziran 16:30 arasındaki tüm anlardır. MDN önemli bir ayrıntıyı vurgular: günün saati yalnızca aralığın ilk ve son gününde kısıtlanır. 15 Haziran gece 23:00 de geçerlidir. Her gün için mesai saati gibi bir kural istiyorsanız tarih ve saati ayrı date ve time alanlarıyla almak daha uygundur. MDN ayrıca step ile gün atlamanın bu türde belge yazıldığı sırada hiçbir uygulamada etkili çalışmadığını not eder.

type="month" ve type="week"

month türü belirli bir yılın belirli bir ayını alır. Değeri yyyy-mm biçimindedir, örneğin 2027-06. Adım ay cinsindendir, varsayılanı 1'dir ve adım başlangıcı belirtilmezse 1970-01 kabul edilir. week türü ise yıl ve ISO 8601 hafta numarasını alır; değeri yyyy-Www biçimindedir, örneğin 2027-W23. Adım hafta cinsindendir; tarayıcı bunu 604.800.000 milisaniyeyle çarpar ve başlangıç verilmezse 1970-W01 haftasının başlangıcını temsil eden -259.200.000 değerini kullanır.

Bu iki tür için MDN, tarayıcı desteğinin sınırlı olduğunu ve desteklemeyen tarayıcılarda alanın düz bir type="text" gibi davrandığını belirtir. Güncel durum için MDN uyumluluk tablosuna bakın. Metin alanına düşüldüğünde asıl sorun veri tutarlılığıdır: kullanıcı "07/2027", "Haziran 2027" veya "2027-06" gibi farklı biçimler yazabilir. MDN bunun için bir ara çözüm gösterir: month alanına pattern eklemek. Ay türü bu özniteliği kullanmaz, ama alan metne düşerse kalıp devreye girer.

<label for="ziyaret">Hangi ay gelmek istersiniz? (Haziran ile Eylül 2027, örnek: 2027-07)</label>
<input
  id="ziyaret"
  name="ziyaret"
  type="month"
  min="2027-06"
  max="2027-09"
  pattern="[0-9]{4}-[0-9]{2}"
  required />

Bu kalıp "0000-42" gibi anlamsız değerleri engellemez ve kullanıcıya hangi biçimin beklendiğini kendiliğinden söylemez; bu yüzden etikette örnek bir değer gösterdik. MDN'in tarayıcılar arası en sağlam önerisi, ay ve yılı (veya hafta ve yılı) iki ayrı <select> ile almaktır. Hafta için bir seçim listesi hazırlarken bazı yılların 53 hafta sürdüğünü unutmayın.

JavaScript ile değer okumak

Bu türlerin hepsi HTMLInputElement arayüzünü kullanır. value özelliği dizeyi, valueAsNumber milisaniye cinsinden sayıyı, valueAsDate ise bir Date nesnesini verir. MDN'in date sayfasındaki örnekte 2017-06-01 değeri için valueAsNumber sonucunun 1496275200000 olduğu yazılıdır:

const tarih = document.querySelector('input[type="date"]');
tarih.value = "2017-06-01";
console.log(tarih.value);         // "2017-06-01"
console.log(tarih.valueAsNumber); // MDN'e göre 1496275200000

Betik tarafının ayrıntıları için JavaScript öğrenme rehberine bakabilirsiniz.

Doğrulama bu türlerde nasıl çalışır?

MDN, bu türlerin varsayılan olarak biçim dışında bir denetim yapmadığını söyler. Arayüzler genellikle tarih olmayan bir şey girmenize izin vermez, ama kullanıcı alanı boş bırakıp gönderebilir. Bu yüzden zorunlu alanlara required, aralık için min ve max eklemelisiniz. Aralık dışı değer rangeUnderflow veya rangeOverflow, adıma uymayan değer stepMismatch, boş zorunlu alan valueMissing üretir. Her zamanki gibi bu denetim sunucu doğrulamasının yerine geçmez.

Sık yapılan hatalar

• value veya min değerini yerel biçimde yazmak. value="07.11.2026" geçersizdir; doğrusu 2026-11-07. Biçimi bozuk min ve max sessizce yok sayılır.
• Saat adımını dakika sanmak. step="15" on beş dakika değil, on beş saniyedir ve arayüze saniye ekler. On beş dakika için step="900" yazın.
• datetime-local değerini UTC sanmak. Değerde saat dilimi yoktur; saat dilimini ayrı bir alanla alın.
• Her gün için saat sınırını datetime-local ile koymaya çalışmak. Saat sınırı yalnızca ilk ve son günde geçerlidir.
• month ve week türlerinin her yerde seçici göstereceğini varsaymak. Metin alanına düşme ihtimaline karşı etikette örnek biçim verin veya ayrı seçim listeleri kullanın.
• Ters aralığı tarih türlerinde denemek. min değerinin max değerinden büyük olmasına yalnızca time türü anlam verir.

Sık Sorulan Sorular

Tarih alanında gün.ay.yıl biçimini zorlayabilir miyim?

Görünen biçim kullanıcının yerel ayarına bağlıdır ve HTML ile değiştirilemez. Sunucuya giden değer her zaman yyyy-mm-dd olduğu için görünen biçimi zorlamanız da gerekmez.

Saniyeleri nasıl gösteririm?

time veya datetime-local alanına 60'a bölünmeyen bir step verin, örneğin step="1". Bu durumda değer HH:mm:ss biçimine geçer.

Bugünden önceki tarihleri nasıl engellerim?

min özniteliğine bugünün tarihini yyyy-mm-dd biçiminde yazın. Değer sayfa üretilirken sunucuda ya da betikle doldurulmalıdır; MDN'in tanımında min her zaman sabit bir tarih dizesidir.

Saat dilimini neden datetime-local almıyor?

Tür bilerek saat dilimi içermez. MDN, saat dilimi gerekiyorsa onu gizli bir alanla veya ayrı bir seçim listesiyle ayrı bir değer olarak göndermenizi önerir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · HTML form doğrulama · input türleri · time ve data etiketi · select ve datalist · number ve range