আজকের তারিখ এবং জাভাস্ক্রিপ্ট বা 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>
: এগুলি হল প্রমিত HTML নথির ঘোষণা যা উল্লেখ করে যে এটি একটি HTML5 নথি৷<head>
: এই বিভাগটি সাধারণত নথি সম্পর্কে মেটাডেটা অন্তর্ভুক্ত করতে ব্যবহৃত হয়, যেমন ওয়েবপৃষ্ঠার শিরোনাম, যা ব্যবহার করে সেট করা হয়<title>
উপাদান।<title>
: এটি ওয়েবপৃষ্ঠার শিরোনামকে "জাভাস্ক্রিপ্টের সাথে তারিখ প্রিপুলেশন" এ সেট করে।<body>
: এটি ওয়েবপৃষ্ঠার প্রধান বিষয়বস্তু এলাকা যেখানে আপনি দৃশ্যমান বিষয়বস্তু এবং ব্যবহারকারী ইন্টারফেস উপাদানগুলি রাখেন৷<form>
: একটি ফর্ম উপাদান যাতে ইনপুট ক্ষেত্র থাকতে পারে। এই ক্ষেত্রে, এটি লুকানো ইনপুট ক্ষেত্র ধারণ করতে ব্যবহৃত হয় যা আজকের তারিখের সাথে পপুলেট করা হবে।<input type="hidden" id="hiddenDateField" name="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>
এই এইচটিএমএল এবং জাভাস্ক্রিপ্ট কোডটি দেখায় কিভাবে 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">
: একটি লুকানো ইনপুট ক্ষেত্র যা ওয়েবপেজে দৃশ্যমান হবে না। এটি "লুকানো তারিখফিল্ড" এর একটি আইডি এবং "হিডেনডেটফিল্ড" এর একটি নাম বরাদ্দ করা হয়েছে৷<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
পরিবর্তনশীল।