কাস্টম এলিমেন্ট এবং Shadow DOM দিয়ে ডেট-টাইম ফরম্যাট ওভাররাইড
নেটিভ <input type="datetime-local">-র ফরম্যাট ব্রাউজার-নির্ভর (লোকেল অনুযায়ী)। কাস্টম ফরম্যাট বাধ্যতামূলক করার জন্য কাস্টম HTML এলিমেন্ট + Shadow DOM ব্যবহার করা যায়।
কনসেপ্ট
- একটি কাস্টম এলিমেন্ট ডিফাইন করুন:
<date-time-format-change>। - Shadow DOM-এ ইনপুট এবং ফরম্যাটিং লজিক এনক্যাপসুলেট করুন।
formatঅ্যাট্রিবিউট দিয়ে ফরম্যাট পাস করুন (যেমনdd/mm/yyyy)।
উদাহরণ (কনসেপ্টুয়াল)
ব্রাউজার সাপোর্ট
- Custom Elements v1: Chrome 54+, Firefox 63+, Safari 10.1+, Edge 79+।
- IE10 এবং পুরনো ভার্সন সাপোর্ট করে না (পলিফিল দরকার:
@webcomponents/webcomponentsjs)।
বিকল্প: লাইটওয়েট সমাধান
কাস্টম এলিমেন্ট বজায় <input type="text"> + JavaScript লাইব্রেরি (যেমন Flatpickr, Day.js, date-fns) ব্যবহার করে ফরম্যাট কন্ট্রোল করা সহজ এবং ব্রাউজার কম্প্যাটিবল।
