- এই নিবন্ধটি ক্রোম সফ্টওয়্যার ইঞ্জিনিয়ার কেন্ট তামুরা লিখেছেন।
আপনি হয়তো ইতিমধ্যেই লক্ষ্য করেছেন, গুগল ক্রোম ক্রোম 20 থেকে একটি ডেটপিকারকে সমর্থন করে। শুধু date input উপাদানের type বৈশিষ্ট্য সেট করে, ব্যবহারকারী তীর বোতামে ক্লিক করতে পারেন এবং ক্রোম একটি সুন্দর ক্যালেন্ডার উইজেট পপ আপ করবে।
যেহেতু আমরা ডেভেলপারদের কাছ থেকে অনেক প্রতিক্রিয়া পেয়েছি, আমরা এই নিবন্ধে ডেট পিকার ব্যবহার করে কীভাবে সেরাটা পেতে পারি সে সম্পর্কে কিছু বিষয় স্পষ্ট করতে চাই।
কীভাবে লোকেল ইনপুট মানের তারিখ বিন্যাসকে প্রভাবিত করে?
ব্যবহারকারীরা একটি input[type=date] এর পাঠ্য ক্ষেত্রে একটি তারিখের মান টাইপ করতে পারেন এবং তারিখ বিন্যাসটি বক্সে ধূসর পাঠ্য হিসাবে দেখানো হয়৷ এই বিন্যাসটি অপারেটিং সিস্টেমের সেটিং থেকে প্রাপ্ত হয়।
ওয়েব লেখকদের তারিখ বিন্যাস পরিবর্তন করার কোন উপায় নেই কারণ বর্তমানে বিন্যাস নির্দিষ্ট করার জন্য কোন মান নেই।
একটি সার্ভারে পাঠানোর সময় ইনপুট মান কীভাবে উপস্থাপন করা হয়?
GET/POST-এর মতো HTTP অনুরোধে input[type=date] থেকে ব্যাখ্যা করা তারিখের মান yyyy-mm-dd হিসাবে ফর্ম্যাট করা হবে।
ইনপুট মান ফেরত কোন ধরনের বিন্যাস?
উপস্থাপনা বিন্যাস নির্বিশেষে input.value সর্বদা yyyy-mm-dd হিসাবে ফিরে আসে।
ইনপুট মান কি ধরনের বিন্যাস গ্রহণ করে?
প্রোগ্রামগতভাবে input.value সেট করার সময়, প্রারম্ভিক মান এবং JavaScript ইনজেক্ট করা মান উভয়ের জন্য উপস্থাপনা বিন্যাস নির্বিশেষে মানটি শুধুমাত্র yyyy-mm-dd শৈলী গ্রহণ করে।
আমি কীভাবে তারিখ চয়নকারীর চেহারা পরিবর্তন করব?
আপনি বর্তমানে তারিখ চয়নকারীর চেহারা স্টাইল করতে পারবেন না। WebKit-এ, আমরা আগে -webkit-appearance CSS প্রপার্টি বা ::-webkit-foo pseudo class সিলেক্টরের সাথে স্টাইল ফর্ম কন্ট্রোল করার উপায় প্রদান করেছি। যাইহোক, ক্যালেন্ডার পপআপ ওয়েবকিটে এই ধরনের উপায় প্রদান করে না কারণ এটি নথি থেকে আলাদা, যেমন <select> এর জন্য একটি পপআপ মেনু, এবং বর্তমানে এর উপ-উপাদানগুলিতে স্টাইলিং কীভাবে নিয়ন্ত্রণ করা যায় তার জন্য একটি মানক নেই।
আমি কিভাবে jQuery Datepicker এবং নেটিভ ডেট পিকারের মধ্যে দ্বন্দ্ব এড়াতে পারি?
আপনি যদি Google Chrome-এ input[type=date] এ jQuery Datepicker ব্যবহার করে থাকেন, তাহলে আপনি হয়তো jQuery UI এবং নেটিভ ক্যালেন্ডার পপআপ উভয়েরই ওভারল্যাপিং ক্যালেন্ডার লক্ষ্য করেছেন। আপনি যদি সমস্ত প্ল্যাটফর্মে jQuery Datepicker প্রয়োগ করতে চান, input[type=date] এর পরিবর্তে input[type=text] ব্যবহার করুন। শুধু Google Chrome নয়, iOS Safari, BlackBerry ব্রাউজার এবং Opera-এরও input[type=date] এর জন্য নিজস্ব UI আছে, এবং বর্তমানে input[type=date] ব্যবহার করে সমস্ত প্ল্যাটফর্মে একটি ইউনিফাইড UI অর্জন করার কোনো উপায় নেই। আপনি যদি input[type=date] সমর্থন ছাড়াই শুধুমাত্র প্ল্যাটফর্মে jQuery Datepicker প্রয়োগ করতে চান, তাহলে আপনি Modernizr বা নিম্নলিখিত কোড ব্যবহার করতে পারেন:
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();