如何在Flowbite-Svelte Datepicker中排除特定日期？

我正在使用SvelteKit开发一个简单网站，UI采用Flowbite-Svelte组件。开发初期仅使用了availableFrom属性，现在希望实现排除特定日期的功能，让用户无法选择这些日期，但在官方文档中未找到相关特性。我是否遗漏了什么？或者有没有其他实现方式？我希望继续使用Flowbite-Svelte的Datepicker组件，若实在无法实现才考虑更换其他组件。

当前Datepicker代码如下：

<Datepicker
            required={true}
            inputProps={{ id: "date" }}
            bind:value={selectedDate}
            availableFrom={new Date()}
            placeholder="Datum van afspraak"
            locale="nl-NL"
            translationLocale="nl-NL"
            firstDayOfWeek={1}
            dateFormat={{ year: "numeric", month: "2-digit", day: "2-digit" }}
            inputClass="w-full text-black border-2 rounded-md p-3 focus:ring-1 focus:ring-blue-500 border-gray-600 bg-accent-100"
            classes={{ 
                polite: "hover:text-primary-100!", 
                dayButton: "hover:text-primary-100 selected:text-black", 
                titleVariant: "text-primary-100", 
                monthButton: "alternative" 
            }}
        />

1. 关于内置属性的说明 #

目前Flowbite-Svelte的Datepicker组件确实没有直接提供排除特定日期的内置属性，官方文档也未提及相关功能，你并没有遗漏内容。

2. 自定义实现排除日期的两种方式 #

如果不想更换组件，可以通过以下两种方式实现需求：

• 方式一：选择后校验重置
  给Datepicker绑定on:change事件，当用户选择日期后，检查该日期是否在排除列表中，若是则重置选中值并提示用户。

  示例代码：

  <script>
    import { Datepicker } from 'flowbite-svelte';
    let selectedDate;
    // 定义需要排除的日期列表，支持字符串（YYYY-MM-DD）或Date对象
    const excludedDates = ['2024-05-20', new Date('2024-05-25')];
  
    function validateSelectedDate(e) {
      const selected = new Date(e.detail);
      const formattedSelected = selected.toISOString().split('T')[0];
      // 检查选中日期是否在排除列表中
      const isExcluded = excludedDates.some(date => {
        const formattedDate = typeof date === 'string' ? date : date.toISOString().split('T')[0];
        return formattedDate === formattedSelected;
      });
      
      if (isExcluded) {
        alert('该日期无法选择，请重新挑选');
        selectedDate = null;
      }
    }
  </script>
  
  <Datepicker
    required={true}
    inputProps={{ id: "date" }}
    bind:value={selectedDate}
    availableFrom={new Date()}
    placeholder="Datum van afspraak"
    locale="nl-NL"
    translationLocale="nl-NL"
    firstDayOfWeek={1}
    dateFormat={{ year: "numeric", month: "2-digit", day: "2-digit" }}
    inputClass="w-full text-black border-2 rounded-md p-3 focus:ring-1 focus:ring-blue-500 border-gray-600 bg-accent-100"
    classes={{ 
        polite: "hover:text-primary-100!", 
        dayButton: "hover:text-primary-100 selected:text-black", 
        titleVariant: "text-primary-100", 
        monthButton: "alternative" 
    }}
    on:change={validateSelectedDate}
  />
  

• 方式二：自定义日期按钮渲染（更友好）
  利用组件的dayTemplate插槽，自定义每个日期按钮的样式和禁用状态，让排除的日期直接显示为不可点击，无需用户选择后再提示。

  示例代码：

  <script>
    import { Datepicker } from 'flowbite-svelte';
    let selectedDate;
    const excludedDates = ['2024-05-20', new Date('2024-05-25')];
  
    function isExcluded(date) {
      const formattedDate = date.toISOString().split('T')[0];
      return excludedDates.some(d => {
        const formattedD = typeof d === 'string' ? d : d.toISOString().split('T')[0];
        return formattedD === formattedDate;
      });
    }
  </script>
  
  <Datepicker
    required={true}
    inputProps={{ id: "date" }}
    bind:value={selectedDate}
    availableFrom={new Date()}
    placeholder="Datum van afspraak"
    locale="nl-NL"
    translationLocale="nl-NL"
    firstDayOfWeek={1}
    dateFormat={{ year: "numeric", month: "2-digit", day: "2-digit" }}
    inputClass="w-full text-black border-2 rounded-md p-3 focus:ring-1 focus:ring-blue-500 border-gray-600 bg-accent-100"
    classes={{ 
        polite: "hover:text-primary-100!", 
        dayButton: "hover:text-primary-100 selected:text-black", 
        titleVariant: "text-primary-100", 
        monthButton: "alternative" 
    }}
  >
    <svelte:fragment slot="dayTemplate" let:date let:isSelected let:isDisabled>
      <button
        class={`
          ${isSelected ? 'selected' : ''}
          ${isDisabled || isExcluded(date) ? 'bg-gray-200 text-gray-500 cursor-not-allowed' : ''}
          ${!isDisabled && !isExcluded(date) ? 'hover:text-primary-100' : ''}
        `}
        disabled={isDisabled || isExcluded(date)}
        type="button"
      >
        {date.getDate()}
      </button>
    </svelte:fragment>
  </Datepicker>
  

  你可以根据自己的UI需求调整禁用状态的样式类。

3. 最终备选方案 #

如果上述自定义方式无法满足需求，可以去Flowbite-Svelte的GitHub仓库查看Issue，确认是否有相关功能在开发计划中；或者更换支持排除日期的Svelte日期组件，比如svelte-datepicker、carbon-components-svelte的DatePicker。

内容的提问来源于stack exchange，提问作者Stef1397