Bir Form Alanını Bugünün Tarihi ve JavaScript veya JQuery ile Önceden Doldurma
Pek çok çözüm, her form girişiyle birlikte tarihi saklama fırsatı sunarken, bunun bir seçenek olmadığı başka zamanlar da vardır. Müşterilerimize, sitelerine gizli bir alan eklemelerini ve form girişlerinin ne zaman girildiğini takip edebilmeleri için bu bilgiyi girişle birlikte aktarmalarını öneriyoruz. JavaScript kullanarak bu kolaydır.
Bir Form Alanını Bugünün Tarihi ve JavaScript ile Önceden Doldurma
<!DOCTYPE html>
<html>
<head>
<title>Date Prepopulation with JavaScript</title>
</head>
<body>
<form>
<!-- Hidden field for the date -->
<input type="hidden" id="hiddenDateField" name="hiddenDateField">
</form>
<script>
// Function to get today's date in the desired format
function getFormattedDate() {
const today = new Date();
const formattedDate = today.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
return formattedDate;
}
// Use JavaScript to set the value of the hidden field to today's date
document.getElementById('hiddenDateField').value = getFormattedDate();
</script>
</body>
</html>
Sağlanan HTML ve JavaScript kodunu adım adım inceleyelim:
<!DOCTYPE html>
ve<html>
: Bunlar, bunun bir HTML5 belgesi olduğunu belirten standart HTML belge bildirimleridir.<head>
: Bu bölüm genellikle, web sayfasının başlığı gibi belgeyle ilgili meta verileri eklemek için kullanılır.<title>
eleman.<title>
: Bu, web sayfasının başlığını "JavaScript ile Tarih Önceden Doldurma" olarak ayarlar.<body>
: Bu, görünür içerik ve kullanıcı arayüzü öğelerini yerleştirdiğiniz web sayfasının ana içerik alanıdır.<form>
: Giriş alanlarını içerebilen bir form öğesi. Bu durumda, bugünün tarihiyle doldurulacak gizli giriş alanını içermek için kullanılır.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Bu gizli bir giriş alanıdır. Sayfada görünmez ancak veri depolayabilir. JavaScript'te tanımlanması ve kullanılması için ona “hiddenDateField” kimliği ve “hiddenDateField” adı verilmiştir.<script>
: Bu, JavaScript kodu yazabileceğiniz bir JavaScript komut dosyası bloğunun açılış etiketidir.function getFormattedDate() { ... }
: Bu, adı verilen bir JavaScript işlevini tanımlar.getFormattedDate()
. Bu fonksiyonun içinde:- Yeni bir oluşturur
Date
kullanarak geçerli tarih ve saati temsil eden nesneconst today = new Date();
. - Tarihi, istenen formatta (aa/gg/yyyy) bir dize halinde formatlar.
today.toLocaleDateString()
.'en-US'
bağımsız değişken biçimlendirme için yerel ayarı (Amerikan İngilizcesi) ve nesneyi belirtir.year
,month
, veday
özellikler tarih biçimini tanımlar.
- Yeni bir oluşturur
return formattedDate;
: Bu satır, biçimlendirilmiş tarihi bir dize olarak döndürür.document.getElementById('hiddenDateField').value = getFormattedDate();
: Bu kod satırı:- Kullanımlar
document.getElementById('hiddenDateField')
“hiddenDateField” kimliğine sahip gizli giriş alanını seçmek için - Ayarlar
value
Seçilen giriş alanının özelliğini, tarafından döndürülen değeregetFormattedDate()
işlev. Bu, gizli alanı belirtilen formattaki bugünün tarihiyle doldurur.
- Kullanımlar
Sonuç olarak, sayfa yüklendiğinde, "hiddenDateField" kimliğine sahip gizli giriş alanı, aşağıdaki şekilde belirtildiği gibi, başında sıfırlar olmadan aa/gg/yyyy biçiminde bugünün tarihiyle doldurulur. getFormattedDate()
fonksiyonu.
Bir Form Alanını Bugünün Tarihi ve jQuery ile Önceden Doldurma
<!DOCTYPE html>
<html>
<head>
<title>Date Prepopulation with jQuery and JavaScript Date Object</title>
<!-- Include jQuery from a CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<!-- Hidden field for the date -->
<input type="hidden" id="hiddenDateField" name="hiddenDateField">
</form>
<script>
// Use jQuery to set the value of the hidden field to today's date
$(document).ready(function() {
const today = new Date();
const formattedDate = today.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
$('#hiddenDateField').val(formattedDate);
});
</script>
</body>
</html>
Bu HTML ve JavaScript kodu, gizli bir giriş alanını bugünün tarihiyle, mm/gg/yyyy olarak biçimlendirilmiş, başında sıfır olmadan önceden doldurmak için jQuery'nin nasıl kullanılacağını gösterir. Adım adım parçalayalım:
<!DOCTYPE html>
ve<html>
: Bunlar, bunun bir HTML5 belgesi olduğunu belirten standart HTML belge bildirimleridir.<head>
: Bu bölüm web sayfası için meta verileri ve kaynakları eklemek için kullanılır.<title>
: Web sayfasının başlığını "jQuery ve JavaScript Date Object ile Tarih Önceden Doldurma" olarak ayarlar.<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Bu satır, bir içerik dağıtım ağından (CDN) kaynağını belirterek jQuery kütüphanesini içerir. jQuery kütüphanesinin web sayfasında kullanıma hazır olmasını sağlar.<body>
: Bu, görünür içerik ve kullanıcı arayüzü öğelerini yerleştirdiğiniz web sayfasının ana içerik alanıdır.<form>
: Giriş alanlarını içermek için kullanılan bir HTML form öğesi. Bu durumda gizli giriş alanını kapsüllemek için kullanılır.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Web sayfasında görünmeyecek gizli bir giriş alanı. Buna "hiddenDateField" kimliği ve "hiddenDateField" adı atanmıştır.<script>
: Bu, JavaScript kodu yazabileceğiniz bir JavaScript komut dosyası bloğunun açılış etiketidir.$(document).ready(function() { ... });
: Bu bir jQuery kod bloğudur. Şunu kullanır:$(document).ready()
sayfa tamamen yüklendikten sonra içerilen kodun çalışmasını sağlayan işlev. Bu fonksiyonun içinde:const today = new Date();
yeni yaratırDate
Geçerli tarih ve saati temsil eden nesne.const formattedDate = today.toLocaleDateString('en-US', { ... });
kullanarak tarihi istenen formatta (aa/gg/yyyy) bir dize halinde formatlar.toLocaleDateString
yöntemi.
$('#hiddenDateField').val(formattedDate);
jQuery kullanarak “hiddenDateField” kimliğine sahip gizli giriş alanını seçer vevalue
biçimlendirilmiş tarihe. Bu, gizli alanı belirtilen formatta bugünün tarihiyle etkili bir şekilde önceden doldurur.
jQuery kodu, saf JavaScript'e kıyasla gizli giriş alanını seçme ve değiştirme sürecini basitleştirir. Sayfa yüklendiğinde, gizli giriş alanı aa/gg/yyyy formatında bugünün tarihiyle doldurulur ve aşağıdaki şekilde belirtildiği gibi baştaki sıfırlar mevcut değildir. formattedDate
değişkeni.