CRM a datové platformy

Jak předvyplnit pole formuláře dnešním datem a JavaScriptem nebo JQuery

Zatímco mnoho řešení nabízí možnost uložit datum při každém zadání formuláře, existují i ​​jiné případy, kdy to není možné. Doporučujeme našim klientům, aby na své stránky přidali skryté pole a předávali tyto informace spolu se záznamem, aby mohli sledovat, kdy jsou zadány položky formuláře. Pomocí JavaScriptu je to snadné.

Jak předvyplnit pole formuláře dnešním datem a JavaScriptem

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

Pojďme si poskytnutý kód HTML a JavaScript rozebrat krok za krokem:

  1. <!DOCTYPE html> a <html>: Toto jsou standardní deklarace dokumentu HTML, které uvádějí, že se jedná o dokument HTML5.
  2. <head>: Tato část se obvykle používá k zahrnutí metadat o dokumentu, jako je název webové stránky, který se nastavuje pomocí <title> prvek.
  3. <title>: Toto nastaví název webové stránky na „Předvyplnění data pomocí JavaScriptu“.
  4. <body>: Toto je hlavní obsahová oblast webové stránky, kam umístíte viditelný obsah a prvky uživatelského rozhraní.
  5. <form>: Formulářový prvek, který může obsahovat vstupní pole. V tomto případě se používá k tomu, aby obsahovalo skryté vstupní pole, které bude vyplněno dnešním datem.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Toto je skryté vstupní pole. Nezobrazuje se na stránce, ale může ukládat data. Je mu přiděleno ID „hiddenDateField“ a název „hiddenDateField“ pro identifikaci a použití v JavaScriptu.
  7. <script>: Toto je úvodní značka bloku skriptu JavaScript, kam můžete napsat kód JavaScript.
  8. function getFormattedDate() { ... }: Definuje funkci JavaScript, která se nazývá getFormattedDate(). Uvnitř této funkce:
    • Vytváří nový Date objekt představující aktuální datum a čas pomocí const today = new Date();.
    • Formátuje datum do řetězce v požadovaném formátu (mm/dd/rrrr) pomocí today.toLocaleDateString(), 'en-US' argument určuje národní prostředí (americká angličtina) pro formátování a objekt s year, month, a day vlastnosti definuje formát data.
  9. return formattedDate;: Tento řádek vrací formátované datum jako řetězec.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Tento řádek kódu:
    • použití document.getElementById('hiddenDateField') vyberte skryté vstupní pole s ID „hiddenDateField“.
    • Nastaví value vlastnosti vybraného vstupního pole na hodnotu vrácenou parametrem getFormattedDate() funkce. Tím se vyplní skryté pole dnešním datem v zadaném formátu.

Konečným výsledkem je, že když se stránka načte, skryté vstupní pole s ID „hiddenDateField“ se vyplní dnešním datem ve formátu mm/dd/rrrr bez úvodních nul, jak je uvedeno v getFormattedDate() funkce.

Jak předvyplnit pole formuláře dnešním datem a 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>

Tento kód HTML a JavaScript ukazuje, jak používat jQuery k předvyplnění skrytého vstupního pole dnešním datem ve formátu mm/dd/rrrr, bez úvodních nul. Pojďme si to rozebrat krok za krokem:

  1. <!DOCTYPE html> a <html>: Toto jsou standardní deklarace dokumentu HTML, které označují, že se jedná o dokument HTML5.
  2. <head>: Tato sekce se používá pro zahrnutí metadat a zdrojů pro webovou stránku.
  3. <title>: Nastaví název webové stránky na „Předvyplnění data pomocí jQuery a JavaScript Date Object“.
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Tento řádek obsahuje knihovnu jQuery uvedením jejího zdroje ze sítě pro doručování obsahu (CDN). Zajišťuje, že knihovna jQuery je k dispozici pro použití na webové stránce.
  5. <body>: Toto je hlavní obsahová oblast webové stránky, kam umístíte viditelný obsah a prvky uživatelského rozhraní.
  6. <form>: Element formuláře HTML, který obsahuje vstupní pole. V tomto případě se používá k zapouzdření skrytého vstupního pole.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Skryté vstupní pole, které nebude na webové stránce viditelné. Je mu přiřazeno ID „hiddenDateField“ a název „hiddenDateField“.
  8. <script>: Toto je úvodní značka pro blok skriptu JavaScript, do kterého můžete psát kód JavaScript.
  9. $(document).ready(function() { ... });: Toto je blok kódu jQuery. Používá se $(document).ready() funkce, která zajistí, že se obsažený kód spustí po úplném načtení stránky. Uvnitř této funkce:
    • const today = new Date(); vytváří nový Date objekt představující aktuální datum a čas.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); naformátuje datum do řetězce v požadovaném formátu (mm/dd/rrrr) pomocí toLocaleDateString metoda.
  10. $('#hiddenDateField').val(formattedDate); vybere skryté vstupní pole s ID „hiddenDateField“ pomocí jQuery a nastaví jej value k formátovanému datu. To účinně předvyplní skryté pole dnešním datem v určeném formátu.

Kód jQuery zjednodušuje proces výběru a úpravy skrytého vstupního pole ve srovnání s čistým JavaScriptem. Když se stránka načte, skryté vstupní pole se vyplní dnešním datem ve formátu mm/dd/rrrr a nejsou přítomny žádné úvodní nuly, jak je uvedeno v formattedDate proměnná.

Douglas Karr

Douglas Karr je CMO OpenINSIGHTS a zakladatelem Martech Zone. Douglas pomohl desítkám úspěšných MarTech startupů, pomohl s due diligence v hodnotě více než 5 miliard dolarů v akvizicích a investicích Martech a nadále pomáhá společnostem při implementaci a automatizaci jejich prodejních a marketingových strategií. Douglas je mezinárodně uznávaný odborník na digitální transformaci a MarTech a řečník. Douglas je také publikovaným autorem průvodce pro figuríny a knihy o obchodním vedení.

Související články

Tlačítko Nahoru
zavřít

Byl detekován Adblock

Martech Zone je schopna vám poskytnout tento obsah zdarma, protože naše stránky zpeněžujeme prostřednictvím příjmů z reklam, přidružených odkazů a sponzorství. Ocenili bychom, kdybyste při prohlížení našich stránek odstranili svůj blokovač reklam.