website/sdds-cs-docs/docs/components/TimePicker.mdx - dev - sdds/plasma

website/sdds-cs-docs/docs/components/TimePicker.mdx
99 строк3 KB
TitanKuzmich
docs: add TimePicker docs
17 фев 2026, 15:39
17 фев 2026, 15:394a37adf
---
id: time-picker
title: TimePicker
---

import { PropsTable, Description } from '@site/src/components';

# TimePicker
<Description name="TimePicker" />

### Быстрый старт

```tsx live
import React from 'react';
import { TimePicker } from '@salutejs/plasma-b2c';

export function App() {
    const handleTimeChange = (event) => {
        console.log('Выбрано время:', event.target.value);
    };

    return (
        <div style={{height: '500px'}}>
            <TimePicker
                view="default"
                size="s"
                placeholder="00:00:00"
                onChange={handleTimeChange}
            />
        </div>
    );
}
```

### Управление внешним видом и размером компонента

С помощью свойств:
- `view` - задается внешний вид

```tsx live
import React from 'react';
import { TimePicker } from '@salutejs/plasma-b2c';

export function App() {
    return (
        <div style={{ display: "flex", flexDirection: "column", gap: "32px"}}>
            <TimePicker view="default" size="s" placeholder="Размер s" />
        </div>
    );
}
```

### Управление форматом времени (с секундами или без)

С помощью свойства `columnsQuantity` можно выбрать количество колонок: 2 (часы и минуты) или 3 (часы, минуты, секунды).

```tsx live
import React from 'react';
import { TimePicker } from '@salutejs/plasma-b2c';

export function App() {
    return (
        <div style={{ display: "flex", flexDirection: "column", gap: "32px", height: '500px'}}>
            <TimePicker size="s" columnsQuantity={2} placeholder="ЧЧ:мм" />
            <TimePicker size="s" columnsQuantity={3} placeholder="ЧЧ:мм:сс" />
        </div>
    );
}
```

### Расположение выпадающего списка

Свойство `dropdownAlign` позволяет выравнивать выпадающий список относительно поля ввода.

```tsx live
import React from 'react';
import { TimePicker } from '@salutejs/plasma-b2c';

export function App() {
    return (
        <div style={{ display: "flex", flexDirection: "column", gap: "32px", width: "300px", height: '500px'}}>
            <TimePicker size="s" dropdownAlign="left" placeholder="Выравнивание слева" />
            <TimePicker size="s" dropdownAlign="right" placeholder="Выравнивание справа" />
        </div>
    );
}
```

### Управление клавиатурной навигацией

Компонент поддерживает полную клавиатурную навигацию:
- `Enter` - открыть/закрыть выбор времени
- `Arrow Up/Down` - навигация по значениям
- `Arrow Left/Right` - переход между колонками
- `Tab` - переход к следующему значению

## Props

<PropsTable name="TimePicker" />