CRM- en dataplatforms

Hoe om 'n vormveld vooraf in te vul met vandag se datum en JavaScript of JQuery

Alhoewel baie oplossings die geleentheid bied om die datum met elke vorminskrywing te stoor, is daar ander tye wanneer dit nie 'n opsie is nie. Ons moedig ons kliënte aan om 'n versteekte veld by hul webwerf te voeg en hierdie inligting saam met die inskrywing deur te gee sodat hulle kan naspoor wanneer vorminskrywings ingevoer word. Deur JavaScript te gebruik, is dit maklik.

Hoe om 'n vormveld vooraf in te vul met vandag se datum en 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>

Kom ons breek die verskafde HTML- en JavaScript-kode stap vir stap af:

  1. <!DOCTYPE html> en <html>: Dit is standaard HTML-dokumentverklarings wat spesifiseer dat dit 'n HTML5-dokument is.
  2. <head>: Hierdie afdeling word tipies gebruik om metadata oor die dokument in te sluit, soos die titel van die webblad, wat gestel is met die <title> element.
  3. <title>: Dit stel die titel van die webblad op "Datumvoorbevolking met JavaScript."
  4. <body>: Dit is die hoofinhoudarea van die webblad waar jy die sigbare inhoud en gebruikerskoppelvlakelemente plaas.
  5. <form>: 'n Vormelement wat invoervelde kan bevat. In hierdie geval word dit gebruik om die versteekte invoerveld te bevat wat met vandag se datum gevul sal word.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Dit is 'n versteekte invoerveld. Dit verskyn nie op die bladsy nie, maar kan data stoor. Dit kry 'n ID van "hiddenDateField" en 'n naam van "hiddenDateField" vir identifikasie en gebruik in JavaScript.
  7. <script>: Dit is die openingsmerker vir 'n JavaScript-skrifblok, waar jy JavaScript-kode kan skryf.
  8. function getFormattedDate() { ... }: Dit definieer 'n JavaScript-funksie genoem getFormattedDate(). Binne hierdie funksie:
    • Dit skep 'n nuwe Date voorwerp wat die huidige datum en tyd verteenwoordig deur gebruik te maak const today = new Date();.
    • Dit formateer die datum in 'n string met die verlangde formaat (mm/dd/jjjj) met behulp van today.toLocaleDateString(). Die 'en-US' argument spesifiseer die locale (Amerikaanse Engels) vir formatering, en die objek met year, month, en day eienskappe definieer die datumformaat.
  9. return formattedDate;: Hierdie reël gee die geformateerde datum as 'n string terug.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Hierdie reël kode:
    • Gebruik document.getElementById('hiddenDateField') om die versteekte invoerveld met die ID "hiddenDateField" te kies.
    • Stel die value eienskap van die geselekteerde invoerveld na die waarde teruggestuur deur die getFormattedDate() funksie. Dit vul die versteekte veld met vandag se datum in die gespesifiseerde formaat.

Die eindresultaat is dat wanneer die bladsy laai, die versteekte invoerveld met ID “hiddenDateField” gevul word met vandag se datum in die formaat mm/dd/jjjj sonder voorste nulle, soos gespesifiseer in die getFormattedDate() funksie.

Hoe om 'n vormveld vooraf in te vul met vandag se datum en 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>

Hierdie HTML- en JavaScript-kode demonstreer hoe om jQuery te gebruik om 'n versteekte invoerveld vooraf in te vul met vandag se datum, geformateer as mm/dd/jjjj, sonder voorste nulle. Kom ons breek dit stap vir stap af:

  1. <!DOCTYPE html> en <html>: Dit is standaard HTML-dokumentverklarings wat aandui dat dit 'n HTML5-dokument is.
  2. <head>: Hierdie afdeling word gebruik om metadata en hulpbronne vir die webblad in te sluit.
  3. <title>: Stel die titel van die webblad op "Datum Prepopulation with jQuery and JavaScript Date Object."
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Hierdie reël sluit die jQuery-biblioteek in deur die bron daarvan vanaf 'n inhoudafleweringsnetwerk (CDN) te spesifiseer. Dit verseker dat die jQuery-biblioteek beskikbaar is vir gebruik op die webblad.
  5. <body>: Dit is die hoofinhoudarea van die webblad waar jy die sigbare inhoud en gebruikerskoppelvlakelemente plaas.
  6. <form>: 'n HTML-vormelement wat gebruik word om invoervelde te bevat. In hierdie geval word dit gebruik om die verborge invoerveld in te kap.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: 'n Versteekte invoerveld wat nie op die webblad sigbaar sal wees nie. Dit is 'n ID van "hiddenDateField" en 'n naam van "hiddenDateField."
  8. <script>: Dit is die openingsmerker vir 'n JavaScript-skrifblok waar jy JavaScript-kode kan skryf.
  9. $(document).ready(function() { ... });: Dit is 'n jQuery-kodeblok. Dit gebruik die $(document).ready() funksie om te verseker dat die vervatte kode loop nadat die bladsy volledig gelaai is. Binne hierdie funksie:
    • const today = new Date(); skep 'n nuwe Date voorwerp wat die huidige datum en tyd verteenwoordig.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); formateer die datum in 'n string met die verlangde formaat (mm/dd/jjjj) deur die toLocaleDateString metode.
  10. $('#hiddenDateField').val(formattedDate); kies die verborge invoerveld met die ID "hiddenDateField" met behulp van jQuery en stel sy value na die geformateerde datum. Dit vul effektief die versteekte veld vooraf met vandag se datum in die gespesifiseerde formaat.

Die jQuery-kode vereenvoudig die proses om die verborge invoerveld te kies en te wysig in vergelyking met suiwer JavaScript. Wanneer die bladsy laai, word die versteekte invoerveld gevul met vandag se datum in die mm/dd/jjjj-formaat, en geen voorste nulle is teenwoordig nie, soos gespesifiseer in die formattedDate veranderlike.

Douglas Karr

Douglas Karr is CMO van Maak INSIGTE oop en die stigter van die Martech Zone. Douglas het tientalle suksesvolle MarTech-opstartondernemings gehelp, het gehelp met die omsigtigheidsondersoek van meer as $5 miljard in Martech-verkrygings en -beleggings, en gaan voort om maatskappye te help met die implementering en outomatisering van hul verkoops- en bemarkingstrategieë. Douglas is 'n internasionaal erkende digitale transformasie en MarTech deskundige en spreker. Douglas is ook 'n gepubliseerde skrywer van 'n Dummie-gids en 'n besigheidsleierskapboek.

verwante Artikels

Terug na bo knoppie
Sluiting

Advertensieblok bespeur

Martech Zone is in staat om hierdie inhoud gratis aan u te verskaf, want ons verdien ons webwerf deur advertensie-inkomste, geaffilieerde skakels en borgskappe. Ons sal dit waardeer as jy jou advertensieblokkering sal verwyder terwyl jy ons webwerf bekyk.