Documentation
Basic
  • Table of contents
  • Installation
  • Accordion
  • Article
  • Avatar
  • Badge
  • Box
  • Breadcrumb
  • Breakpoints
  • Button
  • CSS variables
  • Card
  • Colors
  • Comments
  • Dropdown
  • Form
  • Grid layout
  • Helper
  • Image
  • Message
  • Modal
  • Navigation
  • Page
  • Photo collage
  • Progress bar
  • Statistics
  • Tab
  • Table
  • Tags
  • Toast notification
  • Typography
Extended
  • Combo box
  • Date picker
  • Date time picker
  • Drawer
  • Form range
  • Form switch
  • Indicator
  • Popover
  • Quick menu
  • Radio group
  • Tooltip
Blocks
  • Analytics
  • Auth
  • Banner
  • Block box
  • Block form
  • Block inline
  • Block list
  • Block stat
  • Block stat table
  • Block table
  • Enable
  • Header
  • Pagination
  • Repeater
  • Sidenav

Date time picker

It used native <input type="datetime-local"> element

<div class="form-field form-datepicker">
    <input type="datetime-local" name="datepicker" class="form-input" />
</div>
Time picker

It used native <input type="time"> element

<div class="form-field form-timepicker">
    <input type="time" class="form-input" min="09:00" max="17:00" step="900" />
</div>

© 2025 Roolith CSS: 100% free, MIT licensed, and made with ❤ by Hadi - because why should coders pay for love?.
Last updated at 11:07 p.m. Saturday, August 23, 2025 (MDT) Time in Calgary, AB



Default theme Dark theme