सीआरएम आणि डेटा प्लॅटफॉर्म

आजची तारीख आणि 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” चा ID आणि “hiddenDateField” चे नाव दिले आहे.
  7. <script>: हा JavaScript स्क्रिप्ट ब्लॉकचा ओपनिंग टॅग आहे, जिथे तुम्ही JavaScript कोड लिहू शकता.
  8. function getFormattedDate() { ... }: हे JavaScript फंक्शन परिभाषित करते getFormattedDate(). या फंक्शनच्या आत:
    • त्यातून एक नवीन निर्माण होते Date वापरून वर्तमान तारीख आणि वेळ दर्शवणारी ऑब्जेक्ट const today = new Date();.
    • हे इच्छित स्वरूप (mm/dd/yyyy) वापरून तारखेला स्ट्रिंगमध्ये स्वरूपित करते today.toLocaleDateString(). अगोदर निर्देश केलेल्या बाबीसंबंधी बोलताना 'en-US' आर्ग्युमेंट फॉरमॅटिंगसाठी लोकॅल (अमेरिकन इंग्रजी) आणि यासह ऑब्जेक्ट निर्दिष्ट करते year, monthआणि day गुणधर्म तारीख स्वरूप परिभाषित करते.
  9. return formattedDate;: ही ओळ स्ट्रिंग म्हणून स्वरूपित तारीख परत करते.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: कोडची ही ओळ:
    • वापर document.getElementById('hiddenDateField') "hiddenDateField" आयडी सह लपविलेले इनपुट फील्ड निवडण्यासाठी.
    • सेट करते value ने परत केलेल्या मूल्यासाठी निवडलेल्या इनपुट फील्डची मालमत्ता getFormattedDate() कार्य हे आजच्या तारखेसह लपलेले फील्ड निर्दिष्ट फॉरमॅटमध्ये भरते.

अंतिम परिणाम असा होतो की जेव्हा पृष्ठ लोड होते, तेव्हा “hiddenDateField” आयडी असलेले लपलेले इनपुट फील्ड आजच्या तारखेसह mm/dd/yyyy फॉरमॅटमध्ये अग्रगण्य शून्याशिवाय पॉप्युलेट केले जाते, मध्ये निर्दिष्ट केल्याप्रमाणे 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 चा वापर आजच्या तारखेसह mm/dd/yyyy म्‍हणून फॉरमॅट केलेले, अग्रगण्य शून्य न करता, लपविलेले इनपुट फील्‍ड प्रीपॉप्युलेट करण्‍यासाठी कसे करायचे हे दाखवतो. चला ते टप्प्याटप्प्याने खंडित करूया:

  1. <!DOCTYPE html> आणि <html>: हे HTML5 दस्तऐवज असल्याचे दर्शविणारी मानक HTML दस्तऐवज घोषणा आहेत.
  2. <head>: वेबपृष्ठासाठी मेटाडेटा आणि संसाधने समाविष्ट करण्यासाठी हा विभाग वापरला जातो.
  3. <title>: वेबपृष्ठाचे शीर्षक "jQuery आणि JavaScript तारीख ऑब्जेक्टसह प्रीपॉप्युलेशन" वर सेट करते.
  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” चा ID आणि “hiddenDateField” चे नाव नियुक्त केले आहे.
  8. <script>: हा JavaScript स्क्रिप्ट ब्लॉकचा ओपनिंग टॅग आहे जिथे तुम्ही JavaScript कोड लिहू शकता.
  9. $(document).ready(function() { ... });: हा jQuery कोड ब्लॉक आहे. ते वापरते $(document).ready() पृष्ठ पूर्णपणे लोड झाल्यानंतर समाविष्ट कोड चालतो याची खात्री करण्यासाठी फंक्शन. या फंक्शनच्या आत:
    • const today = new Date(); एक नवीन तयार करते Date वर्तमान तारीख आणि वेळ दर्शवणारी ऑब्जेक्ट.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); वापरून इच्छित स्वरूप (mm/dd/yyyy) सह तारखेला स्ट्रिंगमध्ये स्वरूपित करते toLocaleDateString पद्धत
  10. $('#hiddenDateField').val(formattedDate); jQuery वापरून “hiddenDateField” आयडी असलेले लपवलेले इनपुट फील्ड निवडते आणि त्याचे सेट करते value स्वरूपित तारखेपर्यंत. हे आजच्या तारखेसह लपलेले फील्ड निर्दिष्ट फॉरमॅटमध्ये प्रभावीपणे तयार करते.

jQuery कोड शुद्ध JavaScript च्या तुलनेत लपविलेले इनपुट फील्ड निवडण्याची आणि सुधारित करण्याची प्रक्रिया सुलभ करते. जेव्हा पृष्ठ लोड होते, तेव्हा लपलेले इनपुट फील्ड आजच्या तारखेसह mm/dd/yyyy फॉरमॅटमध्ये भरले जाते आणि मध्ये निर्दिष्ट केल्याप्रमाणे कोणतेही अग्रगण्य शून्य उपस्थित नसतात. formattedDate चल.

Douglas Karr

Douglas Karr चे CMO आहे ओपनइनसाइट्स आणि चे संस्थापक Martech Zone. डग्लसने डझनभर यशस्वी MarTech स्टार्टअप्सना मदत केली आहे, Martech अधिग्रहण आणि गुंतवणुकीमध्ये $5 बिलियन पेक्षा जास्त योग्य परिश्रमात मदत केली आहे आणि कंपन्यांना त्यांच्या विक्री आणि विपणन धोरणांची अंमलबजावणी आणि स्वयंचलित करण्यात मदत करणे सुरू ठेवले आहे. डग्लस हा आंतरराष्ट्रीय स्तरावर मान्यताप्राप्त डिजिटल ट्रान्सफॉर्मेशन आणि MarTech तज्ञ आणि स्पीकर आहे. डग्लस हे डमीच्या मार्गदर्शक आणि व्यवसाय नेतृत्व पुस्तकाचे प्रकाशित लेखक देखील आहेत.

संबंधित लेख

परत शीर्षस्थानी बटण
बंद

अॅडब्लॉक आढळले

Martech Zone तुम्हाला ही सामग्री कोणत्याही खर्चाशिवाय प्रदान करण्यात सक्षम आहे कारण आम्ही आमच्या साइटवर जाहिरात महसूल, संलग्न दुवे आणि प्रायोजकत्वाद्वारे कमाई करतो. तुम्ही आमची साइट पाहता तेव्हा तुमचा अॅड ब्लॉकर काढून टाकल्यास आम्ही कृतज्ञ आहोत.