HTML-এ, একটি ডেট পিকার একটি উপযোগী ইনপুট কন্ট্রোল যা ব্যবহারকারীদের ওয়েবসাইট বা ফর্মে নির্দিষ্ট তারিখ নির্বাচন করতে দেয়। ডিফল্টভাবে, ডেট পিকার যেকোনো তারিখ গ্রহণ করে, কিন্তু আপনি max অ্যাট্রিবিউট ব্যবহার করে সিলেক্টেবল ডেট রেঞ্জ সীমাবদ্ধ করতে পারেন আজকের বা তারিখের পূর্ববর্তী তারিখে নির্বাচন সীমাবদ্ধ করতে।
সিনট্যাক্স
<input type="date" max="YYYY-MM-DD">
ডেট পিকার কী?
একটি ডেট পিকার হল একটি ইউজার ইন্টারফেস কম্পোনেন্ট যা ব্যবহারকারীদের ক্যালেন্ডার ইন্টারফেসের মাধ্যমে তারিখ নির্বাচন করতে দেয়। এটি রিজারভেশন সিস্টেম, শিডিউলিং সফটওয়্যার, বা জন্মদিন সংগ্রহের মতো ফর্মে সাধারণত ব্যবহৃত হয়।
JavaScript-এ Max Date আজকের তারিখে সেট করা
max অ্যাট্রিবিউটকে ডাইনামিক্যালি আজকের তারিখে সেট করতে, আপনাকে JavaScript দরকার যাতে বর্তমান তারিখ YYYY-MM-DD ফরম্যাটে জেনারেট করা যায়।
HTML স্ট্রাকচার
type="date" সহ একটি ইনপুট এলিমেন্ট তৈরি করুন:
<input type="date" id="datepicker">
সম্পূর্ণ উদাহরণ
JavaScript ব্যবহার করে ডেট পিকারের সর্বোচ্চ নির্বাচনযোগ্য তারিখ আজকে সেট করার পদ্ধতি:
<!DOCTYPE html> <html> <head> <title>Date Picker with Max Date</title> </head> <body> <h3>Select a Date (Max: Today)</h3> <input type="date" id="datepicker"> <script> const today = new Date(); const year = today.getFullYear(); const month = String(today.getMonth() + 1).padStart(2, '0'); const day = String(today.getDate()).padStart(2, '0'); const formattedDate = `${year}-${month}-${day}`; document.getElementById('datepicker').setAttribute('max', formattedDate); </script> </body> </html>
একটি ডেট পিকার ইনপুট দেখা যাচ্ছে যা শুধু আজকের তারিখ পর্যন্ত এবং সেইমধ্যে তারিখ নির্বাচনের অনুমতি দেয়। ভবিষ্যতের তারিখগুলো ডিজেবলড এবং নির্বাচন করা যাবে না।
JavaScript কীভাবে কাজ করে
JavaScript কোডটি এই ধাপগুলো পেরফর্ম করে:
- বর্তমান তারিখকে রিপ্রেজেন্টকারী একটি নতুন Date অবজেক্ট তৈরি করে
- বছর, মাস, এবং দিন কম্পোনেন্ট এক্সট্রাক্ট করে
padStart()ব্যবহার করে মাস এবং দিনকে লিডিং জিরো দিয়ে ফরম্যাট করে- ডেট ইনপুটের জন্য প্রয়োজনীয় YYYY-MM-DD ফরম্যাটে সেগুলো কম্বাইন করে
- ডেট পিকারের max অ্যাট্রিবিউট সেট করে
উপযোগী ক্ষেত্র
সর্বোচ্চ তারিখ আজকে সীমাবদ্ধ করা χρήostic:
- বুকিং সিস্টেম যেগুলো শুধু বর্তমান বা অতীতের তারিখ নির্বাচনের অনুমতি দেয়
- জন্মদিন বা ইভেন্ট রেজিস্ট্রেশন ফর্ম
- ডেটা সংগ্রহ ফর্ম যেখানে ভবিষ্যতের তারিখ প্রাসঙ্গিক নয়
- ইতিহাস রেকর্ড এন্ট্রি সিস্টেম
উপসংহার
HTML ডেট পিকারের max ডেট আজকে সেট করলে ব্যবহারকারীদের ভবিষ্যতের তারিখ নির্বাচন করা থেকে বাধা দেয়। আজকের তারিখ YYYY-MM-DD ফরম্যাটে ডাইনামিক্যালি জেনারেট করতে JavaScript ব্যবহার করুন এবং রিয়েল-টাইম ডেট সীমাবদ্ধতার জন্য ইনপুটের max অ্যাট্রিবিউটে প্রয়োগ করুন।
