ಇಂದಿನ ದಿನಾಂಕ ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಥವಾ 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" ನ ID ಮತ್ತು "hiddenDateField" ಹೆಸರನ್ನು ನೀಡಲಾಗಿದೆ.<script>
: ಇದು JavaScript ಸ್ಕ್ರಿಪ್ಟ್ ಬ್ಲಾಕ್ಗಾಗಿ ಆರಂಭಿಕ ಟ್ಯಾಗ್ ಆಗಿದೆ, ಅಲ್ಲಿ ನೀವು JavaScript ಕೋಡ್ ಅನ್ನು ಬರೆಯಬಹುದು.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" ID ಯೊಂದಿಗೆ ಗುಪ್ತ ಇನ್ಪುಟ್ ಕ್ಷೇತ್ರವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು. - ಹೊಂದಿಸುತ್ತದೆ
value
ಆಯ್ಕೆಮಾಡಿದ ಇನ್ಪುಟ್ ಕ್ಷೇತ್ರದ ಆಸ್ತಿಯಿಂದ ಹಿಂತಿರುಗಿದ ಮೌಲ್ಯಕ್ಕೆgetFormattedDate()
ಕಾರ್ಯ. ಇದು ನಿರ್ದಿಷ್ಟ ಸ್ವರೂಪದಲ್ಲಿ ಇಂದಿನ ದಿನಾಂಕದೊಂದಿಗೆ ಗುಪ್ತ ಕ್ಷೇತ್ರವನ್ನು ಜನಪ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
- ಉಪಯೋಗಗಳು
ಅಂತಿಮ ಫಲಿತಾಂಶವೆಂದರೆ ಪುಟವನ್ನು ಲೋಡ್ ಮಾಡಿದಾಗ, ID "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 ಕೋಡ್ ಇಂದಿನ ದಿನಾಂಕದೊಂದಿಗೆ ಗುಪ್ತ ಇನ್ಪುಟ್ ಕ್ಷೇತ್ರವನ್ನು ಪೂರ್ವಭಾವಿಯಾಗಿ ಮಾಡಲು jQuery ಅನ್ನು ಹೇಗೆ ಬಳಸಬೇಕು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ, ಪ್ರಮುಖ ಸೊನ್ನೆಗಳಿಲ್ಲದೆ mm/dd/yyyy ಎಂದು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲಾಗಿದೆ. ಅದನ್ನು ಹಂತ ಹಂತವಾಗಿ ವಿಭಜಿಸೋಣ:
<!DOCTYPE html>
ಮತ್ತು<html>
: ಇದು HTML5 ಡಾಕ್ಯುಮೆಂಟ್ ಎಂದು ಸೂಚಿಸುವ ಪ್ರಮಾಣಿತ HTML ಡಾಕ್ಯುಮೆಂಟ್ ಘೋಷಣೆಗಳಾಗಿವೆ.<head>
: ವೆಬ್ಪುಟಕ್ಕಾಗಿ ಮೆಟಾಡೇಟಾ ಮತ್ತು ಸಂಪನ್ಮೂಲಗಳನ್ನು ಸೇರಿಸಲು ಈ ವಿಭಾಗವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.<title>
: ವೆಬ್ಪುಟದ ಶೀರ್ಷಿಕೆಯನ್ನು "jQuery ಮತ್ತು JavaScript ದಿನಾಂಕ ವಸ್ತುವಿನೊಂದಿಗೆ ದಿನಾಂಕ ಪೂರ್ವಜನಸಂಖ್ಯೆ" ಎಂದು ಹೊಂದಿಸುತ್ತದೆ.<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" ನ ID ಮತ್ತು "hiddenDateField" ನ ಹೆಸರನ್ನು ನಿಯೋಜಿಸಲಾಗಿದೆ.<script>
: ಇದು JavaScript ಸ್ಕ್ರಿಪ್ಟ್ ಬ್ಲಾಕ್ಗಾಗಿ ಆರಂಭಿಕ ಟ್ಯಾಗ್ ಆಗಿದ್ದು, ನೀವು JavaScript ಕೋಡ್ ಅನ್ನು ಬರೆಯಬಹುದು.$(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 ಕೋಡ್ ಶುದ್ಧ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ಗೆ ಹೋಲಿಸಿದರೆ ಗುಪ್ತ ಇನ್ಪುಟ್ ಕ್ಷೇತ್ರವನ್ನು ಆಯ್ಕೆ ಮಾಡುವ ಮತ್ತು ಮಾರ್ಪಡಿಸುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ. ಪುಟವನ್ನು ಲೋಡ್ ಮಾಡಿದಾಗ, ಮರೆಮಾಡಿದ ಇನ್ಪುಟ್ ಕ್ಷೇತ್ರವು ಇಂದಿನ ದಿನಾಂಕದೊಂದಿಗೆ mm/dd/yyyy ಸ್ವರೂಪದಲ್ಲಿ ತುಂಬಿರುತ್ತದೆ ಮತ್ತು ಇದರಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದಂತೆ ಯಾವುದೇ ಪ್ರಮುಖ ಸೊನ್ನೆಗಳು ಇರುವುದಿಲ್ಲ formattedDate
ವೇರಿಯಬಲ್.