بازه زمانی و انواع آن

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

آن را امتحان کنید

ظاهر

کروم و اپرا

در Chrome/Opera، کنترل زمان ساده است، با اسلات هایی برای وارد کردن ساعت ها و دقیقه ها در قالب ۱۲ یا ۲۴ ساعته بسته به منطقه سیستم عامل، و فلش های بالا و پایین برای افزایش و کاهش مؤلفه انتخاب شده فعلی. در برخی از نسخه ها، یک دکمه "X" برای پاک کردن مقدار کنترل ارائه شده است.

12 ساعته

24 ساعته

فایرفاکس

کنترل زمان فایرفاکس بسیار شبیه کروم است، با این تفاوت که فلش های بالا و پایین را ندارد. همچنین از یک فرمت 12 یا 24 ساعته برای زمان های ورودی، بر اساس منطقه سیستم استفاده می کند. یک دکمه "X" برای پاک کردن مقدار کنترل ارائه شده است.

12 ساعته

24 ساعته

کنترل زمان Edge تا حدودی دقیق تر است و یک ساعت و دقیقه انتخابگر را با قرقره های کشویی باز می کند. مانند کروم، از قالب 12 یا 24 ساعته برای زمان های ورودی استفاده می کند، بر اساس منطقه سیستم:

12 ساعته

24 ساعته

ارزش

رشته ای حاوی مقدار زمان وارد شده به ورودی.

تنظیم ویژگی ارزش

می توانید با قرار دادن زمان معتبر در ویژگی value هنگام ایجاد عنصر، یک مقدار پیش فرض برای ورودی تنظیم کنید، مانند:

تنظیم مقدار با استفاده از جاوا اسکریپت

همچنین می توانید با استفاده از ویژگی مقدار HTMLInputElement مقدار زمان را در جاوا اسکریپت دریافت و تنظیم کنید، به عنوان مثال:

قالب ارزش زمانی

مقدار ورودی زمان همیشه در قالب 24 ساعته است که شامل صفرهای ابتدایی است: hh:mm ، بدون توجه به قالب ورودی، که احتمالاً براساس منطقه کاربر (یا توسط عامل کاربر) انتخاب می شود. اگر زمان شامل ثانیه باشد (به استفاده از ویژگی step مراجعه کنید)، قالب همیشه hh:mm:ss است. می توانید درباره قالب مقدار زمان استفاده شده توسط این نوع ورودی در رشته های زمانی در قالب های تاریخ و زمان مورد استفاده در HTML اطلاعات بیشتری کسب کنید.

در این مثال، می توانید مقدار ورودی زمان را با وارد کردن زمان و مشاهده اینکه چگونه بعد از آن تغییر می کند، ببینید.

ابتدا نگاهی به HTML داشته باشید. این به اندازه کافی ساده است، با برچسب و ورودی همانطور که قبلاً دیده ایم، اما با اضافه کردن یک عنصر با a برای نمایش مقدار ورودی زمان:

کد جاوا اسکریپت کدی را به ورودی زمان برای تماشای رویداد ورودی اضافه می کند، که هر بار که محتوای یک عنصر ورودی تغییر می کند فعال می شود. وقتی این اتفاق می افتد، محتوای the با مقدار جدید عنصر ورودی جایگزین می شود.

هنگامی که یک فرم شامل ورودی زمان ارسال می شود ، مقدار قبل از درج در داده های فرم رمزگذاری می شود. ورودی داده فرم برای یک ورودی زمانی همیشه در نام فرم = HH ٪ 3AMM یا نام = HH ٪ 3AMM ٪ 3ASS در صورت گنجاندن قرار خواهد گرفت (با استفاده از ویژگی مرحله مراجعه کنید).

ویژگی های اضافی

توجه: برخلاف بسیاری از انواع داده ها ، مقادیر زمانی دارای یک دامنه دوره ای هستند ، به این معنی که مقادیر به بالاترین مقدار ممکن می رسند ، سپس دوباره به ابتدا می پردازند. به عنوان مثال ، مشخص کردن یک دقیقه 14:00 و حداکثر 2:00 به این معنی است که مقادیر زمان مجاز از ساعت 2 بعد از ظهر شروع می شود ، تا نیمه شب تا روز بعد اجرا می شود و ساعت 2 صبح پایان می یابد. اطلاعات بیشتری را در بخش Making Min و Max Cross نیمه شب این مقاله مشاهده کنید.

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

رشته ای که آخرین زمان برای پذیرش را نشان می دهد ، که در قالب مقدار هم زمان مشخص شده است همانطور که در بالا توضیح داده شد. اگر رشته مشخص شده زمان معتبری نباشد ، هیچ مقدار حداکثر تنظیم نمی شود.

رشته ای که اولین زمان برای پذیرش را مشخص می کند ، در قالب مقدار زمان که قبلاً توضیح داده شده است. اگر مقدار مشخص شده یک رشته زمانی معتبر نباشد ، حداقل مقدار تعیین نشده است.

فقط خواندنی

یک ویژگی بولی که در صورت وجود ، به این معنی است که این قسمت توسط کاربر قابل ویرایش نیست. با این حال ، مقدار آن هنوز هم می تواند توسط کد JavaScript به طور مستقیم تنظیم خاصیت ارزش HTMlinPutelement تغییر یابد.

توجه: از آنجا که یک قسمت فقط خواندنی نمی تواند یک مقدار داشته باشد ، مورد نیاز هیچ تاثیری در ورودی با ویژگی Readonly نیز مشخص نمی کند.

ویژگی مرحله عددی است که دانه ای را که مقدار باید به آن رعایت کند ، یا مقدار ویژه ای که در زیر شرح داده شده است ، مشخص می کند. فقط مقادیر برابر با پایه برای پله (حداقل در صورت مشخص شدن ، ارزش در غیر این صورت و مقدار پیش فرض مناسب در صورت عدم ارائه هیچ یک از این موارد).

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

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

برای ورودی های زمان ، مقدار مرحله در ثانیه ها با ضریب مقیاس 1000 (از آنجا که مقدار عددی اساسی در میلی ثانیه است) داده می شود. مقدار پیش فرض مرحله 60 است که نشانگر 60 ثانیه (یا 1 دقیقه یا 60،000 میلی ثانیه) است.

در این زمان ، مشخص نیست که در صورت استفاده از ورودی های زمان ، چه مقدار از هر وسیله ای برای مرحله استفاده می کند. این به محض تعیین این اطلاعات به روز می شود.

با استفاده از ورودی های زمانی

کاربردهای اساسی زمان

کنترل اندازه ورودی

از ویژگی های اندازه شکل مانند اندازه پشتیبانی نمی کند ، زیرا زمان همیشه تقریباً به همان تعداد شخصیت ها طولانی است. برای نیازهای اندازه باید به CSS متوسل شوید.

با استفاده از ویژگی مرحله

شما می توانید از ویژگی Step استفاده کنید تا هر زمان که زمان افزایش یا کاهش یابد ، مقدار زمان پرش را تغییر دهید (برای مثال ، بنابراین زمان با کلیک بر روی ابزارک های فلش کوچک ، 10 دقیقه حرکت می کند).

توجه: این خاصیت اثرات عجیبی در مرورگرها دارد ، بنابراین کاملاً قابل اعتماد نیست.

این یک مقدار عدد صحیح طول می کشد که برابر با تعداد ثانیه هایی است که می خواهید با آن افزایش دهید. مقدار پیش فرض 60 ثانیه یا یک دقیقه است. اگر مقدار کمتر از 60 ثانیه (1 دقیقه) را مشخص کنید ، ورودی زمان یک منطقه ورودی ثانیه را در کنار ساعت ها و دقیقه ها نشان می دهد:

در Chrome و Opera ، که تنها مرورگرهایی هستند که فلش های تکرار بالا را نشان می دهند ، با کلیک بر روی فلش ها ، مقدار ثانیه را دو ثانیه تغییر می دهد ، اما بر ساعت ها یا دقیقه تأثیر نمی گذارد. دقیقه (یا ساعت) فقط می تواند برای قدم زدن در هنگام تعیین چند دقیقه (یا ساعت) در ثانیه ، مانند 120 به مدت 2 دقیقه یا 7200 به مدت 2 ساعت استفاده شود).

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

به نظر می رسد مقدار مراحل هیچ تاثیری در لبه ندارد.

توجه: به نظر می رسد استفاده از مرحله باعث می شود اعتبار سنجی به درستی کار نکند (همانطور که در بخش بعدی مشاهده می شود).

اعتبار سنجی

به طور پیش فرض ، هیچ اعتبار سنجی برای مقادیر وارد شده اعمال نمی شود ، غیر از رابط کاربری کاربر به طور کلی به شما امکان نمی دهد چیزی غیر از مقدار زمانی وارد کنید. این مفید است (با فرض اینکه ورودی زمان کاملاً توسط نماینده کاربر پشتیبانی می شود) ، اما شما نمی توانید کاملاً به این مقدار اعتماد کنید تا یک رشته زمان مناسب باشد ، زیرا ممکن است یک رشته خالی ("") باشد که مجاز است. همچنین ممکن است مقدار تقریباً مانند یک زمان معتبر به نظر برسد اما صحیح نباشد ، مانند 25:05.

تعیین حداکثر و حداقل زمان

می توانید از ویژگی های Min و Max برای محدود کردن زمان های معتبر که توسط کاربر انتخاب می شود استفاده کنید. در مثال زیر حداقل زمان 12:00 و حداکثر زمان 18:00 را تعیین می کنیم:

در اینجا CSS مورد استفاده در مثال بالا است. در اینجا ما از ویژگی های: معتبر و: نامعتبر CSS استفاده می کنیم تا ورودی را بر اساس معتبر بودن مقدار فعلی سبک کنند. ما مجبور شدیم آیکون ها را در کنار ورودی قرار دهیم ، نه بر روی خود ورودی ، زیرا در کروم محتوای تولید شده در داخل کنترل فرم قرار می گیرد و نمی توان آن را به طور مؤثر نشان داد یا به طور مؤثر نشان داد.

نتیجه در اینجا این است که:

• فقط زمان بین ساعت 12 و 18:00 معتبر تلقی می شود. زمان های خارج از آن محدوده به عنوان نامعتبر مشخص می شود.
• بسته به اینکه از چه مرورگر استفاده می کنید ، ممکن است متوجه شوید که زمان های خارج از محدوده مشخص شده حتی ممکن است در انتخاب کننده زمان (به عنوان مثال Edge) قابل انتخاب نباشد.

ساخت حداقل و حداکثر صلیب نیمه شب

با تنظیم یک ویژگی min بزرگتر از ویژگی حداکثر ، محدوده زمانی معتبر حدود نیمه شب می پیچد تا یک محدوده زمانی معتبر تولید کند که از نیمه شب عبور می کند. این قابلیت توسط هیچ نوع ورودی دیگری پشتیبانی نمی شود. در حالی که این ویژگی در مشخصات HTML قرار دارد ، اما هنوز پشتیبانی نشده است. مرورگرهای مبتنی بر Chrome از آن در نسخه 82 پشتیبانی می کنند و Firefox آن را در نسخه 76 اضافه کرد. Safari از نسخه 14. 1 از این پشتیبانی نمی کند. آماده باشید تا این وضعیت بوجود بیاید:

زمان لازم

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

بیایید به یک مثال نگاه کنیم ؛در اینجا ما حداقل و حداکثر زمان را تعیین کرده ایم ، و همچنین زمینه مورد نیاز را تهیه کرده ایم:

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

هشدار: اعتبار سنجی فرم HTML جایگزینی برای اسکریپت ها نیست که اطمینان حاصل کند که داده های وارد شده در قالب مناسب قرار دارند. برای کسی بسیار آسان است که بتواند در HTML تنظیماتی انجام دهد که به آنها امکان می دهد اعتبارسنجی را دور بزنند ، یا آن را به طور کامل حذف کنند. همچنین برای کسی امکان پذیر است که HTML شما را به طور کامل دور کند و داده ها را مستقیماً به سرور خود ارسال کند. اگر کد سمت سرور شما نتواند داده های دریافتی را تأیید کند ، فاجعه می تواند هنگام ارسال داده های نادرست با فرم (یا داده هایی که خیلی بزرگ است ، از نوع اشتباه و غیره) اعتصاب کنند.

پشتیبانی از مرورگر

همانطور که گفته شد، نسخه های قدیمی تر Safari و چند مرورگر دیگر که کمتر رایج هستند، ورودی های زمان را به صورت بومی پشتیبانی نمی کنند. به طور کلی، در غیر این صورت، پشتیبانی خوب است - به ویژه در سیستم عامل های تلفن همراه، که معمولا رابط کاربری بسیار خوبی برای تعیین مقدار زمانی دارند. برای مثال، انتخابگر زمان در کروم برای اندروید به این صورت است:

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

مشکل دوم جدی تر است. همانطور که قبلا ذکر شد، مقادیر ورودی های زمان همیشه به فرمت hh:mm یا hh:mm:ss نرمال می شوند. از سوی دیگر، با ورودی متن، مرورگر به طور پیش فرض هیچ ایده ای درباره فرمت زمان باید نداشته باشد، و راه های متعددی وجود دارد که افراد در آن زمان ها را می نویسند، مانند:

• ساعت 3. 00 بعد از ظهر
• 15:00
• ساعت 15:00
• ساعت 3 بعد از ظهر
• و غیره.

یک راه حل این است که یک ویژگی الگو را در ورودی زمان خود قرار دهید. حتی اگر ورودی زمان از آن استفاده نمی کند، ورودی متن بازگشتی از آن استفاده می کند. برای مثال، سعی کنید نسخه آزمایشی زیر را در مرورگری مشاهده کنید که از ورودی های زمان پشتیبانی نمی کند:

اگر سعی کنید آن را ارسال کنید، خواهید دید که مرورگرهای غیر پشتیبانی اکنون یک پیام خطا نشان می دهند (و ورودی را به عنوان نامعتبر برجسته می کنند) اگر ورودی شما با الگوی nn:nn مطابقت نداشته باشد، جایی که n عددی از 0 تا 9 است. البته، این افراد را از وارد کردن زمان های نامعتبر یا زمان های فرمت بندی نادرست که از الگو پیروی می کنند جلوگیری نمی کند.

سپس مشکل این است که کاربر نمی داند دقیقاً انتظار می رود زمان در چه قالبی باشد.

بهترین راه برای مقابله با زمان ها در فرم ها به روش متقابل مرورگر، فعلاً این است که کاربر را وادار کنیم ساعت ها و دقیقه ها (و در صورت لزوم ثانیه ها) را در کنترل های جداگانه وارد کند (عناصر محبوب هستند؛ برای یکبه عنوان مثال)، یا از کتابخانه های جاوا اسکریپت مانند پلاگین jQuery timepicker استفاده کنید.

مثال ها

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

HTML به این شکل است:

مقادیر ساعت و دقیقه برای عناصر آنها به صورت پویا تولید می شود.

مشخصات فنی

سازگاری با مرورگر

جداول BCD فقط در مرورگر بارگیری می شوند

همچنین ببینید

• عنصر عمومی و رابط مورد استفاده برای دستکاری آن، HTMLInputElement،،، و

مشکلی با این صفحه پیدا کردید؟

آخرین ویرایش: 2 نوامبر 2022 توسط مشارکت کنندگان MDN

طرح شما برای اینترنت بهتر

حمایت کردن

جوامع ما

توسعه دهندگان

به بنیاد غیرانتفاعی Mozilla Corporation، بنیاد موزیلا، مراجعه کنید. بخش هایی از این محتوا ©1998 2022 توسط مشارکت کنندگان فردی mozilla.org است. محتوا تحت مجوز Creative Commons در دسترس است.