fix: #1656

feat: datepicker: add availableFrom and availableTo

Author: shinokada

src/lib/datepicker/Datepicker.svelte

@@ -6,7 +6,37 @@
   import { Button, ToolbarButton, type DatepickerProps, cn } from "$lib";
   import { datepicker } from "./theme";
 
-  let { value = $bindable(), defaultDate = null, range = false, rangeFrom = $bindable(), rangeTo = $bindable(), locale = "default", firstDayOfWeek = 0, dateFormat, placeholder = "Select date", disabled = false, required = false, inputClass = "", color = "primary", inline = false, autohide = true, showActionButtons = false, title = "", onselect, onclear, onapply, btnClass, inputmode = "none", classes, monthColor = "alternative", monthBtnSelected = "bg-primary-500 text-white", monthBtn = "text-gray-700 dark:text-gray-300", class: className }: DatepickerProps = $props();
+  let { 
+    value = $bindable(), 
+    defaultDate = null, 
+    range = false, 
+    rangeFrom = $bindable(), 
+    rangeTo = $bindable(), 
+    availableFrom = null,
+    availableTo = null,
+    locale = "default", 
+    firstDayOfWeek = 0, 
+    dateFormat, 
+    placeholder = "Select date", 
+    disabled = false, 
+    required = false, 
+    inputClass = "", 
+    color = "primary", 
+    inline = false, 
+    autohide = true, 
+    showActionButtons = false, 
+    title = "", 
+    onselect, 
+    onclear, 
+    onapply, 
+    btnClass, 
+    inputmode = "none", 
+    classes, 
+    monthColor = "alternative", 
+    monthBtnSelected = "bg-primary-500 text-white", 
+    monthBtn = "text-gray-700 dark:text-gray-300", 
+    class: className 
+  }: DatepickerProps = $props();
 
   const dateFormatDefault = { year: "numeric", month: "long", day: "numeric" };
   // const dateFormatOptions = $derived(dateFormat ?? dateFormatDefault);
@@ -92,7 +122,27 @@
     showMonthSelector = !showMonthSelector;
   }
 
+  // Helper function to check if a date is available for selection
+  function isDateAvailable(date: Date): boolean {
+    const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    
+    if (availableFrom) {
+      const fromDate = new Date(availableFrom.getFullYear(), availableFrom.getMonth(), availableFrom.getDate());
+      if (dateOnly < fromDate) return false;
+    }
+    
+    if (availableTo) {
+      const toDate = new Date(availableTo.getFullYear(), availableTo.getMonth(), availableTo.getDate());
+      if (dateOnly > toDate) return false;
+    }
+    
+    return true;
+  }
+
   function handleDaySelect(day: Date) {
+    // Don't allow selection of unavailable dates
+    if (!isDateAvailable(day)) return;
+
     if (range) {
       if (!rangeFrom || (rangeFrom && rangeTo)) {
         rangeFrom = day;
@@ -262,7 +312,25 @@
           {/each}
           {#each daysInMonth as day}
             {@const current = day.getMonth() !== currentMonth.getMonth()}
-            <Button type="button" color={isSelected(day) ? color : "alternative"} class={dayButton({ current, today: isToday(day), color: isInRange(day) ? color : undefined, class: clsx(classes?.dayButton) })} onclick={() => handleDaySelect(day)} onkeydown={handleCalendarKeydown} aria-label={day.toLocaleDateString(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })} aria-selected={isSelected(day)} role="gridcell">
+            {@const available = isDateAvailable(day)}
+            <Button 
+              type="button" 
+              color={isSelected(day) ? color : "alternative"} 
+              class={dayButton({ 
+                current, 
+                today: isToday(day), 
+                color: isInRange(day) ? color : undefined, 
+                unavailable: !available,
+                class: clsx(classes?.dayButton, !available && "opacity-50 cursor-not-allowed") 
+              })} 
+              onclick={() => handleDaySelect(day)} 
+              onkeydown={handleCalendarKeydown} 
+              aria-label={day.toLocaleDateString(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })} 
+              aria-selected={isSelected(day)} 
+              aria-disabled={!available}
+              disabled={!available}
+              role="gridcell"
+            >
               {day.getDate()}
             </Button>
           {/each}
@@ -271,7 +339,14 @@
 
       {#if showActionButtons && !showMonthSelector}
         <div class={actionButtons({ class: clsx(classes?.actionButtons) })}>
-          <Button onclick={() => handleDaySelect(new Date())} {color} size="sm">Today</Button>
+          <Button 
+            onclick={() => handleDaySelect(new Date())} 
+            {color} 
+            size="sm" 
+            disabled={!isDateAvailable(new Date())}
+          >
+            Today
+          </Button>
           <Button onclick={handleClear} color="red" size="sm">Clear</Button>
           <Button onclick={handleApply} {color} size="sm">Apply</Button>
         </div>
@@ -291,6 +366,8 @@
 @prop range = false
 @prop rangeFrom = $bindable()
 @prop rangeTo = $bindable()
+@prop availableFrom = null
+@prop availableTo = null
 @prop locale = "default"
 @prop firstDayOfWeek = 0
 @prop dateFormat
@@ -313,4 +390,4 @@
 @prop monthBtnSelected = "bg-primary-500 text-white"
 @prop monthBtn = "text-gray-700 dark:text-gray-300"
 @prop class: className
--->
+-->

src/lib/datepicker/theme.ts

@@ -55,7 +55,10 @@ export const datepicker = tv({
     },
     today: {
       true: { dayButton: "font-bold" }
+    },
+    unavailable: {
+      true: { dayButton: "opacity-50 cursor-not-allowed hover:bg-gray-100 dark:hover:bg-gray-700" }
     }
   },
   compoundVariants: []
-});
+});

src/lib/types.ts

@@ -480,6 +480,7 @@ export interface DarkmodeProps extends HTMLButtonAttributes {
   ariaLabel?: string;
 }
 
+// datepicker
 // datepicker
 export type DateOrRange = Date | { from?: Date; to?: Date };
 
@@ -489,6 +490,8 @@ export interface DatepickerProps extends DatepickerVariants, Omit<HTMLAttributes
   range?: boolean;
   rangeFrom?: Date;
   rangeTo?: Date;
+  availableFrom?: Date | null;  
+  availableTo?: Date | null;    
   locale?: string;
   firstDayOfWeek?: number;
   dateFormat?: Intl.DateTimeFormatOptions;

src/routes/docs/components/datepicker.md

@@ -227,6 +227,52 @@ Listen for date selection events using the `onselect` event.
 </div>
 ```
 
+## Restricting the selectable date range
+
+```svelte example class="h-[430px]"
+<script lang="ts">
+  import { Datepicker, P, type DateOrRange } from "flowbite-svelte";
+  let selectedDate = $state<Date | undefined>(undefined);
+  
+  // Helper function to add/subtract days
+  function addDays(date: Date, days: number): Date {
+    const result = new Date(date);
+    result.setDate(result.getDate() + days);
+    return result;
+  }
+  
+  // Calculate dates relative to today
+  const today = new Date();
+  const availableFrom = addDays(today, -10); // 10 days ago
+  const availableTo = addDays(today, 10);    // 10 days from now
+
+  function formatDate(date: Date): string {
+    return date.toLocaleDateString('en-US', { 
+      year: 'numeric', 
+      month: 'long', 
+      day: 'numeric' 
+    });
+  }
+</script>
+
+<Datepicker 
+  bind:value={selectedDate}
+  {availableFrom}
+  {availableTo}
+  placeholder="Select available date"
+/>
+
+<P class="mt-4">Available from: {formatDate(availableFrom)} to: {formatDate(availableTo)}</P>
+
+<P>Selected date: {selectedDate ? formatDate(selectedDate) : 'None selected'}</P>
+
+<!-- Show some context -->
+<P class="text-sm text-gray-600 mt-4">
+  Today: {formatDate(today)}<br>
+  Range: 10 days before today to 10 days after today
+</P>
+```
+
 ## Component data
 
 The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.

src/routes/docs/plugins/wysiwyg.md

@@ -123,19 +123,7 @@ Use `FormatButtonGroup` to enable typography styling, formatting and marking suc
     editorInstance?.commands.setContent(content);
   }
 
-  const content = `<p>Flowbite-Svelte is an <strong>open-source library of UI components</strong> based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.</p><p>It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.</p><p>Here is an example of a code block:</p>
-  <pre><code class="language-javascript">for (var i=1; i <= 20; i++)
-    {
-      if (i % 15 == 0)
-        console.log("FizzBuzz");
-      else if (i % 3 == 0)
-        console.log("Fizz");
-      else if (i % 5 == 0)
-        console.log("Buzz");
-      else
-        console.log(i);
-    }</code></pre>
-<p>Learn more about all components from the <a href="https://flowbite-svelte.com/docs/pages/quickstart">Flowbite-Svelte Docs</a>.</p>`;
+  const content = `<p>Flowbite-Svelte is an <strong>open-source library of UI components</strong> based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.</p><p>It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.</p>`;
 </script>
 
 <TextEditor bind:editor={editorInstance} {content}>