Input Date Placeholder Sorunu ve Çözümü

Merhabalar. Bu yazımda input elemanlarından biri olan date için placeholder probleminden bahsedeceğim. HTML sayfasında bir date input yani tarih seçici kullandığınız zaman placeholder özelliğinin işe yaramadığını göreceksiniz.

İlk başta gereksiz veya detay olarak görünen bu sorunu küçük bir javascript yapısıyla çözmek mümkün. O zaman çözüm adımlarına geçelim.

Input date elemanı yerine sayfamıza input text elemanı ekliyoruz.

<input type="text" placeholder="Gidiş tarihini seçiniz." />

Ardından bu elemanın onfocus ve onblur olaylarına bir function yazıyoruz. Son aşamada elemanımızın hali aşağıdaki gibi olacaktır.

<input type="text" placeholder="Gidiş tarihini seçiniz." onfocus="typeChange(this,'text','date')" onblur="typeChange(this,'date','text')" />

Gördüğünüz gibi her iki olay için de typeChange adında fonksiyon çalışmasını belirittim. Gelelim bu fonksiyondaki parametrelere;

this: üzerinde işlem yapılacak olan nesneyi parametre olarak gönderiyor. Bu parametre sayesinde input nesnesinin value yani değerine erişim sağlayacağım.
text ve date: Bu parametreler de sırasıyla hangi türden hangi türe dönüşüm yapacağımı belirtiyor.

Aklınıza şu soru gelmiş olabilir: 2. ve 3. parametrelere neden ihtiyaç var? Focus olayında input'un text olan türünü date'e çevirsek olmaz mı? Tabi ki olur ancak eksik olur. Ya kullanıcı input'a tıkladıkdan sonra değer girmezse ne olacak? İşte bu durumda input text'ten date'e çevrilmiş olacak ve placeholder kaybolacak. İşte bu sorunun çözümü için kullanıcı input'tan ayrıldığı zaman yani blur olayında içeriği kontrol etmem gerekiyor.

Gelelim javascripr fonksiyonuna;

// Input Change
function typeChange(e,type,newType){
    if(type=='text'){
        e.type = newType;
    } else if (type=="date") {
        if(e.value != null)
            e.type = newType;
    }
}

Bu fonksiyondaki e parametresi üzerinde işlem yapılacak olan elementi, type parametresi input'un mevcut türünü, newType parametresi ise input'un çevrileceği türü belirtiyor.

Eğer input'un mevcut türü text ve çevrilmek istenen türü ise date ise ilk if koşulu çalışacak ve elementin türü doğrudan date'e çevrilecektir. Buraya kadar problem yok.

Ancak onblur olayında yani date'ten ayrılma durumunda elemanın içerisinde veri olup olmadığını kontrol etmemiz gerekiyor. Eğer date input'a düzgün bir tarih girilirse değer olarak null dönecektir. Bu yüzden kontrolü null üzerinde oluşturuyorum. Eğer date input null'dan farklıysa yani input'a geçerli bir tarih girilmemişse bu sefer placeholder'ın geçerli olması için input'un türünü text'e çeviriyoruz.

Sayfamızın son hali aşağıdaki gibi olacaktır.

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <input type="text" placeholder="Gidiş tarihini seçiniz." onfocus="typeChange(this,'text','date')" onblur="typeChange(this,'date','text')" />

    <script>
    // Input Change
    function typeChange(e,type,newType){
        if(type=='text'){
            e.type = newType;
        } else if (type=="date") {
            if(e.value != null)
                e.type = newType;
        }
    }
    </script>

</body>
</html>

Soru, görüş ve önerilerinizi yorum olarak belirtebilirsiniz.
Hayırlı çalışmalar dilerim.

20.10.2019

10030

html javascript input date placeholder

Front End JavaScript