Velo by Wix Rehberi: Ziyaretçinin Yaşını Tarih Seçici Öğe Kullanarak Hesaplattırın

"Ziyaretçinin yaşı tarih seçici öğe ve Wix Velo kullanılarak nasıl hesaplattırılır" rehberi bu konunun derinine inmeden önce bilmeniz gereken tüm adımları açıklıyor. Kod blokları ve görsellerle destekleneceksiniz. Velo API referansı kullanılmıştır.

Ziyaretçinin Yaşı Tarih Seçici öğe ve Wix Velo kullanılarak nasıl hesaplattırılır?

Bu rehberde, basit bir yaş hesaplayıcıyı tarih seçici öğe üzerinde seçilen tarihi kullanarak hazırladım. İhtiyaç duyacağımız öğeleri, gerekli ve kodun ne olduğuna dair çok önemli adımları da açıkladım.

Yaş hesaplama, Velo'nun kullanıcı bilgilerinin toplanması ve bu bilginin işlenmesi noktasında sunduğu çok önemli özelliklerin kullanımına sadece bir örnek.

Gelin şimdi, otomatik olarak tarih seçici öğeyi kullanarak ziyaretçilerinizin yaşlarını hesaplamalarına imkan verin. Canlı örneğe göz atarak anlatılacakları daha iyi anlayabilirsiniz.

1) Tarih Seçici Öğe ve Metin Öğesini Ekleyin

Editörde, tarih seçici öğe ve bir tarih seçildiğinde seçilen tarihi gösteren metnin yer aldığı bir düzen oluşturdum.

Bir konteyner kutuyu tarih seçiciyi ve metni üzerine eklemek için kullandım.

2) Tarih Seçiciyi Doğru Şekilde Kurun

Daha sonra, tarih seçiciyi kutunun üzerine yerleştirdim ve ayarlarını yaptım.

Alan başlığını düzenleyin.

Gelecek tarihleri kapatın.

3) Yaş'ı Bir Metin Olarak Gösterin

Daha sonra da bir metin öğesini seçilen yaşı göstermesi için tarih seçicinin hemen altına ekledim.

Metin, kullanıcı bir tarih seçinceye dek gizli kalacak.

Tarih Seçici için Kodu Nasıl Yazacağız?

Bu bölümde, kullandığımız kodu tarih yöntemleriyle birlikte açıklıyoruz.

$w.onReady(() => { 

});

Tüm sayfa öğeleri yüklenmeden kodun çalıştırılması için onReady fonksiyonunu sayfa başına ekledim.

$w.onReady(() => { 
$w("#datePickerID").onChange(() =>{

});
});

onReady fonksiyonunun içerisine onChange işlevini tarih seçici öğe için ekledim. Bu, kullanıcının tarih seçici ile her etkileşiminde yeni bir tetikleme (tarihi değiştirme) şansını sunar.

$w.onReady(() => { 
$w("#datePickerID").onChange(() =>{

var todaysDate = new Date().getFullYear();

});
});

todaysDate, ismindeki bir değişkeni new Date() nesnesine atayarak bugüne ait tarih ve zaman bilgisini eşledim. İşimiz sadece yıl bilgisi ile olduğundan (kesin tarihle ilgilenmiyoruz) getFullYear yöntemini de kodda kullandım.

$w.onReady(() => { 
$w("#datePickerID").onChange(() =>{

var todaysDate = new Date().getFullYear();
let inputDate = $w("#datePickerID).value;

});
});

inputDate isimli değişkeni, tarih seçiciden seçilen tarihin değerine atadım.

$w.onReady(() => { 
$w("#datePickerID").onChange(() =>{

var todaysDate = new Date().getFullYear();

let inputDate = $w("#datePickerID).value;
var inputDateYear = inputDate.getFullYear();

});
});

Date Picker (tarih seçici) de kesin tarihi kullandığı için bunda da getFullYear() yöntemiyle sadece kullanıcının seçtiği tarih bilgisi içinden yılı almış oldum.

$w.onReady(() => { 
$w("#datePickerID").onChange(() =>{

var todaysDate = new Date().getFullYear();

let inputDate = $w("#datePickerID).value;
var inputDateYear = inputDate.getFullYear();

$w("#ageText").show();

});
});

Metni, bir tarih seçilinceye dek gizlediğimizi hatırlıyor musunuz? show() yöntemiyle bunu burada göstermeye başladık. Bu, bir tarih seçildiğinde o metin öğesinin görüntülenmesi sağlayacak.

$w.onReady(() => { 
$w("#datePickerID").onChange(() =>{

var todaysDate = new Date().getFullYear();

let inputDate = $w("#datePickerID).value;
var inputDateYear = inputDate.getFullYear();

$w("#ageText").show();

$w("#ageText").text = `You are "${String(todaysDate - Number(inputDateYear))}" years old`'

});
});

Sonunda, Template Literals kullanarak yaşa dair bir mesajı yayınladık. Bu mesaj şöyle diyor:

You are "AGE" years old

"AGE" hesaplanan yaşı ifade ediyor.

Kodumuzun Son Hali

$w.onReady(() =>{
$w("#datePickerID").onChange(() =>{

var todaysDate = new Date().getFullYear();//Current year

let inputDate = $w("#datePickerID).value;//Value from date picker
var inputDateYear = inputDate.getFullYear();

$w("#ageText").show();

$w("#ageText").text = `You are "${String(todaysDate - Number(inputDateYear))}" years old`'

});

});

Buraya kadar okuduğunuz için teşekkürler. Daha fazla sorunuz olursa post on forum (bir forum gönderisi oluşturun) veya get in contact with us.(bizimle iletişime geçin)