- این مقاله توسط یک مهندس نرم افزار کروم، کنت تامورا نوشته شده است.
همانطور که قبلاً متوجه شده اید، Google Chrome از Chrome 20 از یک datepicker پشتیبانی می کند. فقط با تنظیم ویژگی type عنصر input به date ، کاربر می تواند روی دکمه پیکان کلیک کند و Chrome یک ویجت تقویم زیبا ظاهر می شود.
از آنجایی که بازخوردهای زیادی از توسعه‌دهندگان دریافت کرده‌ایم، می‌خواهیم در این مقاله نکاتی را در مورد نحوه بهترین استفاده از انتخابگر تاریخ توضیح دهیم.
چگونه محلی بر قالب تاریخ مقدار ورودی تأثیر می گذارد؟
کاربران می‌توانند مقدار تاریخ را در فیلد متن input[type=date] با قالب تاریخ که در کادر به‌صورت متن خاکستری نشان داده شده است، تایپ کنند. این فرمت از تنظیمات سیستم عامل به دست می آید.
نویسندگان وب راهی برای تغییر قالب تاریخ ندارند زیرا در حال حاضر هیچ استانداردی برای تعیین قالب وجود ندارد.
مقدار ورودی هنگام ارسال به سرور چگونه نمایش داده می شود؟
مقدار تاریخ تفسیر شده از input[type=date] در درخواست HTTP مانند GET / POST به صورت yyyy-mm-dd قالب‌بندی می‌شود.
مقدار ورودی چه نوع فرمتی را برمی گرداند؟
input.value همیشه به صورت yyyy-mm-dd بدون توجه به فرمت ارائه برمی گردد.
مقدار ورودی چه نوع قالبی را می پذیرد؟
وقتی input.value را به صورت برنامه‌ریزی تنظیم می‌کنید، این مقدار صرف‌نظر از فرمت ارائه، هم برای مقدار اولیه و هم برای مقدار تزریق شده جاوا اسکریپت، فقط سبک yyyy-mm-dd را می‌پذیرد.
چگونه ظاهر انتخابگر تاریخ را تغییر دهم؟
در حال حاضر نمی توانید ظاهر انتخابگر تاریخ را استایل دهید. در WebKit، قبلاً راه‌هایی برای استایل دادن به کنترل‌های فرم با ویژگی -webkit-appearance CSS یا انتخابگر کلاس شبه ::-webkit-foo ارائه کرده‌ایم. با این حال، پنجره بازشو تقویم چنین راه‌هایی را در WebKit ارائه نمی‌کند، زیرا از سند جدا است، مانند یک منوی بازشو برای <select> ، و در حال حاضر استانداردی برای نحوه کنترل استایل بر روی عناصر فرعی آن وجود ندارد.
چگونه می توانم از تداخل بین jQuery Datepicker و انتخاب کننده تاریخ بومی جلوگیری کنم؟
اگر jQuery Datepicker را در input[type=date] در Google Chrome امتحان کرده باشید، ممکن است متوجه همپوشانی تقویم‌های رابط کاربری jQuery و پنجره اصلی تقویم شده باشید. اگر می‌خواهید jQuery Datepicker را در همه پلتفرم‌ها اعمال کنید، به جای input[type= input[type=date] input[type=text] استفاده کنید. نه تنها Google Chrome، بلکه iOS Safari، مرورگر BlackBerry و Opera نیز رابط کاربری مخصوص به خود را برای input[type=date] دارند، و در حال حاضر هیچ راهی برای دستیابی به یک رابط کاربری یکپارچه در همه پلتفرم‌ها با استفاده از input[type=date] وجود ندارد. اگر می‌خواهید jQuery Datepicker را فقط روی پلتفرم‌هایی بدون پشتیبانی input[type=date] اعمال کنید، می‌توانید از 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();