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