تگ datetime-local در HTML
تگ datetime-local در HTML یکی از انواع ورودی‌های فرم است که به کاربران اجازه می‌دهد تاریخ و زمان را بدون در نظر گرفتن منطقه زمانی (Timezone) انتخاب کنند. این تگ بخشی از عنصر <input> است و برای جمع‌آوری اطلاعات دقیق زمانی در فرم‌های وب بسیار مفید می‌باشد.
تفاوت اصلی بین datetime-local و date در این است که اولی امکان انتخاب هم زمان و هم تاریخ را فراهم می‌کند، در حالی که دومی فقط برای انتخاب تاریخ طراحی شده است.
نحوه استفاده از datetime-local
برای استفاده از این تگ، کافی است نوع ورودی را به صورت زیر تعیین کنید:
<input type="datetime-local" name="meeting_time">
مرورگرها این ورودی را به صورت یک کنترل گرافیکی نمایش می‌دهند که شامل انتخابگر تاریخ و زمان است. برای اطلاعات بیشتر درباره ویژگی‌های این تگ می‌توانید تگ datetime-local در html.
ویژگی‌های مهم datetime-local
| ویژگی |
توضیح |
| min |
تعیین حداقل تاریخ و زمان قابل انتخاب |
| max |
تعیین حداکثر تاریخ و زمان قابل انتخاب |
| step |
تعیین گام افزایشی برای انتخاب زمان (بر حسب ثانیه) |
| value |
مقدار پیش‌فرض برای ورودی |
مثال عملی
در اینجا یک مثال کامل از استفاده datetime-local را مشاهده می‌کنید:
<form action="/submit" method="post">
<label for="event">زمان رویداد:</label>
<input type="datetime-local" id="event" name="event_time"
min="2023-01-01T00:00" max="2023-12-31T23:59" step="900">
<input type="submit">
</form>
در این مثال، کاربر فقط می‌تواند زمان‌هایی را انتخاب کند که:
- بین 1 ژانویه 2023 تا 31 دسامبر 2023 باشد
- با گام‌های 15 دقیقه‌ای (900 ثانیه) قابل تنظیم است
محدودیت‌ها و نکات مهم
هنگام استفاده از datetime-local باید به چند نکته مهم توجه کنید:
- فرمت داده ارسالی همیشه YYYY-MM-DDThh:mm است
- پشتیبانی مرورگرها ممکن است متفاوت باشد (به خصوص در نسخه‌های قدیمی)
- این تگ منطقه زمانی (Timezone) را در نظر نمی‌گیرد
- برای نمایش بهتر در دستگاه‌های مختلف ممکن است نیاز به استایل‌دهی اضافی داشته باشید
نکته: برای اطمینان از سازگاری با تمام مرورگرها، همیشه یک جایگزین مانند ورودی متنی معمولی یا پیام راهنما در نظر بگیرید. همچنین می‌توانید از کتابخانه‌های جاوااسکریپت برای بهبود تجربه کاربری استفاده کنید.
