راهنمای کامل input type=“datetime-local” در HTML: ورودی تاریخ و زمان بدون منطقه زمانی

ورودی تاریخ و زمان محلی در HTML با `input type="datetime-local"`

سلام به توسعه دهندگان وب و علاقه مندان به ساخت فرم های تعاملی! در دنیای امروز، جمع آوری اطلاعات دقیق از کاربران، امری حیاتی است و اغلب نیاز به دریافت تاریخ و زمان دقیق رویدادها، قرار ملاقات ها یا ثبت نام ها داریم. HTML5 با معرفی انواع جدیدی از عناصر <input>، این فرآیند را بسیار ساده تر کرده است. یکی از این عناصر کاربردی، input type="datetime-local" است که به کاربران اجازه می دهد تاریخ و زمان را به صورت محلی (بدون در نظر گرفتن منطقه زمانی) انتخاب کنند. این عنصر یک رابط کاربری گرافیکی (مانند تقویم و ساعت) را برای انتخاب آسان تر فراهم می کند. در این راهنمای جامع و مفصل، ما به بررسی عمیق input type="datetime-local" می پردازیم: نحوه استفاده صحیح از آن، ساختار مقادیر ورودی، مزایا و چالش های مربوط به آن، و چگونگی پردازش این داده ها در سمت سرور. با ما همراه باشید تا بر این عنصر مهم در فرم های HTML تسلط پیدا کنید!

عنصر <input type="datetime-local"> در HTML5 به کاربران اجازه می دهد تا تاریخ و زمان را بدون هیچ گونه اطلاعات منطقه زمانی (Timezone) انتخاب کنند. این بدان معناست که مقدار ورودی فقط شامل تاریخ (سال، ماه، روز) و زمان (ساعت، دقیقه، ثانیه) است و هیچ اشاره ای به منطقه زمانی خاصی ندارد. این برای سناریوهایی که منطقه زمانی برای ورودی اهمیت ندارد یا توسط منطق برنامه در سمت سرور تعیین می شود، بسیار مفید است.

نحوه استفاده از `input type="datetime-local"`

برای استفاده از این نوع ورودی، کافی است نوع عنصر <input> را برابر با datetime-local قرار دهید.

ساختار کلی:

<label for="meeting-time">انتخاب زمان ملاقات:</label>
<input type="datetime-local" id="meeting-time" name="meeting-time"
       value="2024-07-20T14:30:00">

توضیحات اجزا:

<label for="meeting-time">: برچسبی که نوع ورودی را توضیح می دهد و با ویژگی for به فیلد ورودی مرتبط می شود. کلیک روی این برچسب، فیلد ورودی را فعال می کند.
<input type="datetime-local">: عنصر اصلی برای انتخاب تاریخ و زمان محلی.
id="meeting-time": یک شناسه منحصر به فرد برای این عنصر که با ویژگی for در <label> مطابقت دارد.
name="meeting-time": نامی که برای ارسال داده ها به سرور استفاده می شود.
value="2024-07-20T14:30:00" (اختیاری): مقدار پیش فرض برای فیلد. فرمت این مقدار باید مطابق با استاندارد ISO 8601 باشد: YYYY-MM-DDTHH:MM:SS.
- YYYY: سال چهار رقمی
- MM: ماه دو رقمی (01 تا 12)
- DD: روز دو رقمی (01 تا 31)
- T: جداکننده اجباری بین تاریخ و زمان.
- HH: ساعت دو رقمی (00 تا 23)
- MM: دقیقه دو رقمی (00 تا 59)
- SS: ثانیه دو رقمی (00 تا 59) (اختیاری، اما اگر استفاده شود باید دو رقمی باشد)

ویژگی های مفید دیگر:

min و max: برای تعیین حداقل و حداکثر تاریخ و زمان قابل انتخاب. این مقادیر نیز باید با فرمت YYYY-MM-DDTHH:MM:SS باشند.
```
<input type="datetime-local" id="appointment-start" name="appointment-start"
       min="2024-07-20T08:00:00" max="2024-07-20T17:00:00">
```
step: برای تعیین مضارب قابل قبول برای ثانیه. مثلاً step="60" فقط به کاربر اجازه می دهد دقایق را انتخاب کند (ثانیه ها همیشه 00 خواهند بود). step="3600" فقط ساعت ها را مجاز می کند.
```
<input type="datetime-local" id="hourly-meeting" name="hourly-meeting" step="3600">
```

required: برای اجباری کردن پر کردن این فیلد.

<input type="datetime-local" id="event-time" name="event-time" required>

disabled: برای غیرفعال کردن فیلد.
readonly: برای قابل مشاهده کردن فیلد اما غیرقابل ویرایش.

نمایش در مرورگر: نحوه نمایش انتخابگر تاریخ و زمان بسته به مرورگر و سیستم عامل کاربر متفاوت خواهد بود. مرورگرها معمولاً یک رابط کاربری گرافیکی (مانند تقویم و کنترل های ساعت) برای انتخاب آسان تر ارائه می دهند.

محدودیت ها:

عدم پشتیبانی از منطقه زمانی: همانطور که گفته شد، این فیلد منطقه زمانی را در نظر نمی گیرد. این می تواند منجر به سردرگمی شود اگر کاربر در منطقه ای زندگی می کند و رویداد در منطقه زمانی دیگری برگزار می شود.
سازگاری مرورگر: اگرچه datetime-local بخشی از HTML5 است، اما نحوه نمایش و عملکرد آن ممکن است بین مرورگرها کمی متفاوت باشد. همیشه بهتر است در مرورگرهای مختلف تست شود.
عدم فرمت بندی ساده: فرمت YYYY-MM-DDTHH:MM:SS برای ماشین خوان بودن مناسب است، اما برای نمایش به کاربر ممکن است نیاز به تبدیل و فرمت دهی مجدد در سمت فرانت اند یا بک اند داشته باشد.

فرمت مقدار ورودی و پردازش در سمت سرور

مقدار ارسالی از input type="datetime-local" همیشه به صورت یک رشته با فرمت ISO 8601 است: YYYY-MM-DDTHH:MM:SS (یا با کسری از ثانیه).

مثال: 2024-07-20T14:30:00

چالش ها و ملاحظات در سمت سرور:

عدم وجود منطقه زمانی (Timezone):
- مشکل: وقتی کاربر تاریخ و زمان را انتخاب می کند، مشخص نیست که این زمان مربوط به کدام منطقه زمانی است. اگر رویداد شما وابسته به منطقه زمانی است (مثلاً یک جلسه زنده)، این موضوع می تواند مشکل ساز باشد.
- راه حل ها:
  - جمع آوری منطقه زمانی به صورت جداگانه: می توانید یک فیلد مخفی (<input type="hidden">) اضافه کنید که منطقه زمانی پیش فرض کاربر را ذخیره کند (مثلاً با استفاده از JavaScript) یا از کاربر بخواهید منطقه زمانی را انتخاب کند.
  - استفاده از datetime-local همراه با datetime (فقط در برخی مرورگرها): برخی مرورگرها از input type="datetime" پشتیبانی می کنند که شامل اطلاعات منطقه زمانی است، اما این نوع هنوز به طور گسترده پشتیبانی نمی شود.
  - مدیریت در سمت سرور: منطق برنامه شما در سمت سرور باید بتواند با این داده های بدون منطقه زمانی کنار بیاید. اگر نیاز به ذخیره زمان در یک منطقه زمانی خاص (مانند UTC) دارید، باید تبدیل لازم را انجام دهید.

تبدیل به فرمت های دیگر:

بسیاری از زبان های برنامه نویسی سمت سرور (مانند PHP, Python, Node.js) توابع داخلی برای تبدیل رشته تاریخ و زمان به اشیاء تاریخ و زمان دارند که پردازش و ذخیره سازی آن ها را آسان تر می کند.

مثال در PHP:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $meetingTime = $_POST['meeting-time']; // مثلاً "2024-07-20T14:30:00"

    // تبدیل به شیء DateTime در PHP
    $dateTimeObject = new DateTime($meetingTime);

    // ذخیره در دیتابیس (مثلاً به صورت UTC)
    // فرض کنید می خواهیم آن را به UTC تبدیل کنیم
    $dateTimeObject->setTimezone(new DateTimeZone('UTC'));
    $utcTime = $dateTimeObject->format('Y-m-d H:i:s'); // فرمت برای ذخیره در دیتابیس

    echo "زمان انتخاب شده (محلی): " . htmlspecialchars($meetingTime) . "<br>";
    echo "زمان تبدیل شده به UTC: " . htmlspecialchars($utcTime);

    // اینجا می توانید $utcTime را در دیتابیس ذخیره کنید
}
?>

مثال در JavaScript (سمت کاربر برای تبدیل):

const datetimeInput = document.getElementById('meeting-time');
datetimeInput.addEventListener('change', (event) => {
    const localValue = event.target.value; // "2024-07-20T14:30:00"
    const dateObj = new Date(localValue); // ایجاد شیء Date از رشته ورودی

    // توجه: نحوه تفسیر تاریخ در new Date() بسته به مرورگر و تنظیمات سیستم عامل ممکن است متفاوت باشد.
    // برای اطمینان از منطقه زمانی صحیح، بهتر است از کتابخانه های مدیریت تاریخ مانند Moment.js یا date-fns استفاده کنید.

    // نمایش تاریخ و زمان با منطقه زمانی مرورگر
    console.log("Local Value:", localValue);
    console.log("Date Object:", dateObj);
    console.log("Formatted (Browser TZ):", dateObj.toLocaleString()); // نمایش با منطقه زمانی مرورگر
    console.log("Formatted (UTC):", dateObj.toISOString()); // نمایش با فرمت ISO که شامل منطقه زمانی Z (UTC) است
});

اعتبارسنجی (Validation):
- همیشه ورودی تاریخ و زمان را در سمت سرور اعتبارسنجی کنید تا مطمئن شوید که فرمت صحیح است و مقادیر معتبر هستند.
- اگر نیاز به تبدیل به منطقه زمانی خاصی دارید، ابتدا مطمئن شوید که ورودی از فرمت صحیح ISO 8601 پیروی می کند.

مدیریت صحیح تاریخ و زمان، به خصوص با در نظر گرفتن مناطق زمانی، یکی از چالش های رایج در توسعه وب است. input type="datetime-local" ابزاری مفید است، اما نیاز به دقت در پردازش و مدیریت منطقه زمانی دارد.

مزایا و معایب `input type="datetime-local"`

همانند هر ابزار دیگری، input type="datetime-local" نیز مزایا و معایبی دارد که باید قبل از استفاده در نظر گرفته شوند.

مزایا:

رابط کاربری گرافیکی: مرورگرها معمولاً یک انتخابگر تاریخ و زمان بصری ارائه می دهند که استفاده از آن را برای کاربران بسیار آسان تر از وارد کردن دستی تاریخ و زمان می کند. این به بهبود تجربه کاربری (UX) کمک می کند.
فرمت استاندارد: مقادیر ورودی همیشه در فرمت استاندارد ISO 8601 هستند (YYYY-MM-DDTHH:MM:SS) که پردازش آن را در اکثر زبان های برنامه نویسی سمت سرور آسان می کند.
کاهش خطا: به دلیل استفاده از انتخابگر بصری، احتمال خطاهای املایی یا فرمتی در ورود تاریخ و زمان توسط کاربر کاهش می یابد.
سادگی در پیاده سازی: برای کاربردهای ساده که منطقه زمانی اهمیت ندارد، پیاده سازی آن بسیار سریع و آسان است.
قابلیت تنظیم محدودیت ها: ویژگی های min, max, و step به شما امکان می دهند دامنه انتخاب کاربر را محدود کنید.

معایب:

عدم وجود اطلاعات منطقه زمانی: این بزرگترین نقطه ضعف datetime-local است. اگر نیاز به ثبت دقیق زمان وقوع یک رویداد در یک منطقه زمانی خاص دارید، این عنصر به تنهایی کافی نیست و باید اطلاعات منطقه زمانی را به روش دیگری جمع آوری یا مدیریت کنید.
ناسازگاری نمایش: ظاهر و عملکرد انتخابگر تاریخ و زمان می تواند بین مرورگرها و سیستم عامل های مختلف متفاوت باشد. این ممکن است نیاز به استایل دهی سفارشی یا استفاده از کتابخانه های جاوا اسکریپت برای اطمینان از یکپارچگی داشته باشد.
پیچیدگی در مدیریت تاریخ و زمان: کار با تاریخ و زمان، به خصوص در مورد مناطق زمانی، همیشه پیچیده است. datetime-local این پیچیدگی را به طور کامل حل نمی کند و نیاز به منطق اضافی در سمت سرور دارد.
عدم پشتیبانی کامل در مرورگرهای قدیمی: اگرچه HTML5 به طور گسترده پشتیبانی می شود، اما مرورگرهای بسیار قدیمی ممکن است این نوع ورودی را به درستی نمایش ندهند و به یک فیلد متنی ساده تبدیل کنند.

چه زمانی از datetime-local استفاده کنیم؟

وقتی نیاز به دریافت تاریخ و زمان یک رویداد دارید که منطقه زمانی آن برای شما مهم نیست یا در زمان پردازش به طور جداگانه تعیین می شود.
برای ثبت تاریخ تولد، تاریخ ثبت نام، یا تاریخ تکمیل یک کار.
زمانی که می خواهید یک رابط کاربری بصری برای انتخاب تاریخ و زمان به کاربر ارائه دهید.

چه زمانی از آن اجتناب کنیم؟

زمانی که منطقه زمانی رویداد یا ورودی کاربر بسیار حیاتی است و باید به طور دقیق ثبت شود (در این موارد، شاید بهتر باشد تاریخ و زمان را جداگانه دریافت کنید یا از راهکارهای پیچیده تر استفاده کنید).
زمانی که نیاز به سازگاری کامل با مرورگرهای بسیار قدیمی دارید.

در نهایت، input type="datetime-local" یک ابزار مفید است، اما باید با درک کامل از محدودیت های آن و نیازهای پروژه مورد استفاده قرار گیرد.

مثال های پیشرفته و نکات تکمیلی

در این بخش به چند مثال پیشرفته تر و نکات تکمیلی برای کار با input type="datetime-local" می پردازیم.

1. تنظیم حداقل و حداکثر تاریخ و زمان: این ویژگی برای اطمینان از اینکه کاربر تاریخ و زمان معتبری را وارد می کند، بسیار مفید است. فرض کنید می خواهیم کاربران فقط بتوانند برای قرار ملاقات در روز کاری (بین ۸ صبح تا ۵ بعد از ظهر) از دوشنبه تا جمعه ثبت نام کنند.

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>رزرو قرار ملاقات</title>
    <style><span class="language-css">
        body { font-family: sans-serif; }
        label { display: block; margin-bottom: 5px; }
        input[type="datetime-local"] { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
        button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background-color: #0056b3; }
    </style>
</head>
<body>
    <h1>رزرو قرار ملاقات</h1>
    <form action="/submit-appointment" method="post">
        <label for="appointment-time">انتخاب تاریخ و زمان:</label>
        <input type="datetime-local" id="appointment-time" name="appointment-time"
               min="2024-07-22T08:00:00" max="2024-07-26T17:00:00" step="900" required>
        <!--
            min: حداقل زمان قابل انتخاب (دوشنبه، ۸ صبح)
            max: حداکثر زمان قابل انتخاب (جمعه، ۵ بعد از ظهر)
            step="900": مضارب ۹۰۰ ثانیه (۱۵ دقیقه). کاربر فقط می تواند در فواصل ۱۵ دقیقه ای انتخاب کند.
        -->
        <br><br>
        <button type="submit">ثبت قرار</button>
    </form>

    <script><span class="language-javascript">
        // ممکن است نیاز باشد منطق پیچیده تری برای غیرفعال کردن آخر هفته ها اضافه شود،
        // زیرا datetime-local به تنهایی این قابلیت را ندارد.
        // این کار معمولاً با JavaScript انجام می شود.
        const appointmentInput = document.getElementById('appointment-time');

        appointmentInput.addEventListener('input', function(e) {
            const selectedValue = e.target.value; // "YYYY-MM-DDTHH:MM"
            if (!selectedValue) return;

            const date = new Date(selectedValue);
            const dayOfWeek = date.getDay(); // 0 برای یکشنبه، 1 برای دوشنبه، ..., 6 برای شنبه

            // اگر روز انتخاب شده شنبه (6) یا یکشنبه (0) باشد، مقدار را خالی کن
            if (dayOfWeek === 0 || dayOfWeek === 6) {
                alert("لطفاً فقط روزهای کاری (دوشنبه تا جمعه) را انتخاب کنید.");
                e.target.value = ''; // پاک کردن مقدار
            }
        });
    </script>
</body>
</html>

نکته: همانطور که در کد JavaScript نشان داده شده، برای غیرفعال کردن روزهای خاص (مانند آخر هفته ها)، نیاز به استفاده از JavaScript دارید، زیرا خود datetime-local این قابلیت را ندارد.

2. استفاده از value برای مقدار پیش فرض: اگر می خواهید یک تاریخ و زمان خاص را به عنوان مقدار پیش فرض تنظیم کنید:

<input type="datetime-local" value="2024-08-01T10:00:00">

مهم: فرمت value باید دقیقاً مطابق با استانداردی باشد که فیلد انتظار دارد.

3. استفاده از کتابخانه های JavaScript برای کنترل بهتر: برای مدیریت تاریخ و زمان با قابلیت های پیشرفته تر، مانند انتخاب منطقه زمانی، غیرفعال کردن روزهای خاص، یا نمایش یک رابط کاربری سفارشی، می توانید از کتابخانه های JavaScript مانند:

Moment.js (با افزونه های منطقه زمانی)
date-fns
flatpickr
Pikaday

این کتابخانه ها کنترل بسیار بیشتری بر روی انتخابگر تاریخ و زمان به شما می دهند و می توانند مشکلات مربوط به ناسازگاری مرورگر یا عدم پشتیبانی از منطقه زمانی را حل کنند. در این حالت، شما معمولاً از یک فیلد ورودی متنی (type="text") استفاده می کنید و کتابخانه جاوا اسکریپت مسئول نمایش و مدیریت انتخابگر و همچنین اطمینان از صحت فرمت ورودی است.

مثال ساده با flatpickr:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flatpickr Example</title>
    <!-- Include Flatpickr CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style><span class="language-css">
        body { font-family: sans-serif; padding: 20px; }
    </style>
</head>
<body>
    <h1>انتخاب تاریخ و زمان با Flatpickr</h1>
    <label for="flatpickr-datetime">انتخاب زمان:</label>
    <input type="text" id="flatpickr-datetime" placeholder="انتخاب تاریخ و زمان...">
    <p>مقدار انتخاب شده: <span id="selected-value"></span></p>

    <!-- Include Flatpickr JS -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script><span class="language-javascript">
        const fp = flatpickr("#flatpickr-datetime", {
            enableTime: true, // فعال کردن انتخاب زمان
            dateFormat: "Y-m-d H:i:S", // فرمت نمایش و ذخیره
            altInput: true, // نمایش یک ورودی جایگزین برای فرمت کاربرپسندتر
            altFormat: "F j, Y h:i K", // فرمت جایگزین
            locale: "fa" // اگر از زبان فارسی پشتیبانی کند (نیاز به تنظیمات اضافی دارد)
        });

        const selectedValueSpan = document.getElementById('selected-value');
        fp.config.onChange.push(function(selectedDates, dateStr, instance) {
            // dateStr فرمت 'dateFormat' را خواهد داشت
            selectedValueSpan.textContent = dateStr;
            console.log("Selected DateTime:", dateStr);
            // این مقدار را می توانید در یک hidden input ذخیره کنید تا با فرم ارسال شود.
        });
    </script>
</body>
</html>

این مثال نشان می دهد که چگونه کتابخانه های جاوا اسکریپت می توانند کنترل و انعطاف پذیری بیشتری را ارائه دهند.

راهنمای کامل input type=“datetime-local” در HTML: ورودی تاریخ و زمان بدون منطقه زمانی

ورودی تاریخ و زمان محلی در HTML با input type="datetime-local"

نحوه استفاده از input type="datetime-local"

فرمت مقدار ورودی و پردازش در سمت سرور

مزایا و معایب input type="datetime-local"

مثال های پیشرفته و نکات تکمیلی

جمع بندی: datetime-local، ابزاری قدرتمند با ملاحظات

ورودی تاریخ و زمان محلی در HTML با `input type="datetime-local"`

نحوه استفاده از `input type="datetime-local"`

مزایا و معایب `input type="datetime-local"`

جمع بندی: `datetime-local`، ابزاری قدرتمند با ملاحظات