timepicker-ui
4.6.0GitHub
timepicker-ui
GitHub4.6.0
Guides / Date and Time

Date and Time Picker with timepicker-ui

@pglejzer/datepicker-ui is the companion of timepicker-ui. Use one for the date and one for the time, and join the two values into an ISO datetime string.

Why pair them

#

timepicker-ui picks a time and datepicker-ui picks a date. Each is a separate package with no dependency on the other. Put one input for each in a form and combine the two values yourself, which keeps both pickers small and lets each one use its own options.

Install both

#
index.sh
npm install @pglejzer/datepicker-ui timepicker-ui

Live demo

#

Pick a date and a time. The result is shown under the fields as YYYY-MM-DDTHH:mm.

Date and timeOne theme for both pickers
Pick a date and a time
import DatepickerUI from "@pglejzer/datepicker-ui";
import { TimepickerUI } from "timepicker-ui";


const timeInput = document.querySelector<HTMLInputElement>("#time")!;


const datePicker = new DatepickerUI("#date");
datePicker.create();


const timePicker = new TimepickerUI(timeInput, { clock: { type: "24h" } });
timePicker.create();


const date = datePicker.getValue();
const datetime = date && "value" in date ? `${date.value}T${timeInput.value}` : "";

Combining the values

#

In single mode, getValue() of the date picker returns a DateValue whose value is an ISO date. With clock.type: "24h", the time input of timepicker-ui holds 24-hour text such as 14:30. Join the two with a T:

index.ts
import DatepickerUI from "@pglejzer/datepicker-ui";
import { TimepickerUI } from "timepicker-ui";
import "@pglejzer/datepicker-ui/index.css";
import "timepicker-ui/index.css";


const dateInput = document.querySelector<HTMLInputElement>("#date")!;
const timeInput = document.querySelector<HTMLInputElement>("#time")!;
const output = document.querySelector("#datetime")!;


let date = "";
let time = "";


const render = () => {
  output.textContent = date && time ? `${date}T${time}` : "";
};


const datePicker = new DatepickerUI(dateInput, {
  ui: { theme: "m3-green" },
  callbacks: {
    onConfirm: ({ value }) => {
      date = value && "value" in value ? value.value : "";
      render();
    },
  },
});
datePicker.create();


const timePicker = new TimepickerUI(timeInput, {
  clock: { type: "24h" },
  ui: { theme: "m3-green" },
  callbacks: {
    onConfirm: () => {
      time = timeInput.value;
      render();
    },
  },
});
timePicker.create();

The demo above does the same. It reads the date from getValue() and the time from the time input, and it shows the result only when both fields have a value. Hours below ten are padded to two digits there before the values are joined.

Shared theme names

#

Both packages share these theme names: basic, m3-green, crane, crane-straight, m2, glassmorphic, pastel, ai, cyberpunk and blueprint. Pass the same name to ui.theme of both pickers. timepicker-ui also has dark and blueprint-dark, which datepicker-ui does not have.

index.ts
const theme = "crane";


new DatepickerUI("#date", { ui: { theme } }).create();
new TimepickerUI("#time", { ui: { theme } }).create();
#
Esc