Patch Changes

• #27 24d68fe Thanks @dan-lee! - Maintain correct AM/PM value when changing hours in hour12 mode

Minor Changes

• #23 f616faa Thanks @SeanCassiere! - Allow native key events to be passed through in the keydown

Patch Changes

• 482d067: Allow switching AM/PM on mobile #20 (thanks @LiniovasDovydas!)

Patch Changes

• 7aadd9b: Fix test

Patch Changes

• aa39a3d: Fix leaky shadow elements

Minor Changes

• 2183515:

Features

Ranges

timescape now supports ranges for the date/time inputs. This means a user can select a start and end. This is useful for things like booking systems, where you want to allow the user to select a range of dates.

This is achieved by using two timescape instances, one for the start and one for the end. You can set their options independently, and they return the respective options and update functions in the from and to objects.

Example usage (this works similar for all supported libraries):

import { useTimescapeRange } from "timescape/react";
// Use `createTimescapeRange` for Svelte

const { getRootProps, from, to } = useTimescapeRange({
  from: { date: new Date("2000-01-01") },
  to: { date: new Date() },
});

return (
  <div {...getRootProps()}>
    <div>
      <input {...from.getInputProps("days")} />
      <span>/</span>
      <input {...from.getInputProps("months")} />
      <span>/</span>
      <input {...from.getInputProps("years")} />
    </div>
    <div>
      <input {...to.getInputProps("days")} />
      <span>/</span>
      <input {...to.getInputProps("months")} />
      <span>/</span>
      <input {...to.getInputProps("years")} />
    </div>
  </div>
);

Breaking changes

State/Signal/Store passing

It's not necessary to pass down your own states/signals/stores to timescape anymore.
They are being created for you and returned (together with an update function if necessary). This makes things way easier to handle on timescape’s side and should be easy to migrate to.

Updating the state is followed by the libraries' conventions. See the examples down below.

const [options, setOptions] = useState({
  date: new Date(),
});
const { ...rest } = useTimescape(options);

const handleChange = () => {
  setOptions((prev) => ({ ...prev, date: new Date() }));
};

const { options, update, ...rest } = useTimescape({
  date: new Date(),
});

const handleChange = () => {
  update((prev) => ({ ...prev, date: new Date() }));
};

const options = useSignal({ date: new Date() });
const { ...rest } = useTimescape(options);

const handleChange = () => {
  options.value = {
    ...options.value,
    date: new Date(),
  };
};

const { options, ...rest } = useTimescape({
  date: new Date(),
});

const handleChange = () => {
  options.value = {
    ...options.value,
    date: new Date(),
  };
};

const options = writable({
  date: new Date(),
});
const { ...rest } = useTimescape(options);

const handleChange = () => {
  options.update((options) => ({
    ...options,
    date: new Date(),
  }));
};

const { options, ...rest } = useTimescape({
  date: new Date(),
});

const handleChange = () => {
  options.update((options) => ({
    ...options,
    date: new Date(),
  }));
};

const [options, setOptions] = createSignal({
  date: new Date(),
});
const { ...rest } = useTimescape(options);

const handleChange = () => {
  setOptions("date", new Date());
  // or object notation: setOptions({ … })
};

const { options, update, ...rest } = useTimescape({
  date: new Date(),
});

const handleChange = () => {
  update("date", new Date());
  // or object notation: update({ … })
};

const date = ref(new Date());
const options = reactive({ date });
const { ...rest } = useTimescape(options);

// Set later:
// <button @click="date = new Date()">

const { options, ...rest } = useTimescape({
  date: new Date(),
});

// Set later:
// <button @click="options.date = new Date()">

Minor Changes

• 68cd9f1: Add snapToStep option

Patch Changes

• f3e2551: Set value from intermediate value when focus is lost or up/down arrow keys are used.

New features

• Mobile/touch devices support (fixes #1)