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