Collection of reactive primitives and utility functions, providing easier ways to deal with dates
| Stage | Category | Version | Last Updated | Demo |
|---|---|---|---|---|
| 3 | Utilities | 3.0.0-next.3 (next) | Aug 13, 2026 | Demo → |
npm i @solid-primitives/date@nextCollection of reactive primitives and utility functions, providing easier ways to deal with dates in SolidJS.
createDate- Creates a reactiveDatesignal.createDateNow- Creates an autoupdating and reactivenew Date().createTimeDifference- Provides a reactive time difference (in ms) signal.createTimeDifferenceFromNow- Provides a autoupdating, reactive time difference (in ms) from now as a signal.createTimeAgo- Provides a reactive, formatted, autoupdating date difference in relation to now.createCountdown- Provides a reactive broken down time remaining Store.createCountdownFromNow- Provides a reactive, autoupdating (from now), broken down "time remaining" as a Store.- + some non-reactive date-related utility functions.
Reactive Primitives:
createDate
Creates a reactive Date signal.
const [date, setDate] = createDate(1641408329089);
date(); // T: Date
setDate("2020 1 11");
// passed initial value can be reactiveconst [timestamp, setTimestamp] = createSignal(1641408329089);const [date, setDate] = createDate(timestamp);
setTimestamp(1341708325070); // will update the datecreateDateNow
Creates an autoupdating and reactive new Date().
import { createDateNow } from "@solid-primitives/date";
// updates every second:const [now] = createDateNow(1000);
// reactive timeout valueconst [timeout, setTimeout] = createSignal(500);const [now] = createDateNow(timeout);
// won't autoupdate:const [now, update] = createDateNow(() => false);
// update manually:update();createTimeDifference
Provides a reactive time difference (in ms) signal.
// the arguments can be reactiveconst [target, setTarget] = createSignal(1641408329089);const [diff, { from, to }] = createTimeDifference("2020 1 11", target);diff(); // T: numberfrom(); // T: Dateto(); // T: DatecreateTimeDifferenceFromNow
Provides a autoupdating, reactive time difference (in ms) from now as a signal.
const [target, setTarget] = createSignal(1641408329089);const [diff, { target, now, update }] = createTimeDifferenceFromNow(target);diff(); // T: numbertarget(); // T: Datenow(); // T: Date// manual update (automatic one can be disabled by passing false)update();
// you can pass a custom interval (number or function or false)createTimeDifferenceFromNow(target, diff => (diff > 100000 ? 30000 : 1000));createTimeAgo
Provides a reactive, formatted date difference in relation to now.
import { createTimeAgo, createDate } from "@solid-primitives/date";
const [myDate, setMyDate] = createDate("Jun 28, 2021");const [timeago, { target, now, update, difference }] = createTimeAgo(myDate);// => 5 months ago
timeago(); // => 5 months agodifference(); // T: numbertarget(); // T: Datenow(); // T: Date// manual update (automatic one can be disabled by passing false)update();
// use custom libraries to change formatting:import { formatRelative } from "date-fns";const [timeago] = createTimeAgo(1577836800000, { min: 10000, interval: 30000, relativeFormatter: (target, now) => formatRelative(target, now),});// => last Monday at 9:25 AMcreateCountdown
Provides a reactive broken down time remaining Store.
const [to, setTo] = createSignal(1641408329089);const countdown = createCountdown("2020 1 11", to);
countdown.minutes; // e.g. 5countdown.hours; // e.g. 1countdown.seconds; // e.g. 48createCountdownFromNow
Provides a reactive, autoupdating (from now), broken down "time remaining" as a Store.
// target date may be reactiveconst [to, setTo] = createSignal(1641408329089);const [countdown, { now, target, update }] = createCountdownFromNow(to);
countdown.minutes; // e.g. 5countdown.hours; // e.g. 1countdown.seconds; // e.g. 48
target(); // T: Datenow(); // T: Date// manual update (automatic one can be disabled by passing false)update();
// you can pass a custom interval (number or function or false)createCountdownFromNow(to, diff => (diff > 100000 ? 30000 : 1000));Utility Functions
getDate
/** * @param init timestamp `number` | date `string` | `Date` instance * @returns `Date` instance */const getDate = (init: DateInit): DategetTime
/** * @param init timestamp `number` | date `string` | `Date` instance * @returns timestamp `number` */const getTime = (init: DateInit): numbergetDateDifference
Get the time difference between two dates [ms]
const getDateDifference = (from: Date, to: Date): numbergetCountdown
Provides broken down time remaining from a time difference.
/** * @param difference time difference between two dates *[ms]* * @returns countdown object with keys: `days`, `hours`, `minutes`, etc. */const getCountdown = (difference: number): CountdownformatDate
Apply basic formatting to a Date instance.
const formatDate = (date: Date): string
// exampleconst date = new Date("2020 1 11")formatDate(date) // => '2020-01-10'formatDateRelative
Applies relative time formatting based on a time difference from now.
/** * @param difference time difference between a date and now *[ms]* * @param messages custom messages for changing formatting * @returns formatted string, e.g. *"2 seconds ago"*, *"in 3 weeks"*... */function formatDateRelative(difference: number, messages?: Partial<RelativeFormatMessages>): string;Changelog
See CHANGELOG.md