Minor Changes
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.
Migration in React
| Before | After |
|---|---|
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() }));
}; |
Migration in Preact
| Before | After |
|---|---|
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(),
};
}; |
Migration in Svelte
| Before | After |
|---|---|
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(),
}));
}; |
Migration in Solid
| Before | After |
|---|---|
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({ … })
}; |
Migration in Vue
| Before | After |
|---|---|
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()"> |