Time
A time at a place in another zone names that zone.
A place whose country keeps several zones is named by its zone, never a city.
An interval at a place names its zone once, after the interval.
A table at a place names its zone once, after its caption.
| Class | Time |
|---|---|
| Yoga class | |
| Pilates | |
| Supplier call |
A range of times states only the parts that differ.
An interval with its day states the day once.
An interval carries the weekday where its role names it.
An interval with its day and weekday takes the reader's locale.
A moment in another locale reads whole in that locale's script.
A month states its month and year alone.
A long date and time and a date range wrap between their parts.
A duration states its hours and minutes, and a day or more stays in hours.
A duration in another locale takes that locale's own words.
Source
@module({from: "kit/react/locales/hi.json", with: {type_: "json"}})
external hi: KitReact.Locale.t = "default"
let kolkata = KitReact.Reader.make(~locale=hi, ~zone="Asia/Kolkata")
let paris = KitReact.Reader.atPlace(Specimen_Reader.reader, ~zone="Europe/Paris")
let classes = [
("yoga", "Yoga class", KitReact.Time.interval(paris, ~start=Date.fromString("2025-04-14T07:00:00Z"), ~end=Date.fromString("2025-04-14T08:00:00Z"))),
("pilates", "Pilates", KitReact.Time.interval(paris, ~start=Date.fromString("2025-04-16T09:00:00Z"), ~end=Date.fromString("2025-04-16T10:00:00Z"))),
(
"supplier-call",
"Supplier call",
KitReact.Time.interval(paris, ~start=Date.fromString("2025-04-17T09:00:00Z"), ~end=Date.fromString("2025-04-17T10:00:00Z"), ~place="Europe/London"),
),
]
@react.component
let make = () =>
<>
<p>
<KitReact.Roles.Time value={KitReact.Time.moment(Specimen_Reader.reader, Date.fromString("2025-04-12T13:00:00Z"))} />
</p>
<p className="specimen-case-line"> {React.string("A time at a place in another zone names that zone.")} </p>
<p>
<KitReact.Roles.Time
value={KitReact.Time.moment(Specimen_Reader.reader, Date.fromString("2025-04-12T17:30:00Z"), ~place="Europe/Paris")}
/>
</p>
<p className="specimen-case-line"> {React.string("A place whose country keeps several zones is named by its zone, never a city.")} </p>
<p>
<KitReact.Roles.Time
value={KitReact.Time.moment(Specimen_Reader.reader, Date.fromString("2025-04-12T17:30:00Z"), ~place="America/New_York")}
/>
</p>
<p className="specimen-case-line"> {React.string("An interval at a place names its zone once, after the interval.")} </p>
<p>
<KitReact.Roles.Time
value={KitReact.Time.interval(Specimen_Reader.reader, ~start=Date.fromString("2025-04-12T07:00:00Z"), ~end=Date.fromString("2025-04-12T09:30:00Z"), ~place="Europe/Paris")}
/>
</p>
<p className="specimen-case-line"> {React.string("A table at a place names its zone once, after its caption.")} </p>
<KitReact.Table.ProseTable
caption={<> {React.string("Classes")} <KitReact.Roles.Time.Zone reader=paris /> </>}
columnHeadings=[{label: "Class", props: {}}, {label: "Time", props: {}}]
rows={classes->Array.map(((key, subject, time)): KitReact.Table.ProseTable.row => {
key,
props: {},
cells: [
{value: Words([KitReact.Words.Text(subject)]), props: {}, heading: true},
{value: Words([KitReact.Words.Time(time)]), props: {}},
],
})}
/>
<p className="specimen-case-line"> {React.string("A range of times states only the parts that differ.")} </p>
<p>
<KitReact.Roles.Time
value={KitReact.Time.interval(Specimen_Reader.reader, ~start=Date.fromString("2025-04-12T08:00:00Z"), ~end=Date.fromString("2025-04-12T10:30:00Z"))}
/>
</p>
<p className="specimen-case-line"> {React.string("An interval with its day states the day once.")} </p>
<p>
<KitReact.Roles.Time value={KitReact.Time.intervalWithDay(Specimen_Reader.reader, ~start=Date.fromString("2025-04-12T08:00:00Z"), ~end=Date.fromString("2025-04-12T10:30:00Z"))} />
</p>
<p className="specimen-case-line"> {React.string("An interval carries the weekday where its role names it.")} </p>
<p>
<KitReact.Roles.Time value={KitReact.Time.intervalWithWeekday(Specimen_Reader.reader, ~start=Date.fromString("2025-04-12T08:00:00Z"), ~end=Date.fromString("2025-04-12T10:30:00Z"))} />
</p>
<p className="specimen-case-line"> {React.string("An interval with its day and weekday takes the reader's locale.")} </p>
<p>
<KitReact.Roles.Time value={KitReact.Time.intervalWithDay(kolkata, ~start=Date.fromString("2025-04-12T03:30:00Z"), ~end=Date.fromString("2025-04-12T06:00:00Z"))} />
</p>
<p>
<KitReact.Roles.Time value={KitReact.Time.intervalWithWeekday(kolkata, ~start=Date.fromString("2025-04-12T03:30:00Z"), ~end=Date.fromString("2025-04-12T06:00:00Z"))} />
</p>
<p className="specimen-case-line"> {React.string("A moment in another locale reads whole in that locale's script.")} </p>
<p>
<KitReact.Roles.Time value={KitReact.Time.moment(kolkata, Date.fromString("2027-03-01T06:30:00Z"))} />
</p>
<p className="specimen-case-line"> {React.string("A month states its month and year alone.")} </p>
<p>
<KitReact.Roles.Time value={KitReact.Time.month(Specimen_Reader.reader, ~year=2025, ~month=4)} />
</p>
<p className="specimen-case-line"> {React.string("A long date and time and a date range wrap between their parts.")} </p>
<p>
<KitReact.Roles.Time value={KitReact.Time.moment(Specimen_Reader.reader, Date.fromString("2026-09-28T00:35:00Z"))} />
</p>
<p>
<KitReact.Roles.Time value={KitReact.Time.dayRange(Specimen_Reader.reader, ~first={year: 2026, month: 9, day: 28}, ~last={year: 2027, month: 10, day: 28})} />
</p>
<p className="specimen-case-line"> {React.string("A duration states its hours and minutes, and a day or more stays in hours.")} </p>
<p>
<KitReact.Roles.Time value={KitReact.Time.duration(Specimen_Reader.reader, ~minutes=90)} />
</p>
<p>
<KitReact.Roles.Time value={KitReact.Time.duration(Specimen_Reader.reader, ~minutes=1440)} />
</p>
<p className="specimen-case-line"> {React.string("A duration in another locale takes that locale's own words.")} </p>
<p>
<KitReact.Roles.Time value={KitReact.Time.duration(kolkata, ~minutes=90)} />
</p>
</>