Optimize Ediciler için JavaScript: Bir DateTime Seçici Ekleme

Hepimiz oradaydık: tarihi bir forma manuel olarak eklemenin sinir bozucu görevi.

Şimdi sizi bilmem ama tarih formatı ararken beynim aşırı hızlanıyor. AA/GG/YYYY için mi gidiyorsunuz? Bunun yerine YYYY-AA-GG istersek ne olur? Şubat'ın kaç günü var?

Bu blog gönderisi, formlarınıza bir DateTime Picker giriş alanı ekleyerek kodunuzu optimize etmenize yardımcı olacak bazı JavaScript işlevlerinde size yol gösterecektir.

İş Durumu: DateTime Seçici Ekleme

Bu varsayımsal senaryoda, aşağıdaki hipoteze ulaşırız:

Bu hipotezi test etmek için aşağıdaki değişiklikleri uygulayacağız:

Deneyde Kullanılan Kod

Şimdi eğlenceli kısma geçelim!

Değişikliği gerçekleştirmek için test sayfasında aşağıdaki JavaScript kodunu çalıştırıyoruz. Kodu kopyalayın ve kendiniz deneyin!

 var dateInput = document.querySelector("#date");
var desteklenen = true;
var test = document.createElement("input");
denemek {
  test.type = "tarih";
} yakalama (e) {
  desteklenen = yanlış;
}
if (desteklenir) {
  dateInput.setAttribute("tür", "tarih");
  dateInput.setAttribute("değer", getFormattedDate(0));
  dateInput.setAttribute("min", getFormattedDate(-1));
  dateInput.setAttribute("maks", getFormattedDate(1));
}
function getFormattedDate(changeYear) {
  var bugün = yeni Tarih();
  var dd = String(today.getDate()).padStart(2, "0");
  var mm = String(today.getMonth() + 1).padStart(2, "0");
  var yyyy = bugün.getFullYear() + changeYear;
  formattedDate = yyyy + "-" + aa + "-" + gg;
  biçimlendirilmişDate döndür;
}

Kodun Dağılımı

1. Yeni Sözdizimi

Döküm, yukarıdaki örnekteki tüm yeni sözdiziminin üzerinden geçilerek başlar. Bu makale bir serinin parçası olduğundan , serideki diğer makalelerdeki (Dönüştür blogunda yayınlanan bu makale dahil) sözdiziminin tam belgelerini kontrol ettiğinizden emin olun.

try {} catch (error) {}, belirli bir kodu denemek ve gerekirse hataları yakalamak için kullanabileceğiniz bir ifadedir. Kod çalıştığında ve herhangi bir hata oluşmadığında, yakalamayı atlayacaktır.

Bir hata döndürürse, onu yakalayacaktır. Komut dosyası şimdi yakalama gövdesi arasındaki kodu yürütecektir. İşlevdeki hatayı ilettiği için, belirli sorunu bulmak için onu console.log'a kaydedebilirsiniz.

Genellikle, bir hatayla karşılaştığınızda, kod yürütmeyi durdurur. Bu ifade, bir hata beklediğinizde komut dosyanıza devam etmenizi sağlar.

.type, DOM'daki bir öğenin "type" öznitelik değerini ayarlayan bir yöntemdir.

.getDate(), bir tarih nesnesinin gününü döndüren bir yöntemdir. Günü bir sayı olarak döndürür.

.padStart(targetLength, padString), bir dizeyi istediğimiz miktarda farklı bir karakterle doldurmamızı sağlayan bir yöntemdir. TargetLength bağımsız değişkeninde bir dizeyi doldurmak istediğiniz sayıyı iletin. padString bağımsız değişkeninde dolgu olarak kullanılan dizeyi aktarırsınız. Doldururken padString uzunluğunu dikkate alacaktır.

.getMonth(), tarih nesnesinin ayını bir sayı olarak döndüren bir yöntemdir. 0'dan saymaya başlıyor, yani bu Ocak olacak. 11 numara Aralık olacak.

String(), iletilen bağımsız değişkeni bir dize değerine dönüştürmeye çalışan bir yöntemdir. Bu yöntem genellikle sayıları dizgelere dönüştürmek istediğinizde kullanılır.

.getFullYear(), bir tarih nesnesinin yılını döndüren bir yöntemdir.

return, işlevlerle çalışırken yaygın ve önemli bir ifadedir. Bazen veri almak ve başka bir yerde kullanmak için bir işlevi çalıştırmanız gerekir. Bir işlevdeki bir dönüş durumu, işlevin yürütülmesini sona erdirir ve ifadenin doğru olanı neyse onu döndürür.

2. Mantık

 var dateInput = document.querySelector("#date");

querySelector metodu ile tarih giriş alanlarını seçerek başlıyoruz. Seçicimiz olarak #date kullanmak için giriş alanımıza id=”date” ekledik. Öğeyi yeni bildirilen dateInput değişkenimize atadık.

 var desteklenen = true;

Ardından, desteklenen değişkeni bildiririz. Boolean true değerini yeni bildirilen değişkenimize atadık. Tarayıcı bir tarih-saat seçiciyi desteklemiyorsa bu değeri daha sonra değiştireceğiz.

 var test = document.createElement("input");

Yalnızca bu türün desteklenip desteklenmediğini kontrol etmek için kullanacağımız bir giriş alanı oluşturmamız gerekiyor. Bunu .createElement yöntemiyle yapıyoruz.

Girdi öğesini oluşturmak için "girişi" bir dize olarak iletiyoruz. Bu öğeyi yeni bildirilen test değişkenine kaydederiz.

Değişikliğimizin desteklenip desteklenmediğini kontrol etmek için aşağıdaki try ifadesini kullanacağız:

 denemek {

try anahtar sözcüğünü yazarak başlayın. İfadeyi küme paranteziyle açıyoruz.

İşlev, bu parantezler arasındaki her şeyi deneyecektir. Sadece bir hata oluşup oluşmadığını görmek için kodu çalıştırır.

 test.type = "tarih";

Test giriş alanımıza tarih tipini ayarlayarak tarih tipinin desteklenip desteklenmediğini test edebiliriz. Herhangi bir hata oluşmazsa, tarayıcının bunu desteklediğini biliyoruz.

 } yakalama (e) {

Ardından, kapanış parantezinden sonra catch ifademizi yazıyoruz. Bir hata yakaladığımızda küme parantezleri arasındaki kısım çalışacaktır.

Argüman olarak bir "e" koyarak, bunu catch ifademizde kullanabiliriz. Bunu, örneğin belirli bir hatayı console.log için kullanabilirsiniz.

 desteklenen = yanlış;

Hatayı yakalarsak, desteklenen değişkeni false olarak değiştirmemiz gerekir. Bu değeri daha sonra değişikliği yapmak isteyip istemediğimizi belirlemek için kullanacağız.

 }

Ardından, bir kapatma ayracı ile catch ifadesini kapatın.

 if (desteklenir) {

Bir if ifadesini çalıştırmak için desteklenen değişkenin değerini kullanacağız. Değişken doğruysa, ifadeyi çalıştırır. Bu şekilde tarayıcının desteklenmediğinden emin oluyoruz.

 dateInput.setAttribute("tür", "tarih");

Bir tarih saat seçicisi eklemek için, dateInput değişkenimize tarih değerine sahip öznitelik türünü eklememiz yeterlidir. Tarayıcıya bağlı olarak, artık tarih seçmek için tıklayabileceğiniz bir simge gösterecektir.

 dateInput.setAttribute("değer", getFormattedDate(0));

Ayrıca giriş alanına varsayılan bir tarih eklemek istiyoruz. Tarihi bir dize olarak tutan bir değer özniteliği ekleyerek bir tarih alanının varsayılan tarihini ayarlayabilirsiniz.

Bugünün tarihini doğru formatta almak için tanımladığımız getFormattedDate fonksiyonunu kullanın. İşlev, çağırırken argüman olarak bir sayı girerek yıl ekleyebilir veya çıkarabilir.

 dateInput.setAttribute("min", getFormattedDate(-1));

Bu şekilde, seçicinin minimum tarihini bugünden 1 yıl öncesine ayarlamak için bu satırı kullanabiliriz. Bunu argüman olarak -1 ileterek yapabilirsiniz. Bu, kullanıcının minimum tarihten önceki bir tarihi seçmesini kısıtlayacaktır.

 dateInput.setAttribute("maks", getFormattedDate(1));

Kullanıcıların seçebileceği maksimum miktar için de aynısını yapın. Argüman olarak bir "1" ileterek bundan bir yıl sonraki maksimum yılı ayarlayın.

 }

if ifadesini küme paranteziyle kapatın. Bu değişiklik şimdi giriş alanında görünecektir.

Hala if ifademizde kullanılan işlevi tanımlamamız gerekiyor. Bu işlevin şu biçimde bir tarih döndürmesini istiyoruz: yyyy-aa-gg.

 function getFormattedDate(changeYear) {

Bu sonucu elde etmek için, birini tanımlamak için function anahtar sözcüğünü kullanarak başlayın. Fonksiyonumuza getFormattedDate ismini veriyoruz.

Ne tür bir tarihin döndürüleceği üzerinde biraz kontrol sahibi olmak için, argüman olarak changeYear'ı ayarlayın.

Bunu, fonksiyon çağrıldığında neyin aktarılacağını kontrol etmek için fonksiyon gövdesinde anahtar kelime olarak kullanabiliriz.

 var bugün = yeni Tarih();

Yeni bir tarih nesnesi oluşturarak bu işlev gövdesini başlatın. Yeni tarih nesnesinin oluşturulduğu an, saklanan saat olacaktır. Bu, yeni nesnemizi yeni bildirilen bugün değişkenine atayabileceğimiz anlamına gelir.

 var dd = String(today.getDate()).padStart(2, "0");

getDate yöntemi, tarihimizin günlerini alır. Günler tek haneli olduğunda padStart yöntemi ile sayının önüne 0 ekleyecektir.

Aksi takdirde, bu, giriş alanımız için yanlış biçim olacaktır. Ayrıca sayılarımızı daha sonra birleştirebilmemiz için sayıyı bir dizgeye dönüştürmemiz gerekiyor. Aksi takdirde, program toplamayı kullanır.

 var mm = String(today.getMonth() + 1).padStart(2, "0");

Burada, bugünün tarihinin aylarını almak için getMonth'u kullanıyoruz. Dönen sayıya 1 ekleyerek küçük bir düzeltme yapıyoruz. Ardından, sayı tek basamaklıysa sayıyı sıfırla doldurduk. Bu yöntem, ay verileri için doğru formata sahip olmamızı sağlar.

 var yyyy = bugün.getFullYear() + changeYear;

Ardından, getFullyear yöntemiyle bugünün yılını elde ederiz. Yılı değiştirmek için işlevden geçen sayıyı kullanın.

 formattedDate = yyyy + "-" + aa + "-" + gg;

Ardından, dize birleştirmeyi kullanarak tüm değişkenlerimizi biçimlendirilmiş bir tarihte birleştiririz.

 biçimlendirilmişDate döndür;

Fonksiyon çağıran tarafından kullanılabilmesi için formattedDate değişkenini döndürürüz.

 }

Son olarak fonksiyonumuzu bir küme paranteziyle kapatıyoruz ve scriptimizi sonlandırıyoruz. Komut dosyası, işlevler kodun en üstüne kaldırıldığından, bildirilmeden önce bu işlevi kullanabilir. Aynı şey değişkenler için de geçerlidir. formattedDate işlevini if ​​ifadesinin üzerine taşırsanız kod biraz daha hızlı çalışabilir.

3. Egzersiz

Yani, şimdi tüm süreci ortaya koydunuz, geriye kalan tek şey denemeniz. Ve onunla eğlenmeyi unutma!

Devam edin ve giriş alanını değiştirin, böylece min alanı bugünden tam olarak iki yıl sonraki tarihi içerir. Ardından, bundan iki yıl sonra maksimum bir tarih ekleyin. İyi şanlar!

Anlayamıyor musun? Bana LinkedIn'den bir mesaj gönder, sana yardım edeceğim!

Son makalemizi kaçırdıysanız, sitenize nasıl toplam indirim bölümü ekleyeceğinizi ve diğer gelişmiş dönüşüm optimizasyon tekniklerini inceleyin.