ਅੱਜ ਦੀ ਮਿਤੀ ਅਤੇ JavaScript ਜਾਂ JQuery ਦੇ ਨਾਲ ਇੱਕ ਫਾਰਮ ਫੀਲਡ ਨੂੰ ਕਿਵੇਂ ਤਿਆਰ ਕਰਨਾ ਹੈ
ਹਾਲਾਂਕਿ ਬਹੁਤ ਸਾਰੇ ਹੱਲ ਹਰੇਕ ਫਾਰਮ ਐਂਟਰੀ ਦੇ ਨਾਲ ਮਿਤੀ ਨੂੰ ਸਟੋਰ ਕਰਨ ਦਾ ਮੌਕਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ, ਕਈ ਵਾਰ ਅਜਿਹਾ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਇਹ ਕੋਈ ਵਿਕਲਪ ਨਹੀਂ ਹੁੰਦਾ। ਅਸੀਂ ਆਪਣੇ ਗ੍ਰਾਹਕਾਂ ਨੂੰ ਉਹਨਾਂ ਦੀ ਸਾਈਟ ਤੇ ਇੱਕ ਲੁਕਿਆ ਹੋਇਆ ਖੇਤਰ ਜੋੜਨ ਅਤੇ ਇੰਦਰਾਜ਼ ਦੇ ਨਾਲ ਇਸ ਜਾਣਕਾਰੀ ਨੂੰ ਪਾਸ ਕਰਨ ਲਈ ਉਤਸ਼ਾਹਿਤ ਕਰਦੇ ਹਾਂ ਤਾਂ ਜੋ ਉਹ ਟ੍ਰੈਕ ਕਰ ਸਕਣ ਜਦੋਂ ਫਾਰਮ ਐਂਟਰੀਆਂ ਦਾਖਲ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨਾ, ਇਹ ਆਸਾਨ ਹੈ।
ਅੱਜ ਦੀ ਮਿਤੀ ਅਤੇ 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>
ਆਉ ਪ੍ਰਦਾਨ ਕੀਤੇ ਗਏ HTML ਅਤੇ JavaScript ਕੋਡ ਨੂੰ ਕਦਮ ਦਰ ਕਦਮ ਨੂੰ ਤੋੜੀਏ:
<!DOCTYPE html>
ਅਤੇ<html>
: ਇਹ ਮਿਆਰੀ HTML ਦਸਤਾਵੇਜ਼ ਘੋਸ਼ਣਾਵਾਂ ਹਨ ਜੋ ਦੱਸਦੀਆਂ ਹਨ ਕਿ ਇਹ ਇੱਕ HTML5 ਦਸਤਾਵੇਜ਼ ਹੈ।<head>
: ਇਹ ਭਾਗ ਆਮ ਤੌਰ 'ਤੇ ਦਸਤਾਵੇਜ਼ ਬਾਰੇ ਮੈਟਾਡੇਟਾ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਵੈਬਪੇਜ ਦਾ ਸਿਰਲੇਖ, ਜੋ<title>
ਤੱਤ.<title>
: ਇਹ ਵੈੱਬਪੇਜ ਦੇ ਸਿਰਲੇਖ ਨੂੰ "ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੇ ਨਾਲ ਮਿਤੀ ਪ੍ਰੀਪੋਪੁਲੇਸ਼ਨ" 'ਤੇ ਸੈੱਟ ਕਰਦਾ ਹੈ।<body>
: ਇਹ ਵੈੱਬਪੇਜ ਦਾ ਮੁੱਖ ਸਮੱਗਰੀ ਖੇਤਰ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਦਿਖਣਯੋਗ ਸਮੱਗਰੀ ਅਤੇ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਤੱਤ ਰੱਖਦੇ ਹੋ।<form>
: ਇੱਕ ਫਾਰਮ ਤੱਤ ਜਿਸ ਵਿੱਚ ਇਨਪੁਟ ਖੇਤਰ ਸ਼ਾਮਲ ਹੋ ਸਕਦੇ ਹਨ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ ਓਹਲੇ ਇਨਪੁਟ ਖੇਤਰ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜੋ ਅੱਜ ਦੀ ਮਿਤੀ ਨਾਲ ਭਰੀ ਜਾਵੇਗੀ।<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: ਇਹ ਇੱਕ ਲੁਕਿਆ ਹੋਇਆ ਇਨਪੁਟ ਖੇਤਰ ਹੈ। ਇਹ ਪੰਨੇ 'ਤੇ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦਾ ਪਰ ਡਾਟਾ ਸਟੋਰ ਕਰ ਸਕਦਾ ਹੈ। ਇਸਨੂੰ JavaScript ਵਿੱਚ ਪਛਾਣ ਅਤੇ ਵਰਤੋਂ ਲਈ “hiddenDateField” ਦੀ ਇੱਕ ID ਅਤੇ “hiddenDateField” ਦਾ ਨਾਮ ਦਿੱਤਾ ਗਿਆ ਹੈ।<script>
: ਇਹ JavaScript ਸਕ੍ਰਿਪਟ ਬਲਾਕ ਲਈ ਸ਼ੁਰੂਆਤੀ ਟੈਗ ਹੈ, ਜਿੱਥੇ ਤੁਸੀਂ JavaScript ਕੋਡ ਲਿਖ ਸਕਦੇ ਹੋ।function getFormattedDate() { ... }
: ਇਹ ਇੱਕ JavaScript ਫੰਕਸ਼ਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ ਜਿਸ ਨੂੰ ਕਿਹਾ ਜਾਂਦਾ ਹੈgetFormattedDate()
. ਇਸ ਫੰਕਸ਼ਨ ਦੇ ਅੰਦਰ:- ਇਹ ਇੱਕ ਨਵਾਂ ਬਣਾਉਂਦਾ ਹੈ
Date
ਵਰਤਮਾਨ ਮਿਤੀ ਅਤੇ ਸਮੇਂ ਨੂੰ ਦਰਸਾਉਂਦੀ ਵਸਤੂconst today = new Date();
. - ਇਹ ਮਿਤੀ ਨੂੰ ਲੋੜੀਂਦੇ ਫਾਰਮੈਟ (mm/dd/yyyy) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸਤਰ ਵਿੱਚ ਫਾਰਮੈਟ ਕਰਦਾ ਹੈ
today.toLocaleDateString()
. The'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>
: ਇਹ ਮਿਆਰੀ HTML ਦਸਤਾਵੇਜ਼ ਘੋਸ਼ਣਾਵਾਂ ਹਨ ਜੋ ਦਰਸਾਉਂਦੀਆਂ ਹਨ ਕਿ ਇਹ ਇੱਕ HTML5 ਦਸਤਾਵੇਜ਼ ਹੈ।<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 ਕੋਡ ਸ਼ੁੱਧ JavaScript ਦੇ ਮੁਕਾਬਲੇ ਲੁਕਵੇਂ ਇਨਪੁਟ ਖੇਤਰ ਨੂੰ ਚੁਣਨ ਅਤੇ ਸੋਧਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦਾ ਹੈ। ਜਦੋਂ ਪੰਨਾ ਲੋਡ ਹੁੰਦਾ ਹੈ, ਲੁਕਿਆ ਹੋਇਆ ਇਨਪੁਟ ਫੀਲਡ ਅੱਜ ਦੀ ਮਿਤੀ ਨਾਲ mm/dd/yyyy ਫਾਰਮੈਟ ਵਿੱਚ ਭਰਿਆ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਕੋਈ ਵੀ ਮੋਹਰੀ ਜ਼ੀਰੋ ਮੌਜੂਦ ਨਹੀਂ ਹੁੰਦੇ, ਜਿਵੇਂ ਕਿ ਵਿੱਚ ਦਰਸਾਏ ਗਏ ਹਨ। formattedDate
ਵੇਰੀਏਬਲ.