Feature

Inline Mode

Display the timepicker directly on your page without a modal

What is Inline Mode?

Inline mode displays the timepicker clock directly in your page layout, always visible without requiring a click to open. Perfect for dashboards, settings pages, or when you want the time selection to be immediately accessible.

No modal or backdrop - stays in document flow
Always visible - no click needed to open
Works with all themes and customization options
Perfect for embedded forms and settings panels

Basic Usage

Enable inline mode by setting enableSwitchIcon: false:

HTML Structure

index.htmlhtml

1<div class="timepicker-container">
2  <input 
3    type="time" 
4    id="timepicker" 
5    class="timepicker-input"
6  />
7</div>

JavaScript

index.tstypescript

1import TimepickerUI from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input, {
5  ui: { enableSwitchIcon: false }
6});
7
8picker.create();

Configuration Options

Combine inline mode with other options for complete customization:

12-hour Inline Picker

index.tstypescript

1const picker = new TimepickerUI(input, {
2  ui: { enableSwitchIcon: false, theme: 'basic' },
3  clock: { type: '12h' }
4});
5
6picker.create();

24-hour Inline with Theme

index.tstypescript

1const picker = new TimepickerUI(input, {
2  ui: {
3    enableSwitchIcon: false,
4    theme: 'cyberpunk',
5    animation: true
6  },
7  clock: { type: '24h' }
8});
9
10picker.create();

Inline with Time Restrictions

index.tstypescript

1const picker = new TimepickerUI(input, {
2  ui: { enableSwitchIcon: false },
3  clock: {
4    disabledTime: {
5      hours: [0, 1, 2, 3, 4, 5, 22, 23],
6      minutes: [15, 30, 45]
7    }
8  }
9});
10
11picker.create();

Styling Inline Mode

Position and style the inline timepicker using CSS:

Center Alignment

index.csscss

1.timepicker-container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  min-height: 400px;
6}
7
8.timepicker-ui-wrapper {
9  position: relative !important;
10  transform: none !important;
11  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
12}

Sidebar Integration

index.csscss

1.sidebar .timepicker-ui-wrapper {
2  position: relative !important;
3  width: 100%;
4  max-width: 280px;
5  margin: 20px auto;
6}
7
8.sidebar .timepicker-ui-clock-face {
9  width: 260px;
10  height: 260px;
11}

React Example

Using inline mode in React components:

index.tstypescript

1import { useEffect, useRef } from 'react';
2import TimepickerUI from 'timepicker-ui';
3
4function InlineTimepicker() {
5  const inputRef = useRef<HTMLInputElement>(null);
6
7  useEffect(() => {
8    if (inputRef.current) {
9      const picker = new TimepickerUI(inputRef.current, {
10        ui: {
11          enableSwitchIcon: false,
12          theme: 'm3-green'
13        },
14        clock: { type: '12h' }
15      });
16      
17      picker.create();
18
19      return () => {
20        picker.destroy();
21      };
22    }
23  }, []);
24
25  return (
26    <div className="flex justify-center p-8">
27      <input 
28        ref={inputRef}
29        type="time" 
30        className="sr-only"
31      />
32    </div>
33  );
34}

Best Practices

When using inline mode, make sure to provide enough space in your layout for the clock face (minimum 280x280px recommended). Consider using CSS media queries to adjust the size on smaller screens.

Mobile optimization tips