CRM и платформи за данни

Как да попълните предварително поле на формуляр с днешна дата и JavaScript или JQuery

Докато много решения предлагат възможност за съхраняване на датата с всеки запис във формуляра, има други случаи, когато това не е опция. Насърчаваме нашите клиенти да добавят скрито поле към сайта си и да предават тази информация заедно с записа, за да могат да проследяват кога се въвеждат записи във формуляра. Използвайки JavaScript, това е лесно.

Как да попълните предварително поле на формуляр с днешна дата и JavaScript

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

Нека разбием предоставения HTML и JavaScript код стъпка по стъпка:

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

Крайният резултат е, че когато страницата се зареди, скритото поле за въвеждане с идентификатор „hiddenDateField“ се попълва с днешната дата във формат mm/dd/yyyy без водещи нули, както е посочено в getFormattedDate() функция.

Как да попълните предварително поле на формуляр с днешна дата и jQuery

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

Този HTML и JavaScript код демонстрира как да използвате jQuery за предварително попълване на скрито поле за въвеждане с днешната дата, форматирана като mm/dd/yyyy, без водещи нули. Нека го разбием стъпка по стъпка:

  1. <!DOCTYPE html> намлява <html>: Това са стандартни декларации на HTML документ, които показват, че това е HTML5 документ.
  2. <head>: Този раздел се използва за включване на метаданни и ресурси за уеб страницата.
  3. <title>: Задава заглавието на уеб страницата на „Предварително попълване на дата с jQuery и JavaScript обект за дата“.
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Този ред включва библиотеката jQuery, като посочва нейния източник от мрежа за доставка на съдържание (CDN). Той гарантира, че библиотеката jQuery е достъпна за използване на уеб страницата.
  5. <body>: Това е основната област на съдържанието на уеб страницата, където поставяте видимото съдържание и елементите на потребителския интерфейс.
  6. <form>: Елемент на HTML формуляр, използван за съдържане на полета за въвеждане. В този случай се използва за капсулиране на скритото поле за въвеждане.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Скрито поле за въвеждане, което няма да се вижда на уеб страницата. Присвоен му е идентификатор „hiddenDateField“ и име „hiddenDateField“.
  8. <script>: Това е отварящият таг за блок на JavaScript скрипт, където можете да пишете JavaScript код.
  9. $(document).ready(function() { ... });: Това е кодов блок на jQuery. Той използва $(document).ready() функция, за да гарантира, че съдържащият се код се изпълнява, след като страницата се зареди напълно. В тази функция:
    • const today = new Date(); създава нов Date обект, представящ текущата дата и час.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); форматира датата в низ с желания формат (мм/дд/гггг), използвайки toLocaleDateString метод.
  10. $('#hiddenDateField').val(formattedDate); избира скритото поле за въвеждане с ИД „hiddenDateField“ с помощта на jQuery и задава неговото value към форматираната дата. Това ефективно попълва предварително скритото поле с днешната дата в посочения формат.

Кодът jQuery опростява процеса на избиране и модифициране на скритото поле за въвеждане в сравнение с чистия JavaScript. Когато страницата се зареди, скритото поле за въвеждане се попълва с днешната дата във формат мм/дд/гггг и не присъстват водещи нули, както е посочено в formattedDate променлива.

Douglas Karr

Douglas Karr е CMO на OpenINSIGHTS и основателят на Martech Zone. Дъглас е помогнал на десетки успешни стартъпи на MarTech, съдействал е за надлежна проверка на над $5 милиарда в придобивания и инвестиции на Martech и продължава да помага на компаниите при прилагането и автоматизирането на техните стратегии за продажби и маркетинг. Дъглас е международно признат експерт и лектор по дигитална трансформация и MarTech. Дъглас също е публикуван автор на ръководство за манекени и книга за бизнес лидерство.

Свързани статии

Бутон "Нагоре" горе
Близо

Открит е рекламен блок

Martech Zone е в състояние да ви предостави това съдържание безплатно, тъй като осигуряваме приходи от нашия сайт чрез приходи от реклами, партньорски връзки и спонсорство. Ще сме благодарни, ако премахнете блокера си за реклами, докато разглеждате нашия сайт.