نمایش ساعت و دقیقه در تگ input در Html

پاسخ هوش مصنوعی

برای ایجاد یک تگ input که بتوانید ساعت و دقیقه را وارد کنید، می توانید از دو تگ input جداگانه برای ساعت و دقیقه استفاده کنید یا از یک input به صورت رشته ای استفاده کنید. در زیر نمونه ای از هر دو روش آورده شده است.

روش اول: استفاده از دو تگ input جداگانه برای ساعت و دقیقه:

<label for="hour">ساعت:</label>
<input type="number" id="hour" name="hour" min="0" max="23" placeholder="ساعت" />

<label for="minute">دقیقه:</label>
<input type="number" id="minute" name="minute" min="0" max="59" placeholder="دقیقه" />

روش دوم: استفاده از یک input به صورت رشته ای:

<label for="time">زمان (ساعت:دقیقه):</label>
<input type="text" id="time" name="time" placeholder="hh:mm" />

اگر شما type رو برابر با time قرار بدید می تونید از ساعت و دقیقه استفاده کنید. به صورت زیر

<input type='time' id='txtselecttime' />

خروجی کار به صورت زیر می باشد :

همچنین شما می تونید با قرار دادن خاصیت step=3600 فقط ساعت رو فعال داشته باشید

<input type='time' id='txtselecttime' step="3600" />

دقت کنید در این روش شما نمی تونید ساعت رو برابر با 0 قرار بدید. با توجه به اینکه فرمودید برای ثبت اضافه کاری در یک سیستم نیازمند این کار هستید اگر مثلا اضافه کاری 30 دقیقه بود نمی تونید ثبت کنید. برای رفع این مشکل بهتره کلا دو تا تگ input جداگانه یکی برای ساعت و یکی برای دقیقه قرار بدید.

موفق باشید