Patlang ng Oras
Kolektahin ang oras nang may katumpakan at kadalian. Mula sa pag-iiskedyul ng appointment hanggang sa pagpili ng shift gamit ang mga eleganteng native time picker, matalinong mga interval, at flexible na format – ang field na Oras ay nagbibigay ng pagpapatunay, pagpapasadya, at isang maayos na karanasan ng user.
Koleksyon ng Smart Time na may Built-In na Pagpapatunay
Perpekto para sa:
Mga Makapangyarihang Tampok para sa Bawat Gamit
🕐 Mga Flexible na Format ng Oras
24-Oras o 12-Oras na Pagpapakita
Piliin ang format na nababagay sa iyong madla. Gumamit ng 24-oras na oras ng militar (2:30 PM) para sa mga internasyonal na gumagamit o 12-oras na may AM/PM (14:30 PM) para sa pamilyaridad.
Pag-convert ng Awtomatikong Pag-format
Awtomatikong pinangangasiwaan ng field ang conversion ng format – nakikita ng mga user ang kanilang gustong format habang natatanggap ng iyong system ang pare-parehong data.
Halimbawa:
- Oras ng trabaho9:00 AM – 5:00 PM (12 oras)
- Internasyonal na pag-iiskedyul: 09:00 – 17:00 (24 oras)
- Mga medikal na appointment: 14:30 (24-oras na katumpakan)
⏰ Mga Smart Time Interval
Katumpakan ng Pagpili ng Kontrol
Itakda kung gaano dapat kadetalyadong pagpili ng oras. Pumili mula sa bawat minuto hanggang oras-oras na pagitan batay sa iyong mga pangangailangan.
Mga Magagamit na Interval:
- Bawat minuto (12:00, 12:01, 12:02…) – Pinakamataas na katumpakan
- Kada 5 minuto (12:00, 12:05, 12:10…) – Karaniwang mga appointment
- Kada 10 minuto (12:00, 12:10, 12:20…) – Mabilisang pag-book
- Kada 15 minuto (12:00, 12:15, 12:30…) – Pinakakaraniwan
- Kada 30 minuto (12:00, 12:30, 1:00…) – Mga kalahating oras na oras
- Bawat oras (12:00, 1:00, 2:00…) – Simpleng pagpili
Bakit Mahalaga ito:
Mas kaunting opsyon = mas mabilis na pagpili. Itugma ang mga interval sa iyong mga pangangailangan sa pag-iiskedyul para sa mas mahusay na UX.
🎯 Mga Restriksyon sa Saklaw ng Oras
Itakda ang Pinakamaaga at Pinakabagong Oras
Limitahan ang mga oras na magagamit upang tumugma sa mga oras ng negosyo, iskedyul ng kaganapan, o mga palugit ng operasyon. Hindi maaaring pumili ang mga user ng mga oras na lampas sa iyong tinukoy na saklaw.
Matalinong Pagpapatunay
Pinipigilan ng pagpapatunay sa antas ng browser ang mga hindi wastong pagsusumite bago pa man i-click ng mga user ang pagsumite.
Gumamit ng Mga Kaso:
- Mga oras ng negosyo: 9:00 AM – 6:00 PM lamang
- Mga kaganapan sa gabi: Pagkatapos ng 5:00 PM lamang
- Mga slot sa umaga: Bago mag-12:00 PM lamang
- Shift sa gabi: 10:00 PM – 6:00 AM
Halimbawa:
- Mga reserbasyon sa restawran: Min 11:00 AM, Max 10:00 PM
- Mga klase sa gym: Min 6:00 AM, Max 9:00 PM
- Mga oras ng suporta: Min 8:00 AM, Max 5:00 PM
🔧 Mga Default na Opsyon sa Oras
Tatlong Matalinong Halaga ng Pagsisimula:
1. Blangko (Walang Default)
Nagsisimula ang mga user sa isang blangkong field – pinakamahusay kapag ang oras ay palaging natatangi.
2. Kasalukuyang Oras
Awtomatikong pinupunan ang kasalukuyang oras ng paglo-load ng form – perpekto para sa mga field na may "oras ng insidente" o timestamp.
3. Pasadyang Oras
Pumili muna ng partikular na oras tulad ng “9:00 AM” para sa mga iminungkahing oras ng appointment o mga karaniwang pagpipilian.
Kailan Gagamitin ang Bawat:
- Blangko – Mga oras ng pagsisimula ng kaganapan, mga personal na iskedyul
- Kasalukuyan – Mga timestamp ng ulat, mga oras ng pag-check-in
- Pasadya – Mga iminungkahing oras ng pagpupulong, mga default na oras
⚡ Katumpakan ng Segundo (Opsyonal)
Magdagdag ng mga Segundo Kung Kinakailangan
Paganahin ang field na segundo (HH:MM:SS) para sa tumpak na pagsubaybay sa oras. Perpekto para sa mga time trial, stopwatch, at eksaktong mga timestamp.
Mga Halimbawa ng Pormat:
- Walang segundo: 2:30 PM o 14:30 PM
- May mga segundo: 2:30:45 o 14:30:45 PM
Mainam para sa:
- Pag-time ng isport at mga resulta ng karera
- Mga eksperimentong pang-agham
- Mga tumpak na sistema ng pag-log
- Mga pagsusumite ng time trial
🔀 Lohikang Kondisyonal
Mga Dinamikong Patlang ng Oras
Ipakita o itago ang field ng oras batay sa iba pang mga halaga ng form. Gumawa ng mga matatalinong form na umaangkop sa input ng user.
Mga Panuntunan sa Advanced na Lohika:
- AT Lohika – Dapat matugunan ang lahat ng kundisyon
- Lohika ng O – Anumang kundisyon ay maaaring mag-trigger ng aksyon
- 8 Operator – Katumbas, Hindi katumbas, Mas malaki kaysa sa, Mas mababa sa, Naglalaman, Walang laman, at higit pa
Gumamit ng Mga Kaso:
- Ipakita lamang ang “Preferred call time” kapag napili ang “Contact by phone”
- Ipakita ang "Oras ng pagsisimula ng kaganapan" kapag ang uri ng kaganapan ay katumbas ng "Pasadyang Kaganapan"
- Itago ang “Oras ng paghahatid” kapag ang paraan ng paghahatid ay “Karaniwang Pagpapadala”
- Ipakita ang "Oras ng pagpupulong" kapag ang uri ng pagpupulong ay katumbas ng "Person"
🎨 Pinahusay na Karanasan ng Gumagamit
Pag-activate ng Click-Anywhere
Mag-click kahit saan sa field para buksan ang native time picker – mas malaking target area, mas mahusay na usability.
Mga Native Time Picker
Gumagamit ng built-in na time selector ng browser na may pamilyar at platform-optimized na mga interface (iOS wheel, Android clock, desktop dropdown).
Na-optimize ang Mobile
Pagpili ng oras na madaling gamitin gamit ang mga native na mobile keyboard at picker.
Karagdagang Mga Tampok:
- Mga pasadyang klase ng CSS para sa pag-istilo
- Nakatagong field mode para sa mga oras ng system
- Suporta sa accessibility (mga label ng ARIA)
- Butones na I-clear para sa madaling pag-reset
- Kinakailangang pagpapatunay ng field
- Suporta sa teksto ng placeholder
Simpleng Pag-setup sa 3 Hakbang
Ihanda ang iyong Time Field sa loob ng ilang minuto
Idagdag ang Patlang ng Oras
I-drag at i-drop ang field na Time mula sa seksyong Basic Fields papunta sa iyong form.
I-configure ang Format at Mga Interval
Pumili ng 12-oras o 24-oras na format, magtakda ng mga agwat ng oras (kada 15 minuto, 30 minuto, atbp.), at opsyonal na magdagdag ng mga paghihigpit sa minimum/maximum na oras.
Itakda ang Default na Oras
Piliin kung ang field ay magsisimulang blangko, may kasalukuyang oras, o isang pasadyang oras na iyong tinukoy. Paganahin ang mga segundo kung kailangan mo ng tumpak na tiyempo.
🎉 Iyon lang! Handa na ang iyong time field gamit ang smart formatting at validation.
Mga Real-World Application
Serbisyo at Reserbasyon
* Mga oras ng serbisyo ng sasakyan
* Mga iskedyul ng pagtingin sa ari-arian
* Mga oras ng pag-book ng tour
* Mga puwang para sa reserbasyon ng pasilidad
Pag-book ng Klase at Aktibidad
* Mga oras ng klase sa fitness
* Pag-iiskedyul ng mga sesyon ng pagsasanay
* Mga oras ng aktibidad ng grupo
* Mga kagustuhan sa oras ng aralin
Mga Operasyong Negosyo
* Mga oras ng pagsisimula/pagtatapos ng shift
* Mga pagsusumite ng iskedyul ng trabaho
* Koordinasyon ng oras ng pagpupulong
* Pagpili ng oras ng pagkakaroon
Booking ng Appointment
* Pag-iiskedyul ng appointment sa medikal
* Mga booking sa salon at spa
* Pagpili ng oras ng konsultasyon
* Mga kahilingan sa appointment ng serbisyo
Pagpaparehistro ng Kaganapan
* Mga oras ng pagsisimula/pagtatapos ng kaganapan
* Mga kagustuhan sa oras ng sesyon
* Mga oras ng workshop
* Pagpili ng iskedyul ng kumperensya
Paghahatid at Pagkuha
* Mga palugit para sa oras ng paghahatid ng pagkain
* Mga oras ng pagkuha sa tindahan
* Iskedyul ng pagkuha sa tabi ng kalsada
* Mga kagustuhan sa slot ng paghahatid
Kumpletong Mga Opsyon sa Patlang
Pangunahing Configuration
- Label ng Patlang – Ang pamagat na ipinapakita sa itaas ng patlang ng oras
- Teksto ng Paglalarawan/Tulong – Karagdagang gabay para sa mga gumagamit
- Kinakailangang Patlang – Gawing mandatory ang pagpili ng oras
- Teksto ng Placeholder – Teksto ng pahiwatig bago pumili ng oras ang mga user
Mga Setting ng Format ng Oras
- Format ng Display
- 24-oras na orasan (14:30)
- 12-oras na orasan na may AM/PM (2:30 PM)
Katumpakan at Mga Interval
- Mga Pagitan ng Oras
- Bawat minuto
- Bawat 5 minuto
- Bawat 10 minuto
- Kada 15 minuto (pinakasikat)
- Bawat 30 minuto
- Bawat oras
Ipakita ang mga Segundo – Magdagdag ng field ng mga segundo para sa eksaktong oras (HH:MM:SS)
Mga Paghihigpit sa Oras
- Pinakamaagang Oras na Pinapayagan (Minimum) – Hindi maaaring pumili ang mga user ng mga oras bago ito
- Pinakabagong Oras na Pinapayagan (Max) – Hindi na maaaring pumili ang mga user ng mga oras pagkatapos nito
Mga Default na Halaga
- Pagpili ng Oras ng Pagsisimula
- Walang paunang napiling oras (blangko)
- Kasalukuyang oras (dynamic – naglo-load kapag bumukas ang form)
- Pasadyang oras (tiyak na oras na iyong itinakda)
Pasadyang Oras ng Pagsisimula – Piliin ang partikular na oras para mag-pre-fill (kapag napili ang "Pasadyang")
Makatarungang Lohika
- Paganahin ang Conditional Logic – Ipakita/itago batay sa mga kundisyon
- Uri ng lohika
- Dapat matugunan ang lahat ng mga kundisyon (AT)
- Maaaring matugunan ang anumang kundisyon (O)
- Mga Panuntunan sa Kondisyon
- Ipakita/Itago – Aksyon na gagawin
- Patlang – Aling patlang ang susuriin
- Operator – Katumbas ng, Hindi katumbas ng, Naglalaman ng, Mas malaki kaysa sa, Mas mababa sa, Walang laman, Hindi walang laman
- Halaga – Halaga ng paghahambing
- Maramihang Kundisyon – Magdagdag ng walang limitasyong mga panuntunan
Mga Advanced na Pagpipilian
- Nakatagong Patlang na Mode – Gamitin bilang nakatagong patlang na may paunang itinakdang halaga
- Mga Pasadyang Klase ng CSS – Maglapat ng pasadyang estilo
- Mga Katangian ng Accessibility – mga label at paglalarawan ng ARIA
Bakit Piliin ang Aming Larangan ng Oras?
✅ Madaling maunawaan – Nagbibigay ang mga native browser picker ng mga pamilyar na karanasan
✅ Flexible – ang 12-oras o 24-oras na mga format ay tumutugma sa mga kagustuhan ng gumagamit
✅ Tumpak – Mga pasadyang pagitan mula bawat minuto hanggang bawat oras
✅ Smart – Pinipigilan ng mga limitasyong Min/Max ang mga hindi wastong pagpili ng oras
✅ Dinamiko – Ang lohikang kondisyonal ay lumilikha ng mga adaptibong anyo
✅ Madaling Gamitin – Pag-activate kahit saan para sa mas mahusay na UX
✅ Na-optimize para sa Mobile – Mga tagapili ng oras na madaling gamitin sa pag-ugnay
✅ Ganap na Pinagsama – Gumagana nang maayos sa lahat ng mga tampok ng form
Mga Madalas Itanong
T: Ano ang pagkakaiba ng 12-oras at 24-oras na format?
Ang 12-oras na format ay nagpapakita ng mga oras na may AM/PM, tulad ng 2:30 PM. Ang 24-oras na format ay gumagamit ng mga oras tulad ng 14:30 PM at karaniwan sa buong mundo.
T: Paano gumagana ang mga agwat ng oras?
Itinatakda ng mga interval kung gaano kadetalyado ang mga pagpipilian sa oras. Halimbawa, ang 15 minutong interval ay nagpapakita ng 9:00, 9:15, 9:30, at iba pa.
T: Maaari ko bang limitahan ang mga oras sa mga oras ng negosyo lamang?
Oo. Itakda ang pinakamaaga at pinakahuling oras, tulad ng 9:00 AM hanggang 5:00 PM, at ang mga user ay maaari lamang pumili sa loob ng saklaw na iyon.
T: Ano ang ibig sabihin ng default na "Kasalukuyang Oras"?
Kapag naka-enable, awtomatikong pupunan ang field gamit ang kasalukuyang oras ng user kapag naglo-load ang form.
T: Kailangan ko ba ang field na segundo?
Kadalasan hindi. Paganahin lamang ito kapag kailangan mo ng eksaktong timing, tulad ng mga entry na HH:MM:SS para sa mga kaganapan o teknikal na datos.
T: Paano gumagana ang time picker sa mobile?
Gumagamit ang bawat device ng sarili nitong katutubong UI. Karaniwang gumagamit ang iOS ng wheel selector, habang ang Android naman ay gumagamit ng clock-style picker.
T: Maaari ko bang gamitin ang conditional logic sa mga time field?
Oo. Maaari mong ipakita o itago ang mga field batay sa mga napiling oras gamit ang mga kundisyon tulad ng "Katumbas," "Mas malaki kaysa sa," o "Mas mababa kaysa sa."
T: Ano ang mangyayari kung susubukan ng mga user na pumili ng mga hindi wastong oras?
Ang mga oras na labas sa pinapayagang saklaw ay hinaharangan ng pagpapatunay ng browser at hindi maaaring piliin.
T: Maaari ba akong mag-pre-fill nang may partikular na oras?
Oo. Piliin ang “Custom” para sa default na oras at piliin ang anumang value na gusto mong i-preload.
T: Gumagana ba ang time field sa lahat ng browser?
Sinusuportahan ng lahat ng modernong browser ang mga HTML5 time input na may built-in na mga picker. Ang mga mas lumang browser ay babalik sa text input na may validation.
T: Maaari ko bang i-estilo ang field ng oras upang tumugma sa aking site?
Oo. Gumagamit ang picker ng native UI, ngunit maaaring i-style ang input field gamit ang mga CSS class.
T: Anong format ang ginagamit ng isinumiteng oras?
Ang mga halaga ng oras ay palaging isinusumite sa 24-oras na format, na tinitiyak ang pare-parehong data para sa pagproseso.
