सीआरएम और डेटा प्लेटफार्म

आज की तारीख और जावास्क्रिप्ट या JQuery के साथ एक फॉर्म फ़ील्ड को कैसे पूर्व-पॉप्युलेट करें

जबकि कई समाधान प्रत्येक फॉर्म प्रविष्टि के साथ तारीख को संग्रहीत करने का अवसर प्रदान करते हैं, लेकिन कई बार ऐसा भी होता है जब यह कोई विकल्प नहीं होता है। हम अपने ग्राहकों को अपनी साइट पर एक छिपा हुआ फ़ील्ड जोड़ने और प्रविष्टि के साथ यह जानकारी देने के लिए प्रोत्साहित करते हैं ताकि वे ट्रैक कर सकें कि फॉर्म प्रविष्टियाँ कब दर्ज की गई हैं। जावास्क्रिप्ट का उपयोग करना, यह आसान है।

आज की तारीख और जावास्क्रिप्ट के साथ एक फॉर्म फ़ील्ड को पहले से कैसे भरें

<!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 और जावास्क्रिप्ट कोड को चरण दर चरण तोड़ें:

  1. <!DOCTYPE html> और <html>: ये मानक HTML दस्तावेज़ घोषणाएँ हैं जो निर्दिष्ट करती हैं कि यह एक HTML5 दस्तावेज़ है।
  2. <head>: इस अनुभाग का उपयोग आम तौर पर दस्तावेज़ के बारे में मेटाडेटा शामिल करने के लिए किया जाता है, जैसे कि वेबपेज का शीर्षक, जो इसका उपयोग करके सेट किया गया है <title> तत्व।
  3. <title>: यह वेबपेज का शीर्षक "जावास्क्रिप्ट के साथ दिनांक प्रीपॉपुलेशन" पर सेट करता है।
  4. <body>: यह वेबपेज का मुख्य सामग्री क्षेत्र है जहां आप दृश्यमान सामग्री और उपयोगकर्ता इंटरफ़ेस तत्व रखते हैं।
  5. <form>: एक प्रपत्र तत्व जिसमें इनपुट फ़ील्ड हो सकते हैं। इस मामले में, इसका उपयोग छिपे हुए इनपुट फ़ील्ड को शामिल करने के लिए किया जाता है जो आज की तारीख से भर जाएगा।
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: यह एक छिपा हुआ इनपुट फ़ील्ड है. यह पृष्ठ पर दिखाई नहीं देता है लेकिन डेटा संग्रहीत कर सकता है। इसे जावास्क्रिप्ट में पहचान और उपयोग के लिए "hiddenDateField" की एक आईडी और "hiddenDateField" का एक नाम दिया गया है।
  7. <script>: यह जावास्क्रिप्ट स्क्रिप्ट ब्लॉक के लिए शुरुआती टैग है, जहां आप जावास्क्रिप्ट कोड लिख सकते हैं।
  8. function getFormattedDate() { ... }: यह एक जावास्क्रिप्ट फ़ंक्शन को परिभाषित करता है जिसे कहा जाता है getFormattedDate(). इस फ़ंक्शन के अंदर:
    • यह एक नया बनाता है Date वर्तमान दिनांक और समय का प्रतिनिधित्व करने वाली वस्तु const today = new Date();.
    • यह दिनांक को वांछित प्रारूप (mm/dd/yyyy) का उपयोग करके एक स्ट्रिंग में प्रारूपित करता है today.toLocaleDateString()'en-US' तर्क स्वरूपण के लिए स्थान (अमेरिकी अंग्रेजी) और ऑब्जेक्ट को निर्दिष्ट करता है year, month, तथा day properties दिनांक स्वरूप को परिभाषित करती है।
  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 कोड दर्शाता है कि किसी छिपे हुए इनपुट फ़ील्ड को आज की तारीख के साथ, mm/dd/yyyy के रूप में स्वरूपित करने के लिए, अग्रणी शून्य के बिना, jQuery का उपयोग कैसे किया जाए। आइए इसे चरण दर चरण तोड़ें:

  1. <!DOCTYPE html> और <html>: ये मानक HTML दस्तावेज़ घोषणाएँ हैं जो दर्शाती हैं कि यह एक HTML5 दस्तावेज़ है।
  2. <head>: इस अनुभाग का उपयोग वेबपेज के लिए मेटाडेटा और संसाधनों को शामिल करने के लिए किया जाता है।
  3. <title>: वेबपेज का शीर्षक "jQuery और JavaScript दिनांक ऑब्जेक्ट के साथ दिनांक प्रीपॉपुलेशन" पर सेट करता है।
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: इस पंक्ति में सामग्री वितरण नेटवर्क (सीडीएन) से इसके स्रोत को निर्दिष्ट करके jQuery लाइब्रेरी शामिल है। यह सुनिश्चित करता है कि jQuery लाइब्रेरी वेबपेज पर उपयोग के लिए उपलब्ध है।
  5. <body>: यह वेबपेज का मुख्य सामग्री क्षेत्र है जहां आप दृश्यमान सामग्री और उपयोगकर्ता इंटरफ़ेस तत्व रखते हैं।
  6. <form>: एक HTML फॉर्म तत्व जिसका उपयोग इनपुट फ़ील्ड्स को समाहित करने के लिए किया जाता है। इस मामले में, इसका उपयोग छिपे हुए इनपुट फ़ील्ड को एनकैप्सुलेट करने के लिए किया जाता है।
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: एक छिपा हुआ इनपुट फ़ील्ड जो वेबपेज पर दिखाई नहीं देगा। इसे "hiddenDateField" की एक आईडी और "hiddenDateField" का एक नाम दिया गया है।
  8. <script>: यह जावास्क्रिप्ट स्क्रिप्ट ब्लॉक के लिए शुरुआती टैग है जहां आप जावास्क्रिप्ट कोड लिख सकते हैं।
  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 कोड छिपे हुए इनपुट फ़ील्ड को चुनने और संशोधित करने की प्रक्रिया को सरल बनाता है। जब पृष्ठ लोड होता है, तो छिपा हुआ इनपुट फ़ील्ड mm/dd/yyyy प्रारूप में आज की तारीख से भर जाता है, और कोई भी अग्रणी शून्य मौजूद नहीं होता है, जैसा कि निर्दिष्ट है formattedDate चर।

Douglas Karr

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

संबंधित आलेख

शीर्ष पर वापस करने के लिए बटन
समापन

पता लगाया गया

Martech Zone आपको यह सामग्री बिना किसी लागत के प्रदान करने में सक्षम है क्योंकि हम विज्ञापन राजस्व, संबद्ध लिंक और प्रायोजन के माध्यम से अपनी साइट से कमाई करते हैं। यदि आप हमारी साइट देखते समय अपना विज्ञापन अवरोधक हटा देंगे तो हम आभारी होंगे।