CRM ve Veri Platformları

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:

  1. <!DOCTYPE html> ve <html>: Bunlar, bunun bir HTML5 belgesi olduğunu belirten standart HTML belge bildirimleridir.
  2. <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.
  3. <title>: Bu, web sayfasının başlığını "JavaScript ile Tarih Önceden Doldurma" olarak ayarlar.
  4. <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.
  5. <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.
  6. <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.
  7. <script>: Bu, JavaScript kodu yazabileceğiniz bir JavaScript komut dosyası bloğunun açılış etiketidir.
  8. 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 nesne const 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, ve day özellikler tarih biçimini tanımlar.
  9. return formattedDate;: Bu satır, biçimlendirilmiş tarihi bir dize olarak döndürür.
  10. 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ğere getFormattedDate() işlev. Bu, gizli alanı belirtilen formattaki bugünün tarihiyle doldurur.

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:

  1. <!DOCTYPE html> ve <html>: Bunlar, bunun bir HTML5 belgesi olduğunu belirten standart HTML belge bildirimleridir.
  2. <head>: Bu bölüm web sayfası için meta verileri ve kaynakları eklemek için kullanılır.
  3. <title>: Web sayfasının başlığını "jQuery ve JavaScript Date Object ile Tarih Önceden Doldurma" olarak ayarlar.
  4. <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.
  5. <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.
  6. <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.
  7. <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.
  8. <script>: Bu, JavaScript kodu yazabileceğiniz bir JavaScript komut dosyası bloğunun açılış etiketidir.
  9. $(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ır Date 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.
  10. $('#hiddenDateField').val(formattedDate); jQuery kullanarak “hiddenDateField” kimliğine sahip gizli giriş alanını seçer ve value 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.

Douglas Karr

Douglas Karr CMO'su AÇIK İÇGÖRÜLER ve kurucusu Martech Zone. Douglas düzinelerce başarılı MarTech startup'ına yardımcı oldu, Martech satın almaları ve yatırımlarında 5 milyar doların üzerindeki durum tespitine yardımcı oldu ve şirketlere satış ve pazarlama stratejilerini uygulama ve otomatikleştirme konusunda yardımcı olmaya devam ediyor. Douglas, uluslararası alanda tanınan bir dijital dönüşüm ve MarTech uzmanı ve konuşmacısıdır. Douglas aynı zamanda Dummie's Guide ve iş liderliği kitabının yayınlanmış yazarıdır.

İlgili Makaleler

Başa dön düğmeye
Kapanış

Adblock Algılandı

Martech Zone sitemizden reklam geliri, bağlı kuruluş bağlantıları ve sponsorluklar yoluyla para kazandığımız için size bu içeriği ücretsiz olarak sağlayabilir. Sitemizi gezerken reklam engelleyicinizi kaldırırsanız seviniriz.