timescape
Version:
A flexible, headless date and time input library for JavaScript. Provides tools for building fully customizable date and time input fields, with support for libraries like React, Preact, Vue, Svelte and Solid.
72 lines (70 loc) • 2 kB
JavaScript
import {
$NOW,
TimescapeManager,
createAmPmHandler,
marry
} from "./chunk-FZJVSTKN.js";
// src/integrations/svelte.ts
import { onDestroy } from "svelte";
import { derived, writable } from "svelte/store";
var createTimescape = (options = {}) => {
const optionsStore = writable(options);
const { date, ...rest } = options;
const manager = new TimescapeManager(date, rest);
manager.on("changeDate", (nextDate) => {
optionsStore.update((value) => ({ ...value, date: nextDate }));
});
optionsStore.subscribe((value) => {
manager.minDate = value.minDate;
manager.maxDate = value.maxDate;
manager.hour12 = value.hour12;
manager.digits = value.digits;
manager.wrapAround = value.wrapAround;
manager.snapToStep = value.snapToStep;
manager.wheelControl = value.wheelControl;
manager.disallowPartial = value.disallowPartial;
});
derived(optionsStore, ($options) => $options.date).subscribe((value) => {
manager.date = value;
});
const inputProps = (element, type) => manager.registerElement(element, type);
const rootProps = (element) => manager.registerRoot(element);
onDestroy(() => manager.remove());
return {
_manager: manager,
inputProps,
rootProps,
ampm: createAmPmHandler(manager),
options: optionsStore,
update: optionsStore.update
};
};
var createTimescapeRange = (options = {}) => {
const from = createTimescape(options.from);
const to = createTimescape(options.to);
marry(from._manager, to._manager);
const rangeRootProps = (element) => {
from.rootProps(element);
to.rootProps(element);
};
return {
fromInputProps: from.inputProps,
toInputProps: to.inputProps,
from: {
inputProps: from.inputProps,
options: from.options,
update: from.update
},
to: {
inputProps: to.inputProps,
options: to.options,
update: to.update
},
rangeRootProps
};
};
export {
$NOW as NOW,
createTimescape,
createTimescapeRange
};