React Datepicker - Flowbite

The Datepicker component from Flowbite React is an advanced UI element that you can use to allow users to pick a date from a calendar view by selecting the day, month, and year values which then will be available in the input field and state of the component.

Follow the examples below to see how you can use the Datepicker component by importing it from the Flowbite React library, customize the colors and behaviour of the component by overriding the default theme variables and using the props from React.

Import the component from flowbite-react to use the datepicker element:

'use client';

import { Datepicker } from 'flowbite-react';

Table of Contents#

• Default Datepicker
• Localization
• Limit the date
• Week start
• Autohide
• Title
• Inline
• Theme
• References

Default Datepicker#

Use this example to show a simple datepicker component.

'use client';

import { Datepicker } from 'flowbite-react';

export default function DatepickerComponent() {
  return (
    <Datepicker />
  )
}

Localization#

Use the language prop to set the language of the datepicker component.

The labelTodayButton and labelClearButton can also be used to update the text of the buttons.

'use client';

import { Datepicker } from 'flowbite-react';

export default function DatepickerComponent() {
  return (
    <Datepicker
      labelClearButton="Limpar"
      labelTodayButton="Hoje"
      language="pt-BR"
    />
  )
}

Limit the date#

By using the minDate and maxDate props you can limit the date range that the user can select.

'use client';

import { Datepicker } from 'flowbite-react';

export default function DatepickerComponent() {
  return (
    <Datepicker
      maxDate={new Date("2023-04-30T00:00:00.000Z")}
      minDate={new Date("2023-01-01T00:00:00.000Z")}
    />
  )
}

Week start#

The weekStart prop can be used to set the first day of the week inside the datepicker component.

{
  "0": "Saturday",
  "1": "Sunday",
  "2": "Monday"
}

'use client';

import { Datepicker } from 'flowbite-react';

export default function DatepickerComponent() {
  return (
    <Datepicker weekStart={2} />
  )
}

Autohide#

By setting the autoHide prop you can either enable or disable automatically hiding the datepicker component when selecting a value.

'use client';

import { Datepicker } from 'flowbite-react';

export default function DatepickerComponent() {
  return (
    <Datepicker autoHide={false} />
  )
}

Title#

You can use the title prop to set a title for the datepicker component.

'use client';

import { Datepicker } from 'flowbite-react';

export default function DatepickerComponent() {
  return (
    <Datepicker title="Flowbite Datepicker" />
  )
}

Inline#

Use the inline prop to show the datepicker component without having to click inside an input field.

'use client';

import { Datepicker } from 'flowbite-react';

export default function DatepickerComponent() {
  return (
    <Datepicker inline />
  )
}

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "relative"
  },
  "popup": {
    "root": {
      "base": "absolute top-10 z-50 block pt-2",
      "inline": "relative top-0 z-auto",
      "inner": "inline-block rounded-lg bg-white p-4 shadow-lg dark:bg-gray-700"
    },
    "header": {
      "base": "",
      "title": "px-2 py-3 text-center font-semibold text-gray-900 dark:text-white",
      "selectors": {
        "base": "flex justify-between mb-2",
        "button": {
          "base": "text-sm rounded-lg text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200 view-switch",
          "prev": "",
          "next": "",
          "view": ""
        }
      }
    },
    "view": {
      "base": "p-1"
    },
    "footer": {
      "base": "flex mt-2 space-x-2",
      "button": {
        "base": "w-full rounded-lg px-5 py-2 text-center text-sm font-medium focus:ring-4 focus:ring-cyan-300",
        "today": "bg-cyan-700 text-white hover:bg-cyan-800 dark:bg-cyan-600 dark:hover:bg-cyan-700",
        "clear": "border border-gray-300 bg-white text-gray-900 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
      }
    }
  },
  "views": {
    "days": {
      "header": {
        "base": "grid grid-cols-7 mb-1",
        "title": "dow h-6 text-center text-sm font-medium leading-6 text-gray-500 dark:text-gray-400"
      },
      "items": {
        "base": "grid w-64 grid-cols-7",
        "item": {
          "base": "block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600 ",
          "selected": "bg-cyan-700 text-white hover:bg-cyan-600",
          "disabled": "text-gray-500"
        }
      }
    },
    "months": {
      "items": {
        "base": "grid w-64 grid-cols-4",
        "item": {
          "base": "block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600",
          "selected": "bg-cyan-700 text-white hover:bg-cyan-600",
          "disabled": "text-gray-500"
        }
      }
    },
    "years": {
      "items": {
        "base": "grid w-64 grid-cols-4",
        "item": {
          "base": "block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600 text-gray-900",
          "selected": "bg-cyan-700 text-white hover:bg-cyan-600",
          "disabled": "text-gray-500"
        }
      }
    },
    "decades": {
      "items": {
        "base": "grid w-64 grid-cols-4",
        "item": {
          "base": "block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9  hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600 text-gray-900",
          "selected": "bg-cyan-700 text-white hover:bg-cyan-600",
          "disabled": "text-gray-500"
        }
      }
    }
  }
}

References#

• Flowbite Datepicker