Smart Time Input Component

Auto-formatting time inputs that add colons and periods as you type

✨ Auto-formatting features:

  • • Automatically adds colons (:) and periods (.) as you type
  • • Just type digits - formatting happens automatically
  • • Auto-fills with zeros when you leave incomplete input
  • • Real-time validation with visual feedback
  • • Converts to total seconds for backend compatibility
ss.ss
✅

Seconds with decimals (e.g., 100m sprint)

Value in seconds: null

Try typing:

Type: 958 → 9.58
Type: 6 (then blur) → 6.00
mm:ss.ss
✅

Minutes:Seconds.Decimals (e.g., mile run)

Value in seconds: null

Try typing:

Type: 35940 → 3:59.40
Type: 6 (then blur) → 06:00.00
mm:ss
✅

Minutes:Seconds (e.g., 5K run)

Value in seconds: null

Try typing:

Type: 1532 → 15:32
Type: 6 (then blur) → 06:00
hh:mm:ss
✅

Hours:Minutes:Seconds (e.g., marathon)

Value in seconds: null

Try typing:

Type: 21530 → 2:15:30
Type: 6 (then blur) → 06:00:00
ss
✅

Whole seconds (e.g., plank hold)

Value in seconds: null

Try typing:

Type: 45 → 45
Type: 6 (then blur) → 6
Current Values Summary
ss.ss:null seconds
mm:ss.ss:null seconds
mm:ss:null seconds
hh:mm:ss:null seconds
ss:null seconds