BbDatePickerInput

<template>
	<div class="flex max-w-md flex-col gap-4">
		<p class="text-sm opacity-70">
			Pick the same day — say 1 January 2027 — in all three fields and compare
			what each one emits.
		</p>

		<div class="flex flex-col gap-2">
			<BbDatePickerInput
				id="output-zoned"
				v-model="zoned"
				compact
				label="Default — ISO with the local offset"
				name="zoned"
			/>
			<code class="text-xs opacity-70">{{ zoned ?? 'null' }}</code>
		</div>

		<div class="flex flex-col gap-2">
			<BbDatePickerInput
				id="output-utc"
				v-model="asUtc"
				compact
				label="utc — ISO in UTC, as v2 emitted"
				name="as_utc"
				utc
			/>
			<code class="text-xs opacity-70">{{ asUtc ?? 'null' }}</code>
		</div>

		<div class="flex flex-col gap-2">
			<BbDatePickerInput
				id="output-floating"
				v-model="floatingDay"
				compact
				floating
				label="floating — the calendar day alone"
				name="floating_day"
			/>
			<code class="text-xs opacity-70">{{ floatingDay ?? 'null' }}</code>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbDatePickerInput } from 'bitboss-ui';

// All three start empty on purpose. A seeded zoned value is displayed in the
// reader's own timezone, so the prerendered HTML and the hydrated page would
// disagree about the digits — and, near midnight, about the day. Seed
// `floating` values or nothing at all in a server-rendered page.
const zoned = ref<string | null>(null);
const asUtc = ref<string | null>(null);
const floatingDay = ref<string | null>(null);
</script>

<template>
	<div class="flex max-w-sm flex-col gap-3">
		<BbDatePickerInput
			id="invoice-issued-at"
			v-model="issuedAt"
			floating
			label="Issue date"
			name="issued_at"
			prepend:icon="lucide:calendar"
		/>

		<p class="text-sm opacity-70">
			Model: <code>{{ issuedAt === null ? 'null' : `"${issuedAt}"` }}</code>
		</p>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbDatePickerInput } from 'bitboss-ui';
import { fixedDates } from '~/demo-data';

// `fixedDates.today` is a pinned constant, not the clock. Every page on this
// site is prerendered, so a demo that read the real today would put one date
// in the static HTML and another in the hydrated page. Your application reads
// the clock; a documentation demo cannot.
const issuedAt = ref<string | null>(fixedDates.today);
</script>

<template>
	<div class="flex max-w-sm flex-col gap-3">
		<BbDatePickerInput
			id="stay-dates"
			v-model="stay"
			clearable
			floating
			label="Stay dates"
			:min="fixedDates.today"
			name="stay"
			placeholder="Check-in → check-out"
			prepend:icon="lucide:calendar-range"
			range
		/>

		<p class="text-sm opacity-70">
			<template v-if="stay.length === 2">
				{{ nights }} night{{ nights === 1 ? '' : 's' }} —
				<code>{{ JSON.stringify(stay) }}</code>
			</template>
			<template v-else>
				No dates yet — the model is <code>[]</code>, never <code>null</code>.
			</template>
		</p>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbDatePickerInput } from 'bitboss-ui';
import { daysBetween, fixedDates } from '~/demo-data';

// Range mode needs an array at every moment, including the empty one. Seeding
// `null` here throws at setup.
const stay = ref<string[]>([fixedDates.rangeStart, fixedDates.rangeEnd]);

// `daysBetween` parses two YYYY-MM-DD strings as UTC midnights, so it never
// reads the clock and never depends on the reader's timezone. In an app this
// is one dayjs call.
const nights = computed(() =>
	stay.value.length === 2 ? daysBetween(stay.value[0]!, stay.value[1]!) : 0
);
</script>

<template>
	<div class="flex max-w-sm flex-col gap-3">
		<BbDatePickerInput
			id="appointment"
			v-model="appointment"
			description="Weekdays only, and not on a company closure."
			:first-day-of-week="1"
			floating
			label="Appointment"
			:max="fixedDates.windowEnd"
			:min="fixedDates.windowStart"
			name="appointment"
			prepend:icon="lucide:calendar-check"
			:selectable="isBookable"
		/>

		<p class="text-sm opacity-70">
			Bookable between <code>{{ fixedDates.windowStart }}</code> and
			<code>{{ fixedDates.windowEnd }}</code
			>. Closed: <code>{{ closedDays.join(', ') }}</code
			>.
		</p>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbDatePickerInput } from 'bitboss-ui';
import { closedDays, fixedDates } from '~/demo-data';

const appointment = ref<string | null>(null);

// Parsed as a UTC midnight so the weekday never depends on the reader's
// timezone — and never on the clock.
const isWeekend = (day: string): boolean => {
	const weekday = new Date(`${day}T00:00:00Z`).getUTCDay();
	return weekday === 0 || weekday === 6;
};

// `min` and `max` draw the window; `selectable` handles everything the window
// cannot express. It receives the same string shape the field emits.
const isBookable = (day: string): boolean =>
	!isWeekend(day) && !closedDays.includes(day);
</script>

<template>
	<div class="flex max-w-md flex-col gap-4">
		<div class="flex flex-col gap-2">
			<BbDatePickerInput
				id="reminder"
				v-model="reminderDay"
				v-model:time="reminderTime"
				floating
				label="Reminder"
				name="reminder"
				prepend:icon="lucide:calendar-clock"
				type="datetime"
			/>
			<p class="text-xs opacity-70">
				<code>v-model</code> → {{ reminderDay ?? 'null' }} ·
				<code>v-model:time</code> → {{ reminderTime ?? 'null' }}
			</p>
		</div>

		<div class="flex flex-col gap-2">
			<BbDatePickerInput
				id="pickup"
				v-model="pickupDay"
				v-model:time="pickupTime"
				ampm
				floating
				label="Pickup slot"
				name="pickup"
				:step="15"
				type="datetime"
			/>
			<p class="text-xs opacity-70">
				12-hour fields, quarter-hour column — and still
				<code>{{ pickupTime ?? 'null' }}</code> in the model.
			</p>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbDatePickerInput } from 'bitboss-ui';
import { fixedDates, fixedTimes } from '~/demo-data';

// Under `floating` the date string stays plain YYYY-MM-DD, so `v-model:time`
// is the only place the time exists. Drop it and the time is silently lost.
const reminderDay = ref<string | null>(fixedDates.tomorrow);
const reminderTime = ref<string | null>(fixedTimes.standup);

// `ampm` changes the fields, never the model: this stays 24-hour.
const pickupDay = ref<string | null>(fixedDates.tomorrow);
const pickupTime = ref<string | null>(fixedTimes.slot);
</script>