የቅጽ መስክን በዛሬው ቀን እና ጃቫ ስክሪፕት ወይም 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 እና JavaScript ኮድ ደረጃ በደረጃ እንከፋፍል፡
<!DOCTYPE html>
ና<html>
ይህ HTML5 ሰነድ መሆኑን የሚገልጹ መደበኛ የኤችቲኤምኤል ሰነድ መግለጫዎች ናቸው።<head>
ይህ ክፍል በተለምዶ ስለ ሰነዱ ሜታዳታ ለማካተት ይጠቅማል፣ ለምሳሌ የድረ-ገጹ ርዕስ፣<title>
ኤለመንት።<title>
ይህ የድረ-ገጹን ርዕስ “በጃቫ ስክሪፕት ቅድመ-ሕዝብ የተደረገበትን ቀን” ያዘጋጃል።<body>
የሚታየውን ይዘት እና የተጠቃሚ በይነገጽ ክፍሎችን የምታስቀምጥበት ይህ የድረ-ገጹ ዋና የይዘት ቦታ ነው።<form>
የግቤት መስኮችን ሊይዝ የሚችል የቅጽ አካል። በዚህ አጋጣሚ፣ ከዛሬ ቀን ጋር የሚሞላውን የተደበቀ የግቤት መስክ ለመያዝ ይጠቅማል።<input type="hidden" id="hiddenDateField" name="hiddenDateField">
ይህ የተደበቀ የግቤት መስክ ነው። በገጹ ላይ አይታይም ነገር ግን ውሂብ ማከማቸት ይችላል. በጃቫ ስክሪፕት ለመለየት እና ለመጠቀም የ"HiddenDateField" መታወቂያ እና "የተደበቀ ዴትፊልድ" ስም ተሰጥቶታል።<script>
የጃቫ ስክሪፕት ኮድ መፃፍ የምትችልበት ይህ የመክፈቻ መለያ ነው።function getFormattedDate() { ... }
ይህ የጃቫ ስክሪፕት ተግባርን ይገልፃል።getFormattedDate()
. በዚህ ተግባር ውስጥ:- አዲስ ይፈጥራል
Date
በመጠቀም የአሁኑን ቀን እና ሰዓት የሚወክል ነገርconst today = new Date();
. - በሚፈለገው ቅርጸት (ሚሜ/ቀን/ዓዓም) በመጠቀም ቀኑን ወደ ሕብረቁምፊ ይቀርፃል።
today.toLocaleDateString()
. የ'en-US'
ክርክሩ የአካባቢውን (የአሜሪካን እንግሊዝኛ) ለመቅረጽ እና ነገሩን ይገልጻልyear
,month
, እናday
ንብረቶች የቀን ቅርጸትን ይገልፃሉ።
- አዲስ ይፈጥራል
return formattedDate;
ይህ መስመር የተቀረፀውን ቀን እንደ ሕብረቁምፊ ይመልሳል።document.getElementById('hiddenDateField').value = getFormattedDate();
ይህ የኮድ መስመር፡-- ጥቅሞች
document.getElementById('hiddenDateField')
የተደበቀውን የግቤት መስክ “HiddenDateField” በሚለው መታወቂያ ለመምረጥ። - ያዘጋጃል
value
የተመረጠው የግቤት መስክ ንብረት በተመለሰው ዋጋgetFormattedDate()
ተግባር. ይህ የተደበቀውን መስክ በተጠቀሰው ቅርጸት የዛሬውን ቀን ይሞላል።
- ጥቅሞች
የመጨረሻው ውጤት ገፁ በሚጫንበት ጊዜ የተደበቀው የግቤት መስኩ መታወቂያ “HiddenDateField” ያለው የዛሬው ቀን በ mm/dd/ ዓ.ም ቅርጸት ነው ፣በዚህ ላይ እንደተገለጸው 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>
ይህ ኤችቲኤምኤል እና ጃቫ ስክሪፕት ኮድ የተደበቀ የግቤት መስክ ከዛሬው ቀን ጋር፣ mm/dd/yyyy ተብሎ የተቀረፀውን፣ ዜሮዎችን ሳይመራ ለማድረግ jQueryን እንዴት መጠቀም እንደሚቻል ያሳያል። ደረጃ በደረጃ እንከፋፍለው፡-
<!DOCTYPE html>
ና<html>
ይህ HTML5 ሰነድ መሆኑን የሚያመለክቱ መደበኛ የኤችቲኤምኤል ሰነዶች ናቸው።<head>
ይህ ክፍል ለድረ-ገጹ ሜታዳታ እና ግብዓቶችን ለማካተት ያገለግላል።<title>
የድረ-ገጹን ርዕስ "በ jQuery እና ጃቫ ስክሪፕት ቀን ነገር ቅድመ-ሕዝብ ቀን" አዘጋጅቷል።<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
ይህ መስመር ምንጩን ከይዘት ማስተላለፊያ አውታር (ሲዲኤን) በመለየት የ jQuery ቤተ-መጽሐፍትን ያካትታል። የ jQuery ቤተ-መጽሐፍት በድረ-ገጹ ላይ ጥቅም ላይ የሚውል መሆኑን ያረጋግጣል።<body>
የሚታየውን ይዘት እና የተጠቃሚ በይነገጽ ክፍሎችን የምታስቀምጥበት ይህ የድረ-ገጹ ዋና የይዘት ቦታ ነው።<form>
የግቤት መስኮችን ለመያዝ የሚያገለግል የኤችቲኤምኤል ቅጽ አባል። በዚህ አጋጣሚ፣ የተደበቀውን የግቤት መስክ ለማሸግ ይጠቅማል።<input type="hidden" id="hiddenDateField" name="hiddenDateField">
በድረ-ገጹ ላይ የማይታይ የተደበቀ የግቤት መስክ። የ"HiddenDateField" መታወቂያ እና "የተደበቀ ዴትፊልድ" ስም ተሰጥቷል።<script>
: ይህ የጃቫ ስክሪፕት ኮድ መፃፍ የሚችሉበት የጃቫ ስክሪፕት መክፈቻ መለያ ነው።$(document).ready(function() { ... });
ይህ የ jQuery ኮድ እገዳ ነው። የሚለውን ይጠቀማል$(document).ready()
ገጹ ሙሉ በሙሉ ከተጫነ በኋላ የያዘው ኮድ መሄዱን ለማረጋገጥ ተግባር። በዚህ ተግባር ውስጥ:const today = new Date();
አዲስ ይፈጥራልDate
የአሁኑን ቀን እና ሰዓት የሚወክል ነገር።const formattedDate = today.toLocaleDateString('en-US', { ... });
ቀኑን በሚፈለገው ቅርጸት (ሚሜ/ቀን/ዓመት) ወደ ሕብረቁምፊ ይቀርጻል።toLocaleDateString
ዘዴ.
$('#hiddenDateField').val(formattedDate);
jQuery ን በመጠቀም የተደበቀውን የግቤት መስክ “HiddenDateField” በሚለው መታወቂያ ይመርጣል እና ያዘጋጃል።value
ወደተዘጋጀው ቀን. ይህ በተጠቀሰው ቅርጸት የተደበቀውን መስክ ከዛሬ ቀን ጋር በብቃት ይሞላል።
የ jQuery ኮድ ከንፁህ ጃቫ ስክሪፕት ጋር ሲነፃፀር የተደበቀውን የግቤት መስክ የመምረጥ እና የመቀየር ሂደትን ቀላል ያደርገዋል። ገጹ በሚጫንበት ጊዜ የተደበቀው የግቤት መስኩ በዛሬው ቀን በ ሚሜ/ቀን/ዓዓም የተሞላ ነው፣ እና ምንም መሪ ዜሮዎች የሉም፣ በ ውስጥ እንደተገለጸው formattedDate
ተለዋዋጭ.