React · Features

Custom Labels

Name: timepicker-ui
Author: Piotr Glejzer

Customize button and label text

Button Labels

Change OK and Cancel button text:

Custom Buttons

Confirm and Close instead of OK and Cancel

index.tsxtsx

1import { Timepicker } from "timepicker-ui-react";
2
3function App() {
4  return (
5    <Timepicker
6      options={{
7        labels: {
8          ok: "Confirm",
9          cancel: "Close"
10        }
11      }}
12    />
13  );
14}

Localization

Translate labels to different languages:

index.tsxtsx

1// Polish localization
2<Timepicker
3  placeholder="Wybierz czas"
4  options={{
5    labels: {
6      ok: "Potwierdź",
7      cancel: "Anuluj"
8    }
9  }}
10/>

Available Labels

index.tstypescript

1// Visible text labels (options.labels)
2interface LabelsOptions {
3  am?: string;            // Default: "AM"
4  pm?: string;            // Default: "PM"
5  ok?: string;            // Default: "OK"
6  cancel?: string;        // Default: "Cancel"
7  clear?: string;         // Default: "Clear"
8  clockTitle?: string;    // Default: "Select time"
9  keyboardTitle?: string; // Default: "Enter Time"
10  hour?: string;          // Default: "Hour"
11  minute?: string;        // Default: "Minute"
12  second?: string;        // Default: "Second"
13}