Mixins / foldkit-mixins-ui

DateRange

namespace · packages/mixins-ui/src/dateRange.ts:1

export * as DateRange from './dateRange.js'

In the guides

Members

DateRange.empty

const · packages/mixins-ui/src/dateRange.ts:23

const empty = { start, end }

DateRange.picked

function · packages/mixins-ui/src/dateRange.ts:30

function picked(range: Range, date: Dates.CalendarDate): Range

The range after a day is picked. A start waiting for its end takes the day as its other end, the earlier of the two becoming the start; otherwise, with nothing chosen or a range already whole, the day starts a new range.

DateRange.Range

const · packages/mixins-ui/src/dateRange.ts:17

const Range: Schema.Struct<{
  readonly start: Schema.Option<
    Schema.Struct<{
      readonly year: Schema.Int
      readonly month: Schema.Int
      readonly day: Schema.Int
    }>
  >
  readonly end: Schema.Option<
    Schema.Struct<{
      readonly year: Schema.Int
      readonly month: Schema.Int
      readonly day: Schema.Int
    }>
  >
}>

A start and an end day, chosen on the Calendar (shadcn's mode="range"). The range is the application's, as the Calendar's single date is: it folds each SelectedDate through picked and draws the Calendar with toView, which marks the range's days. The Calendar keeps the month shown and the focus. Schema.Option holds the ends, so store the range through Schema.OptionFromNullOr fields instead.

DateRange.toView

function · packages/mixins-ui/src/dateRange.ts:91

function toView<Message>(
  range: Range,
  mixins: MixinList<Message>,
  context: ResolveContext<unknown, Message>,
  render?: (resolved: ResolvedCalendar<Message>) => Html,
): (attributes: CalendarAttributes) => Html

The Calendar's toView with the range's days marked, for Recipes.DateRange to draw. Give the Calendar maybeSelectedDate: Option.none(): the marks show the chosen days. render receives the marked bundles.