Releases: dan-lee/timescape
Releases · dan-lee/timescape
[email protected]
Patch Changes
- #31
7a32dadThanks @zanuarmirza! - adding cjs output format
Contributors
zanuarmirza
Assets 2
[email protected]
Contributors
dan-lee
Assets 2
[email protected]
Minor Changes
- #23
f616faaThanks @SeanCassiere! - Allow native key events to be passed through in thekeydown
Contributors
SeanCassiere
Assets 2
[email protected]
Patch Changes
- 482d067: Allow switching AM/PM on mobile #20 (thanks @LiniovasDovydas!)
Contributors
LiniovasDovydas
Assets 2
[email protected]
Patch Changes
- 7aadd9b: Fix test
[email protected]
Patch Changes
- aa39a3d: Fix leaky shadow elements
[email protected]
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()"> |
[email protected]
Minor Changes
- 68cd9f1: Add
snapToStepoption
[email protected]
Patch Changes
- f3e2551: Set value from intermediate value when focus is lost or up/down arrow keys are used.
