Date Picker disables 2nd month in dual month view #4007
Description
Current Behavior
When creating a two month view with numOfMonths={2} the second month is rendered but every cell trigger is disabled. I'm assuming it has something to do with visableRange: offset.visibleRange which is part of DayTableCellProps but I'm not sure.
Expected Behavior
The second month days should be select-able.
Steps To Reproduce
<script lang="ts">
import { DatePicker, parseDate, Portal, type DateValue } from "@skeletonlabs/skeleton-svelte";
import { onMount } from "svelte";
interface Props {
label?: string;
minDate?: Date;
maxDate?: Date;
classes?: string;
values: Date[];
}
let { maxDate, minDate, label, values=$bindable(), classes }:Props = $props();
let dateValue = $state<DateValue[]>([]);
onMount(() => {
for(const value of values){
dateValue.push(parseDate(value))
}
})
</script>
<div class={classes}>
<DatePicker
value={dateValue}
onValueChange={(e) => {
console.log(e)
dateValue = e.value;
values = [];
for(const value of dateValue){
values.push(value.toDate('UTC'))
}
}}
min={minDate ? parseDate(minDate) : undefined}
max={maxDate ? parseDate(maxDate) : undefined}
selectionMode="range"
class='gap-0!'
numOfMonths={2}
>
<DatePicker.Label>{label}</DatePicker.Label>
<DatePicker.Control>
<DatePicker.Input index={0} placeholder='Start Date: mm/dd/yyyy' class=''/>
<DatePicker.Input index={1} placeholder='End Date: mm/dd/yyyy' class=''/>
<DatePicker.Trigger />
</DatePicker.Control>
<Portal>
<DatePicker.Positioner>
<DatePicker.Content>
<DatePicker.YearSelect />
<DatePicker.MonthSelect />
<DatePicker.View view='day'>
<DatePicker.Context>
{#snippet children(date)}
<DatePicker.ViewControl>
<DatePicker.PrevTrigger />
<DatePicker.ViewTrigger disabled>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger />
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
{#each date().weekDays as weekDay, id (id)}
<DatePicker.TableHeader>
{weekDay.short}
</DatePicker.TableHeader>
{/each}
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{#each date().weeks as week, id (id) }
<DatePicker.TableRow>
{#each week as day, id (id)}
<DatePicker.TableCell value={day}>
<DatePicker.TableCellTrigger>
{day.day}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
{/each}
</DatePicker.TableRow>
{/each}
</DatePicker.TableBody>
</DatePicker.Table>
{/snippet}
</DatePicker.Context>
<DatePicker.Context>
{#snippet children(date)}
{@const offset = date().getOffset({months: 1})}
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
{#each date().weekDays as weekDay, id (id)}
<DatePicker.TableHeader>
{weekDay.short}
</DatePicker.TableHeader>
{/each}
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{#each offset.weeks as week, id (id) }
<DatePicker.TableRow>
{#each week as day, id (id)}
<DatePicker.TableCell value={day} visibleRange={offset.visibleRange} >
<DatePicker.TableCellTrigger>
{day.day}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
{offset.visibleRangeText}
{/each}
</DatePicker.TableRow>
{/each}
</DatePicker.TableBody>
</DatePicker.Table>
{/snippet}
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view='year'>
<DatePicker.Context>
{#snippet children(date)}
<DatePicker.ViewControl>
<DatePicker.PrevTrigger />
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger />
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
{#each date().getYearsGrid({columns:4}) as years, id (id)}
<DatePicker.TableRow>
{#each years as year, id (id)}
<DatePicker.TableCell value={year.value}>
<DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
{/each}
</DatePicker.TableRow>
{/each}
</DatePicker.TableBody>
</DatePicker.Table>
{/snippet}
</DatePicker.Context>
</DatePicker.View>
</DatePicker.Content>
</DatePicker.Positioner>
</Portal>
</DatePicker>
</div>
Link to Reproduction / Stackblitz
https://www.sveltelab.dev/95mxh0f3yl49h6s?files=.%2Fsrc%2Froutes%2FsingleContext%2F%2Bpage.svelte
Environment Information
No response
More Information
https://discord.com/channels/1003691521280856084/1427413553031151728/1430190559947002006