Sözle Kontrol Edilebilen Tarih Input’u

Bir form doldururken tarih seçmek beklendiği kadar kolay olmayabiliyor. Bu çoğunlukla ürünün tarih seçicisinin fazla karmaşık kurgulanmasından kaynaklanıyor. Web uygulamaların çoğunlukla mobile cihazlardan kullanıldığını göz önünde bulundurarak, artık formlardaki input’ların native HTML ile inşa edilmesinde fayda var.

3 min readMay 27, 2025

Her şeye rağmen, yine de kendi custom tarih seçicinizi inşa etmek istiyorsanız, yanına bir de sesli olarak tarih seçici özelliği eklemeyi düşünebilirsiniz.

Bir input’u sözlü olarak yönetmek düşündüğünüzden daha kolay.

“19 Mayıs 1881” dediğinizde veya “geçen hafta” dediğinizde, “dün”, “yarın” … dediğinizde sizi anlayan bir input’u gelin birlikte inşa edelim.

Live Demo: https://gayret.github.io/speech-controlled-input-date

GitHub: https://github.com/gayret/speech-controlled-input-date

Tüm bunları sağlarken hiçbir bağımlılık kullanmadım JavaScript’in reserved olarak sağladığı aşağıdaki iki yöntemi kullandım.

SpeechRecognition API (Web Speech API)
Regex ile doğal dil çözümleme

SpeechRecognition API ile Türkçe Konuşma Tanıma

Nasıl çalışır?

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = 'tr-TR';

🔗 MDN: Web Speech API — SpeechRecognition

Bu API, tarayıcının mikrofonla aldığı sesi Google’ın ses tanıma servislerine göndererek dönen metni bize verir. webkitSpeechRecognition Chrome için gereklidir.

Event ile sonuç alma

recognition.onresult = (event) => {
  const transcript = event.results[0][0].transcript;
};

parseTurkishDate: Türkçe Doğal Dil Tarih Çözümleme Fonksiyonu

Genel Mantık

function parseTurkishDate(text) {
  // text: kullanıcıdan gelen ifade (örn: "iki hafta sonra")
  // Fonksiyon Date nesnesi döndürür ya da null.
}

Fonksiyon 5 büyük yapıyı algılar. İhtiyaca göre bu yapılar artırılabilir.

1- Bugün, Yarın, Dün

if (text.includes('bugün')) return result;
if (text.includes('yarın')) result.setDate(result.getDate() + 1);
if (text.includes('dün')) result.setDate(result.getDate() - 1);

Doğrudan eşleşme ile bugünkü tarihi referans alır.

2- Göreli Zamanlar: “2 yıl önce”, “3 hafta sonra”

const relatifRegex = /(\d+)\s+(gün|hafta|ay|yıl)\s+(önce|sonra)/;

Burada Regex kullanarak sayıyı ve zamanı alıyoruz. önce ise geriye gidiyor, sonra ise ileri.

switch (birim) {
  case 'gün': result.setDate(result.getDate() + yon * miktar); break;
  case 'hafta': result.setDate(result.getDate() + yon * miktar * 7); break;
  // ...
}

3- Haftalık İfade + Gün Adı: “Geçen hafta salı”

const haftaGunRegex =
  /(geçen hafta|önümüzdeki hafta|bu hafta)?\s*(pazar|pazartesi|...)/;

Burada gün adıyla birlikte bağlam da analiz ediliyor. Mevcut günden hedef güne fark hesaplanıyor.

let fark = hedefGun - bugunGun;
if (baglam === 'geçen hafta') fark -= 7;
else if (baglam === 'önümüzdeki hafta') fark += 7;

4- Sadece Zaman İfadesi: “Geçen yıl”, “önümüzdeki ay”

Bu tür ifadeler sabit kelime kontrolüyle yakalanır:

if (text.includes('geçen yıl')) {
  result.setFullYear(result.getFullYear() - 1);
}

5- Tam Tarih: “12 Mart 2022”, “5 Ekim”

const tarihRegex =
  /(\d{1,2})\s+(ocak|şubat|mart|...)(?:\s+(\d{4}))?/;

Aylar dizini ile eşleştirilip doğrudan new Date(yıl, ay, gün) nesnesi döndürülür.

Sonuçları Input Alanına Yazma

input[type="date"] alanı yyyy-mm-dd formatı bekler:

const yyyy = parsedDate.getFullYear();
const mm = String(parsedDate.getMonth() + 1).padStart(2, '0');
const dd = String(parsedDate.getDate()).padStart(2, '0');
dateInput.value = `${yyyy}-${mm}-${dd}`;

Hata Yönetimi

recognition.onerror = (event) => {
  console.error('Hata:', event.error);
};

Kullanıcı mikrofon izni vermezse, bağlantı koparsa veya başka bir hata oluşursa kullanıcı bilgilendirilir.

Test Edilebilecek Örnek Sesli Komutlar

“Bugün”
“Yarın”
“Geçen hafta çarşamba”
“3 hafta sonra”
“5 Ekim 2022”
“Geçen yıl”
“2 ay önce bugün”