இன்றைய தேதி மற்றும் ஜாவாஸ்கிரிப்ட் அல்லது 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 ஆவணம் என்பதைக் குறிப்பிடும் நிலையான HTML ஆவண அறிவிப்புகள்.<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
பண்புகள் தேதி வடிவமைப்பை வரையறுக்கிறது.
- இது புதியதை உருவாக்குகிறது
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 மற்றும் ஜாவாஸ்கிரிப்ட் குறியீடு, மறைந்த உள்ளீட்டுப் புலத்தை, mm/dd/yyyy என வடிவமைத்து, பூஜ்ஜியங்களை முன்னிறுத்தாமல், இன்றைய தேதியுடன் எவ்வாறு jQuery ஐப் பயன்படுத்துவது என்பதை விளக்குகிறது. அதை படிப்படியாக உடைப்போம்:
<!DOCTYPE html>
மற்றும்<html>
: இவை HTML5 ஆவணம் என்பதைக் குறிக்கும் நிலையான HTML ஆவண அறிவிப்புகள்.<head>
: இந்தப் பகுதி மெட்டாடேட்டா மற்றும் வலைப்பக்கத்திற்கான ஆதாரங்களைச் சேர்க்கப் பயன்படுகிறது.<title>
: வலைப்பக்கத்தின் தலைப்பை "jQuery மற்றும் ஜாவாஸ்கிரிப்ட் தேதிப் பொருளுடன் தேதி முன்தொகை" என அமைக்கிறது.<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: இந்த வரியானது jQuery நூலகத்தை உள்ளடக்க டெலிவரி நெட்வொர்க்கில் (CDN) இருந்து அதன் மூலத்தைக் குறிப்பிடுகிறது. வலைப்பக்கத்தில் பயன்படுத்த 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
மாறி.