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» заповнюється сьогоднішньою датою у форматі мм/дд/рррр без нулів на початку, як зазначено в 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 для попереднього заповнення прихованого поля введення сьогоднішньою датою у форматі мм/дд/рррр без нулів на початку. Давайте розберемо це крок за кроком:

  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 може надати вам цей вміст безкоштовно, оскільки ми монетизуємо наш сайт за рахунок доходів від реклами, партнерських посилань і спонсорства. Ми будемо вдячні, якщо ви видалите блокувальник реклами під час перегляду нашого сайту.