CRM og gagnapallar

Hvernig á að forfylla formreit með dagsetningu dagsins og JavaScript eða JQuery

Þó að margar lausnir bjóða upp á tækifæri til að geyma dagsetninguna með hverri eyðublaðsfærslu, þá eru aðrir tímar þar sem það er ekki valkostur. Við hvetjum viðskiptavini okkar til að bæta við földum reit á síðuna sína og senda þessar upplýsingar ásamt færslunni svo þeir geti fylgst með því hvenær eyðublaðsfærslur eru færðar inn. Með því að nota JavaScript er þetta auðvelt.

Hvernig á að forútfylla eyðublaðsreit með dagsetningu dagsins og 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>

Við skulum sundurliða HTML og JavaScript kóðann sem fylgir skref fyrir skref:

  1. <!DOCTYPE html> og <html>: Þetta eru staðlaðar HTML skjalayfirlýsingar sem tilgreina að þetta sé HTML5 skjal.
  2. <head>: Þessi hluti er venjulega notaður til að innihalda lýsigögn um skjalið, eins og titil vefsíðunnar, sem er stillt með <title> frumefni.
  3. <title>: Þetta stillir titil vefsíðunnar á „Forútfylling dagsetningar með JavaScript.“
  4. <body>: Þetta er aðalefnissvæði vefsíðunnar þar sem þú setur sýnilegt efni og notendaviðmótsþætti.
  5. <form>: Formþáttur sem getur innihaldið innsláttarreiti. Í þessu tilfelli er það notað til að innihalda falinn innsláttarreit sem verður fylltur út með dagsetningu dagsins.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Þetta er falinn innsláttarreitur. Það birtist ekki á síðunni en getur geymt gögn. Það er gefið auðkenni „hiddenDateField“ og nafn „hiddenDateField“ til auðkenningar og notkunar í JavaScript.
  7. <script>: Þetta er upphafsmerkið fyrir JavaScript forskriftarblokk, þar sem þú getur skrifað JavaScript kóða.
  8. function getFormattedDate() { ... }: Þetta skilgreinir JavaScript fall sem kallast getFormattedDate(). Inni í þessari aðgerð:
    • Það skapar nýtt Date hlutur sem táknar núverandi dagsetningu og tíma með því að nota const today = new Date();.
    • Það sniður dagsetninguna í streng með æskilegu sniði (mm/dd/áááá) með því að nota today.toLocaleDateString(). Í 'en-US' argument tilgreinir staðsetning (amerísk enska) fyrir snið og hlutinn með year, monthog day eiginleikar skilgreina dagsetningarsniðið.
  9. return formattedDate;: Þessi lína skilar sniðinni dagsetningu sem streng.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Þessi kóðalína:
    • Notar document.getElementById('hiddenDateField') til að velja falinn innsláttarreit með auðkenninu „hiddenDateField“.
    • Stillir value eiginleiki valins inntaksreits í gildið sem skilað er af getFormattedDate() virka. Þetta fyllir út falinn reit með dagsetningu dagsins á tilgreindu sniði.

Lokaniðurstaðan er sú að þegar síðan hleðst er fali innsláttarreiturinn með auðkenninu „hiddenDateField“ fylltur út dagsetningu dagsins á sniðinu mm/dd/áááá án upphafsnúlla, eins og tilgreint er í getFormattedDate() virka.

Hvernig á að forútfylla eyðublaðsreit með dagsetningu dagsins og 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>

Þessi HTML og JavaScript kóði sýnir hvernig á að nota jQuery til að forfylla falinn innsláttarreit með dagsetningu dagsins, sniðinn sem mm/dd/áááá, án núlls í fremstu röð. Við skulum brjóta það niður skref fyrir skref:

  1. <!DOCTYPE html> og <html>: Þetta eru staðlaðar HTML skjalayfirlýsingar sem gefa til kynna að þetta sé HTML5 skjal.
  2. <head>: Þessi hluti er notaður til að innihalda lýsigögn og tilföng fyrir vefsíðuna.
  3. <title>: Stillir titil vefsíðunnar á "Date Prepopulation with jQuery and JavaScript Date Object."
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Þessi lína inniheldur jQuery bókasafnið með því að tilgreina uppruna þess frá efnisafhendingarneti (CDN). Það tryggir að jQuery bókasafnið sé tiltækt til notkunar á vefsíðunni.
  5. <body>: Þetta er aðalefnissvæði vefsíðunnar þar sem þú setur sýnilegt efni og notendaviðmótsþætti.
  6. <form>: HTML eyðublað sem er notað til að innihalda innsláttarreit. Í þessu tilviki er það notað til að umlykja falinn innsláttarreit.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Falinn innsláttarreitur sem verður ekki sýnilegur á vefsíðunni. Það er úthlutað auðkenni „hiddenDateField“ og nafninu „hiddenDateField“.
  8. <script>: Þetta er upphafsmerkið fyrir JavaScript forskriftarblokk þar sem þú getur skrifað JavaScript kóða.
  9. $(document).ready(function() { ... });: Þetta er jQuery kóða blokk. Það notar $(document).ready() aðgerð til að tryggja að kóðinn sem er að finna keyrir eftir að síðan hefur verið fullhlaðinn. Inni í þessari aðgerð:
    • const today = new Date(); býr til nýtt Date hlutur sem táknar núverandi dagsetningu og tíma.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); forsníða dagsetninguna í streng með æskilegu sniði (mm/dd/áááá) með því að nota toLocaleDateString aðferð.
  10. $('#hiddenDateField').val(formattedDate); velur falinn innsláttarreit með auðkenninu „hiddenDateField“ með jQuery og stillir það value til sniðinnar dagsetningar. Þetta útfyllir í raun falinn reit með dagsetningu í dag á tilgreindu sniði.

jQuery kóðinn einfaldar ferlið við að velja og breyta falda innsláttarreitnum samanborið við hreint JavaScript. Þegar síðan hleðst er fali innsláttarreiturinn fylltur út dagsetningu dagsins á sniðinu mm/dd/áááá og engin núll í fremstu röð, eins og tilgreint er í formattedDate breyta.

Douglas Karr

Douglas Karr er CMO af OpenINSIGHTS og stofnandi Martech Zone. Douglas hefur hjálpað tugum farsælra MarTech sprotafyrirtækja, hefur aðstoðað við áreiðanleikakönnun yfir $5 milljarða í kaupum og fjárfestingum Martech og heldur áfram að aðstoða fyrirtæki við að innleiða og gera sjálfvirkan sölu- og markaðsáætlanir sínar. Douglas er alþjóðlega viðurkenndur stafrænn umbreytingu og MarTech sérfræðingur og ræðumaður. Douglas er einnig útgefinn höfundur Dummie's guide og bók um leiðtogaviðskipti.

tengdar greinar

Til baka efst á hnappinn
Loka

Auglýsingablokk greind

Martech Zone er fær um að útvega þér þetta efni að kostnaðarlausu vegna þess að við afla tekna af síðunni okkar með auglýsingatekjum, tengdatenglum og kostun. Okkur þætti vænt um ef þú myndir fjarlægja auglýsingablokkann þinn þegar þú skoðar síðuna okkar.