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

<div class="timepicker-container">
  <input 
    type="time" 
    id="timepicker" 
    class="timepicker-input"
  />
</div>

JavaScript

import TimepickerUI from 'timepicker-ui';

const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input, {
  enableSwitchIcon: false
});

picker.create();

Configuration Options

Combine inline mode with other options for complete customization:

12-hour Inline Picker

const picker = new TimepickerUI(input, {
  enableSwitchIcon: false,
  clockType: '12h',
  theme: 'basic'
});

picker.create();

24-hour Inline with Theme

const picker = new TimepickerUI(input, {
  enableSwitchIcon: false,
  clockType: '24h',
  theme: 'cyberpunk',
  animation: true
});

picker.create();

Inline with Time Restrictions

const picker = new TimepickerUI(input, {
  enableSwitchIcon: false,
  disabledTime: {
    hours: [0, 1, 2, 3, 4, 5, 22, 23],
    minutes: [15, 30, 45]
  }
});

picker.create();

Styling Inline Mode

Position and style the inline timepicker using CSS:

Center Alignment

.timepicker-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.timepicker-ui-wrapper {
  position: relative !important;
  transform: none !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Sidebar Integration

.sidebar .timepicker-ui-wrapper {
  position: relative !important;
  width: 100%;
  max-width: 280px;
  margin: 20px auto;
}

.sidebar .timepicker-ui-clock-face {
  width: 260px;
  height: 260px;
}

React Example

Using inline mode in React components:

import { useEffect, useRef } from 'react';
import TimepickerUI from 'timepicker-ui';

function InlineTimepicker() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (inputRef.current) {
      const picker = new TimepickerUI(inputRef.current, {
        enableSwitchIcon: false,
        clockType: '12h',
        theme: 'm3'
      });
      
      picker.create();

      return () => {
        picker.destroy();
      };
    }
  }, []);

  return (
    <div className="flex justify-center p-8">
      <input 
        ref={inputRef}
        type="time" 
        className="sr-only"
      />
    </div>
  );
}

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