如何让Flowbite DatePicker仅显示年份选择功能？

你之前设置datepicker-format="yyyy"只是指定了输出的日期格式，但不会改变选择器的显示视图，所以才会出现仍显示完整日历、仅提取年份的情况。要实现仅选择年份的交互，需要利用Flowbite DatePicker底层依赖的flatpickr库的配置项，具体方法如下：

单年份选择 #

使用普通datepicker组件，通过data-options传入flatpickr的配置，指定type: "year"切换到年份选择视图：

<div id="year-picker" datepicker data-options='{"dateFormat": "Y", "type": "year"}' class="w-full">
  <div class="relative">
    <input 
      type="text" 
      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
      placeholder="选择年份"
    >
  </div>
</div>

年份范围选择 #

如果你需要年份范围选择（对应你原来的date-rangepicker），同样通过data-options传入配置：

<div id="year-range-picker" date-rangepicker data-options='{"dateFormat": "Y", "type": "year"}' class="w-full flex items-center">
  <div class="relative">
    <input 
      type="text" 
      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
      placeholder="起始年份"
    >
  </div>
  <span class="mx-4 text-gray-500">至</span>
  <div class="relative">
    <input 
      type="text" 
      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
      placeholder="结束年份"
    >
  </div>
</div>

关键说明 #

• type: "year"：这是核心配置，让flatpickr切换到仅显示年份的选择视图，用户直接点击年份即可完成选择。
• dateFormat: "Y"：确保输出的是四位年份格式，和你之前的需求匹配。
• Flowbite的datepicker组件支持通过data-options传入所有flatpickr的原生配置项，可灵活定制选择器的行为和外观。

内容的提问来源于stack exchange，提问作者EL MAHDI BOUZKOURA