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>: Бұл HTML5 құжаты екенін көрсететін стандартты HTML құжатының мәлімдемелері.
  2. <head>: Бұл бөлім әдетте құжат туралы метадеректерді қосу үшін пайдаланылады, мысалы, веб-беттің тақырыбы, ол <title> элементі.
  3. <title>: Бұл веб-беттің тақырыбын «JavaScript көмегімен күнді алдын ала толтыру» деп орнатады.
  4. <body>: Бұл көрінетін мазмұнды және пайдаланушы интерфейсінің элементтерін орналастыратын веб-беттің негізгі мазмұн аймағы.
  5. <form>: Енгізу өрістерін қамтитын пішін элементі. Бұл жағдайда ол бүгінгі күнмен толтырылатын жасырын енгізу өрісін қамту үшін пайдаланылады.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Бұл жасырын енгізу өрісі. Ол бетте көрсетілмейді, бірақ деректерді сақтай алады. Оған JavaScript-те сәйкестендіру және пайдалану үшін “hiddenDateField” идентификаторы және “hiddenDateField” атауы берілген.
  7. <script>: Бұл JavaScript сценарий блогының ашылу тегі, мұнда JavaScript кодын жазуға болады.
  8. function getFormattedDate() { ... }: Бұл JavaScript деп аталатын функциясын анықтайды getFormattedDate(). Бұл функцияның ішінде:
    • Ол жаңасын жасайды Date ағымдағы күн мен уақытты көрсететін нысан const today = new Date();.
    • Ол күнді қажетті пішіммен (мм/кк/жжж) жолға пішімдейді today.toLocaleDateString(). The 'en-US' аргумент пішімдеуге арналған тілді (американдық ағылшын тілі) және нысанды көрсетеді year, month, және day қасиеттер күн пішімін анықтайды.
  9. return formattedDate;: Бұл жол пішімделген күнді жол ретінде қайтарады.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Бұл код жолы:
    • Uses 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>: Бұл HTML5 құжаты екенін көрсететін стандартты HTML құжатының мәлімдемелері.
  2. <head>: Бұл бөлім веб-бетке арналған метадеректер мен ресурстарды қосу үшін пайдаланылады.
  3. <title>: Веб-беттің тақырыбын «jQuery және JavaScript Date нысаны арқылы күнді алдын ала толтыру» етіп орнатады.
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Бұл жол мазмұнды жеткізу желісінен (CDN) оның көзін көрсету арқылы jQuery кітапханасын қамтиды. Ол 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); jQuery көмегімен «hiddenDateField» идентификаторы бар жасырын енгізу өрісін таңдайды және оны орнатады value пішімделген күнге дейін. Бұл жасырын өрісті көрсетілген пішімдегі бүгінгі күнмен тиімді түрде алдын ала толтырады.

JQuery коды таза JavaScript-пен салыстырғанда жасырын енгізу өрісін таңдау және өзгерту процесін жеңілдетеді. Бет жүктелген кезде, жасырын енгізу өрісі мм/кк/жжж пішіміндегі бүгінгі күнмен толтырылады және бөлімде көрсетілгендей алдыңғы нөлдер болмайды. formattedDate айнымалы.

Douglas Karr

Douglas Karr CMO болып табылады OpenINSIGHTS және негізін қалаушы Martech Zone. Дуглас ондаған табысты MarTech стартаптарына көмектесті, Martech сатып алулары мен инвестицияларына 5 миллиард доллардан астам қаражатты мұқият тексеруге көмектесті және компанияларға сату және маркетинг стратегияларын енгізу және автоматтандыруға көмектесуді жалғастыруда. Дуглас – халықаралық деңгейде танылған цифрлық трансформация және MarTech сарапшысы және спикері. Дуглас сонымен қатар Dummie's guide және бизнес көшбасшылығы кітабының жарияланған авторы.

Қатысты Мақалалар

Басына оралу
жақын

Adblock анықталды

Martech Zone Сізге бұл мазмұнды ақысыз ұсына алады, өйткені біз сайтымызды жарнамадан түсетін табыс, серіктестік сілтемелері және демеушілік арқылы монетизациялаймыз. Сайтымызды көрген кезде жарнама блокаторын алып тастасаңыз, біз ризамыз.