Skip to content
timepicker-ui
React · Features

Mobile Mode

Open the picker in the keyboard view, where users type the time, with ui.initialView: "keyboard".

Keyboard View

Open in the keyboard view, where the time is typed into the hour and minute fields:

Keyboard View

Better for touch interactions

index.tsxtsx
import { Timepicker } from "timepicker-ui-react";


function App() {
  return (
    <Timepicker
      options={{
        ui: { initialView: "keyboard" }
      }}
    />
  );
}

With Switch Icon

Add the switch icon with ui.viewSwitch to toggle between the keyboard view and the clock face:

index.tsxtsx
<Timepicker
  options={{
    ui: {
      initialView: "keyboard",
      viewSwitch: true
    }
  }}
/>

Responsive Design

Open in the keyboard view on small screens:

index.tsxtsx
import { Timepicker } from "timepicker-ui-react";
import { useState, useEffect } from "react";


function ResponsiveTimepicker() {
  const [isMobile, setIsMobile] = useState(false);


  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth < 768);
    checkMobile();
    window.addEventListener("resize", checkMobile);
    return () => window.removeEventListener("resize", checkMobile);
  }, []);


  return (
    <Timepicker
      options={{
        ui: { initialView: isMobile ? "keyboard" : "clock" }
      }}
    />
  );
}