انتخاب کننده تاریخ و زمان Date and time picker

انتخاب کننده تاریخ و زمان یا Date and time picker چیست؟

انتخاب کننده تاریخ و زمان (Date and time picker) یکی از انواع المان ها یا ویجت های رابط کاربری گرافیکی است که امکان انتخاب یک تاریخ (یا یک بازه تاریخ) و زمان را فراهم می‌کند. این ویجت ها در واقع ترکیبی از انتخاب کننده های تاریخ (Date picker) و انتخاب کننده های زمان (Time picker) هستند که به ترتیب صرفا برای تعیین تاریخ یا زمان به کار می‌روند.

انتخاب کننده تاریخ یا Date picker

انتخاب کننده تاریخ (Date picker) نوعی المان گرافیکی است که به شکل متداول امکان انتخاب تاریخ را با کمک یک تقویم فراهم می‌کند. برای این منظور معمولا یک جعبه متنی برای نگهداری تاریخ در اختیار کاربر قرار می‌گیرد. با کلیک روی این فیلد یا دکمه‌ای که کنار آن قرار دارد یک تقویم ماهیانه در کنار یا پایین جعبه متنی نمایان می‌شود. کاربر با کمک این تقویم و دکمه های موجود در آن می‌تواند به روز موردنظر خود مراجعه و آن را انتخاب کند. با انجام این کار اجزای مختلف تاریخ (شامل روز، ماه و سال) به صورت خودکار در فیلد متنی درج می‌شود. البته معمولا کاربر می‌تواند به صورت دستی هم بخش‌های مختلف تاریخ را در فیلد متنی مذکور وارد کند.

تعیین تاریخ تولد، تاریخ بلیط هواپیما و … از جمله کاربردهای Date picker ها محسوب می‌شود. برخی از این ویجت ها امکان گزینش یک بازه تاریخ را هم فراهم می‌کنند. به این ترتیب تعیین بازه سفر، تاریخ بلیط رفت و برگشت یا روزهای رزرو هتل نیز با کمک Date picker ها میسر می‌شود.

در برخی انتخاب کننده های تاریخ، دکمه‌هایی برای مراجعه فوری به تاریخ امروز و جابجایی بین ماه‌ها در اختیار کاربر قرار می‌گیرد. به علاوه معمولا کاربر می‌تواند با کلیک روی سال یا ماه به فهرستی از شماره سال‌ها یا عنوان ماه‌ها برای انتخاب سریع‌تر سال و ماه موردنظر دسترسی پیدا کند.

انتخاب کننده زمان یا Time picker

انتخاب کننده زمان یا Time picker نوعی المان گرافیکی است که امکان انتخاب زمان (ساعت، دقیقه و ثانیه) را فراهم می‌کند. این کار معمولا با کمک تعدادی اسپینر، لیست کشویی یا لیست های چرخشی (شامل اعداد مجاز) برای تعیین مولفه‌های مختلف زمان انجام می‌شود. از این ویجت‌ها برای تعیین زمان هشدار و … استفاده می‌شود.

کاربر در یک Time picker می‌تواند متناسب با نوع المان، اجزای مختلف زمان را مشخص کند. برای مثال ممکن است با کلیک روی فلش های رو به پایین یا بالای هر مولفه، مقدار آن را کاهش یا افزایش دهد، مقدار موردنظر برای اجزای زمان را از یک لیست انتخاب کند یا با اسکرول کردن یک لیست ساعت، دقیقه و ثانیه را تغییر دهد. مشابه با Date picker در برخی انتخاب کننده های زمان، امکان وارد کردن دستی این مولفه‌ها نیز فراهم می‌شود.

انتخاب برخی مولفه های زمان (برای مثال فقط ساعت و دقیقه) و نمایش زمان در حالت‌های 12 ساعته (با درج A.M. یا P.M.) یا 24 ساعته از جمله قابلیت‌های این المان‌هاست.

مزایای انتخاب کننده های تاریخ و زمان

استفاده از انتخاب کننده های تاریخ و زمان برای تعیین تاریخ و زمان در مقایسه با استفاده از ویجت ها و جعبه های متن عادی مزیت های فراوانی دارد. از جمله این مزیت‌ها می‌توان به موارد زیر اشاره کرد:

• امکان تعیین آسان تاریخ و زمان
• جلوگیری از تعیین تاریخ یا زمان نادرست (برای مثال عدم امکان گزینش تاریخ 31 ام آبان یا ساعت 25 و 30 دقیقه)
• امکان محدودسازی تاریخ و زمان (برای مثال امکان گزینش روزهای آینده یا گذشته و ساعت‌های اداری)
• امکان تعیین بازه تاریخ به صورت یکجا (در صورت استفاده از ویجت های عادی، این موضوع که باید تاریخ اول قبل از تاریخ دوم باشد نیز لازم است بررسی شود. این در حالیست که Date picker ها می‌توانند به صورت خودکار صحت این تاریخ ها را تضمین کنند).
• جلوگیری از بروز اشتباه در فرمت تاریخ (برای مثال در تاریخ های میلادی ممکن است ماه به عنوان اولین آیتم به صورت mm/dd/yyyy یا دومین آیتم به صورت dd/mm/yyyy درج شود که در آن dd نمایانگر ارقام روز، mm نمایانگر ارقام ماه و yyyy نمایانگر ارقام سال است. همین تفاوت ممکن است باعث شود کاربر هنگام ورود دستی تاریخ، جای روز و ماه را اشتباه وارد کند).

تعیین تاریخ و زمان در فرم‌های HTML

در HTML می‌توانید از المان <input> برای انتخاب تاریخ و ساعت در صفحات وب استفاده کنید. کافیست مشابه با مثال زیر یکی از مقادیر “date” یا “time” یا “datetime-local” را برای دریافت تاریخ، زمان یا هر دو به خصوصیت type در تگ شروع این المان اختصاص دهید.

<form action="/action_page.php">
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday">
    <br><br>
    <label for="classdatetime">Class date and time:</label>
    <input type="datetime-local" id="classdatetime" name="classdatetime">
    <br><br>
    <label for="notifyme">Notify me (with SMS) at:</label>
    <input type="time" id="notifyme" name="notifyme">
    <br><br>
    <input type="submit" value="Submit">
</form>

معمولا المان های فوق به صورت انتخاب کننده های تاریخ و زمان مشابه با نمونه‌های زیر توسط مرورگرهای وب نمایش داده می‌شود. در تصویر زیر نتیجه کد فوق را در مرورگر گوگل کروم (نسخه 109) مشاهده می‌کنید: