ЦРМ и платформе података

Како унапред попунити поље обрасца данашњим датумом и ЈаваСцрипт-ом или ЈКуери-јем

Иако многа решења нуде могућност чувања датума са сваким уносом обрасца, постоје други случајеви када то није опција. Подстичемо наше клијенте да додају скривено поље на своју веб локацију и проследе ове информације заједно са уносом како би могли да прате када се уносе у образац. Користећи ЈаваСцрипт, ово је лако.

Како унапред попунити поље обрасца са данашњим датумом и ЈаваСцрипт-ом

<!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>

Хајде да разложимо дати ХТМЛ и ЈаваСцрипт код корак по корак:

  1. <!DOCTYPE html> <html>: Ово су стандардне декларације ХТМЛ документа које наводе да је ово ХТМЛ5 документ.
  2. <head>: Овај одељак се обично користи за укључивање метаподатака о документу, као што је наслов веб странице, који се подешава помоћу <title> елемент.
  3. <title>: Ово поставља наслов веб странице на „Препопулација датума са ЈаваСцрипт-ом“.
  4. <body>: Ово је главна област садржаја веб странице где постављате видљиви садржај и елементе корисничког интерфејса.
  5. <form>: Елемент обрасца који може да садржи поља за унос. У овом случају, користи се да садржи скривено поље за унос које ће бити попуњено данашњим датумом.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Ово је скривено поље за унос. Не појављује се на страници, али може да чува податке. Дат му је ИД „хидденДатеФиелд“ и име „хидденДатеФиелд“ за идентификацију и употребу у ЈаваСцрипт-у.
  7. <script>: Ово је почетна ознака за блок ЈаваСцрипт скрипте, где можете написати ЈаваСцрипт код.
  8. function getFormattedDate() { ... }: Ово дефинише ЈаваСцрипт функцију која се зове getFormattedDate(). Унутар ове функције:
    • То ствара ново Date објекат који представља тренутни датум и време користећи const today = new Date();.
    • Он форматира датум у низ са жељеним форматом (мм/дд/гггг) користећи today.toLocaleDateString(). 'en-US' аргумент специфицира локализацију (амерички енглески) за форматирање, а објекат са year, month, и day својства дефинише формат датума.
  9. return formattedDate;: Ова линија враћа форматирани датум као стринг.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Ова линија кода:
    • vi користите document.getElementById('hiddenDateField') да изаберете скривено поље за унос са ИД-ом „хидденДатеФиелд“.
    • Поставља value својство изабраног поља за унос на вредност коју враћа getFormattedDate() функција. Ово попуњава скривено поље данашњим датумом у наведеном формату.

Крајњи резултат је да када се страница учита, скривено поље за унос са ИД-ом „хидденДатеФиелд“ се попуњава данашњим датумом у формату мм/дд/гггг без водећих нула, као што је наведено у getFormattedDate() функција.

Како унапред попунити поље обрасца данашњим датумом и јКуери-јем

<!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>

Овај ХТМЛ и ЈаваСцрипт код показује како да користите јКуери да унапред попуните скривено поље за унос данашњим датумом, форматираним као мм/дд/гггг, без водећих нула. Хајде да га разложимо корак по корак:

  1. <!DOCTYPE html> <html>: Ово су стандардне декларације ХТМЛ документа које указују да је ово ХТМЛ5 документ.
  2. <head>: Овај одељак се користи за укључивање метаподатака и ресурса за веб страницу.
  3. <title>: Поставља наслов веб странице на „Препопулација датума са јКуери и ЈаваСцрипт објектом датума“.
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Ова линија укључује јКуери библиотеку наводећи њен извор из мреже за испоруку садржаја (ЦДН). Обезбеђује да је јКуери библиотека доступна за коришћење на веб страници.
  5. <body>: Ово је главна област садржаја веб странице где постављате видљиви садржај и елементе корисничког интерфејса.
  6. <form>: ХТМЛ елемент обрасца који се користи да садржи поља за унос. У овом случају, користи се за капсулирање скривеног поља за унос.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Скривено поље за унос које неће бити видљиво на веб страници. Додељен му је ИД „хидденДатеФиелд“ и назив „хидденДатеФиелд“.
  8. <script>: Ово је почетна ознака за блок ЈаваСцрипт скрипте где можете написати ЈаваСцрипт код.
  9. $(document).ready(function() { ... });: Ово је блок јКуери кода. Користи се $(document).ready() функцију која осигурава да се садржани код покреће након што се страница у потпуности учита. Унутар ове функције:
    • const today = new Date(); ствара ново Date објекат који представља тренутни датум и време.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); форматира датум у низ са жељеним форматом (мм/дд/гггг) користећи toLocaleDateString метод.
  10. $('#hiddenDateField').val(formattedDate); бира скривено поље за унос са ИД-ом „хидденДатеФиелд“ користећи јКуери и поставља value до форматираног датума. Ово ефективно унапред попуњава скривено поље данашњим датумом у наведеном формату.

ЈКуери код поједностављује процес одабира и модификације скривеног поља за унос у поређењу са чистим ЈаваСцрипт-ом. Када се страница учита, скривено поље за унос се попуњава данашњим датумом у формату мм/дд/гггг и нема водећих нула, као што је наведено у formattedDate променљива.

Douglas Karr

Douglas Karr је ЦМО оф ОпенИНСИГХТС и оснивача Martech Zone. Доуглас је помогао десетинама успешних МарТецх стартапова, помогао је у дубинској пажњи од преко 5 милијарди долара у Мартецх аквизицијама и инвестицијама, и наставља да помаже компанијама у имплементацији и аутоматизацији њихових продајних и маркетиншких стратегија. Доуглас је међународно признати стручњак за дигиталну трансформацију и МарТецх стручњак и говорник. Даглас је такође објављени аутор Думмие'с водича и књиге о пословном лидерству.

Повезани чланци

Назад на врх дугмета
близу

Адблоцк откривен

Martech Zone је у могућности да вам пружи овај садржај без икаквих трошкова јер ми монетизујемо наш сајт путем прихода од огласа, партнерских веза и спонзорстава. Били бисмо захвални ако бисте уклонили свој блокатор огласа док гледате наш сајт.