themesberg / flowbite-datepicker

A Tailwind CSS datepicker built with vanilla JavaScript

Flowbite Datepicker - Built with Tailwind CSS

This project is a free and open source datepicker library which uses the utility-first classes from Tailwind and the JavaScript from another open source library called Vanilla JS Datepicker.

This Tailwind CSS Datepicker is part of a larger library of components and interactive elements called Flowbite. Although it can also be used independently from the main library, we encourage you to check out the whole Tailwind components library from Flowbite.

Getting started

If you want to use the Tailwind Datepicker plugin using JavaScript you will need to include it into your project via NPM:

npm i flowbite-datepicker --save

After you've installed the NPM library, you will need to import the Datepicker module:

import Datepicker from 'flowbite-datepicker/Datepicker';

Initialize a new element using the Datepicker constructor and optionally add custom options based on your needs:

const datepickerEl = document.getElementById('datepickerId');
new Datepicker(datepickerEl, {
    // options
}); 

If you want to use the Tailwind Date Range Picker you have to import the DateRangePicker module:

import DateRangePicker from 'flowbite-datepicker/DateRangePicker';

Then in the same fashion you can initalize a date range picker component by using the DateRangePicker constructor:

const dateRangePickerEl = document.getElementById('dateRangePickerId');
new DateRangePicker(datepickerEl, {
    // options
}); 

Documentation

Check out the official Tailwind CSS Datepicker Documentation page to learn how to get started by installing and then using this library in your project.

Upgrade to pro

There is also a pro version of FlowBite available featuring more components, an application UI layout, marketing UI pages, e-commerce pages and also Figma design files.

Check it out here: flowbite.com

License

The Tailwind CSS Datepicker is open-source under the MIT License. Find out more by clicking here.

Donations

If you want to help support this project you can send us Bitcoin or Ethereum to the following addresses:

• Bitcoin address: bc1qmxvck7jnvwmv0z9xv4lcjsf05dja973v2pn7f5
• Ethereum address: 0xcb97e23EBc2262B2ba93bfC5d1e423e08420cAF6

The money will be used to pay for the hosting plan and other costs that are included to maintain this project.

flowbite-datepicker's Issues

Is this project still alive?

Title

Using Locals without NPM

Hello, is it possible to change the language to German if the date picker is only integrated via CDN? I have a project that I want to keep as small and simple as possible. Therefore I cannot include the date picker via NPM

React onChange never gets triggered

I have a React wrapper around the datepicker. onChange of the input never gets called when clicking on the date.

[Date Range PIcker] Bad UX

Description

• THis is a bad UX, because one you select date from 3 month, the selection will be too long, it should be the same behavior on this package Link, which means in every new selection it should be a new range, not reusing previous value

How to get the selected date using vanilla js

Hello, I'm trying to find a way how to get the selected date from the calendar using vanilla js.

I'm using an inline script but unfortunately, I can't find a way to get the selected date from the calendar.

<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/datepicker.min.js"></script>

<div inline-datepicker data-date="02/25/2022"></div>

Any help would be appreciated!

can i use this datepicker in angular?

[Date Range Picker] inline support

Is it possible to add inline support for Date Range Picker?

Incorrect position if tailwind set important true

Hi, If I set tailwind config important: true the datepicker dropdown open to the default position top-0 left-0 since it is important, the dynamic position ignored

I think you need to get rid the top-0 left-0 default class from the datepicker dropdown since the initial position already handled by JS

Thanks

Date range border-radius is broken

In React 18.2.0 and Tailwind 3.2.1 the border radius is broken, and the blue active-ring doesn't show on input click

How can i add flowbite-datepicker in nuxt3

https://flowbite.com/docs/plugins/datepicker

i try add flowbite-datepicker to package then use them in my test.vue but didn't work please helpme

    <div class="relative max-w-sm">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none">
            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                fill="currentColor" viewBox="0 0 20 20">
                <path
                    d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
            </svg>
        </div>
        <input datepicker 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 pl-10 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="Select date">
    </div>
</template>

<script setup>
useHead(() => ({
    link: [
        {
            href: 'https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.0/datepicker.min.js  '
        }
    ]
}))
</script>```

Firing change event

Currently when the date value is assigned, no change event is fired, which means that when you've got custom event listeners for change events, they won't fire when a date in the picker is chosen.

SyntaxError: Cannot use import statement outside a module

Hi,
im trying to import the datepicker in nextjs and im getting this error.
SyntaxError: Cannot use import statement outside a module

Can't be able to use a different locale

Hello, I'm using this plugin and and not being able to set another locale besides en which is default one. The documentation is not clear about that anyway I have tried several approachs but not succedeed, could someone provide some information about this?

thank you!

No disabled styling for out of range dates

If you use minDate or maxDate then out of range dates still look selectable.

No typescript

Has anyone got a typescript definitions file? Crazy they don't include that inside the project.

AutoHide does not work, possibly a typo in Picker.js - version: 1.2.2

\flowbite-datepicker\js\picker\Picker.js: line 207

hide() {
...
    // this.element.classList.add('active', 'block', 'hidden'); //typos?
    this.element.classList.add('hidden');  //fix
...
 }

When using importmap in rails7, datepicker does not work in dark mode.

I am trying to use datepicker in rails 7 with importmap, but it does not work when in dark mode.

/config/importmap.rb

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "flowbite", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.0.0/flowbite.turbo.min.js"
pin "flowbite-datepicker", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.0.0/datepicker.turbo.min.js"

/app/javascript/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import 'flowbite'
import 'flowbite-datepicker'

I am using the flowbit official date range picker as a sample, at which point it looks like this attachment.
cf: https://flowbite.com/docs/plugins/datepicker/#date-range-picker

Although it is not mentioned in the documentation for using importmap, the following is what it looks like after introducing flowbite.min.css.

/app/view/layoouts/application.html.haml

     = csp_meta_tag
     = stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload"
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
+    %link{:href => "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.0.0/flowbite.min.css", :rel => "stylesheet"}/
     = javascript_importmap_tags
   %body.bg-white-200.dark:bg-slate-900.dark:text-white

It works, however, the behavior in dark mode is not right with this method.

If I change the loading position of the css, I get the following.

     = csp_meta_tag
+    %link{:href => "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.0.0/flowbite.min.css", :rel => "stylesheet"}/
     = stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload"
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
     = javascript_importmap_tags
   %body.bg-white-200.dark:bg-slate-900.dark:text-white

The dialog that appears when the year and month are clicked is not correct.

What is the correct way to do this?

Can't bind date value to alpinJs or Livewire

I use livewire with aplinjs beside flowbite
i can't bind value of date to any of them with x-model or wire:model

TodayHighlight rendering is not working correctly

When using the standalone js import, the todayHighlight rendering (class?) is broken after selecting any other date:

Here's how I'm using the plugin:

import { Alpine } from "alpinejs";
import FlowbiteDatepicker from "flowbite-datepicker/Datepicker";

export const Datepicker = (Alpine: Alpine) =>
  Alpine.directive("datepicker", (el: Element) =>
    new FlowbiteDatepicker(el, {
      // todayBtn: true,
      // todayBtnMode: 1,
      todayHighlight: true,
      clearBtn: true,
      format: "dd/mm/yyyy",
    }));

TodayBtn does not work

It looks like the today button doesn't do anything; see https://flowbite.com/docs/plugins/datepicker/#action-buttons

I've tried Chrome and Firefox on Win 10, neither works.

DateRangePicker doesn't seem to work in React/NextJS

I've been trying to implement the DateRangePicker with no success.

I am using NextJS app router v:^13.4.8
Here is the code:

import DateRangePicker from "flowbite-datepicker/DateRangePicker";

 const datepickerRef = useRef();
  useEffect(() => {
    if (datepickerRef?.current) {
      new DateRangePicker(datepickerRef.current, {});
    }
  }, []);
  

return (
      <input
         ref={datepickerRef}
         type="text"
         placeholder="Select date"
      />
)

Note: The original DatePicker works just fine using the same method.

Make number of week rows dynamic, 5 vs. 6 week rows

I see in daysTemplate.js that 42 day cells visible on the calendar month is hardcoded, 6 rows * 7 day weeks = 42. I would like to see it be dynamic, only 35 day cells (or 5 * 6) in months that are fully contained within 5 weeks. My designer doesn't like that full weeks in a different month are rendered for the month.

Here is a stackoverflow discussing something similar in a different package.
https://stackoverflow.com/questions/37042442/5-weeks-datepicker-in-angularjs

Can't we define a start date for the calendar

I want to prevent users selecting the old dates. Does this have such a feature?

Setting a new format on instantiation brokes the minDate feature

datesDisable option not working?

When i use the datesDisable option like this:

const datesToDisable = [ new Date(2024, 0, 1)];
const datepickerEl = document.getElementById('datepicker');

new Datepicker(datepickerEl, {
    datesDisable: datesToDisable,
    todayHighlight: true,
    minDate : new Date()
});

It does not disable the first of januari 2024

DateRangePicker on Laravel Vue Not Setting Value to Vue Model

I tried using the DateRange Picker in my LaraVue project but I just can't seem to get the value of the datepicker to my vue model.

<div>
  <InputLabel value="Select Date" class="mb-1" />
   <div date-rangepicker id="dateRangePickerId" class="inline-flex items-center w-full">
     <div class="relative w-full">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"  xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                     <path
                                            d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" datepicker-autohide v-model="form.when_start"
                                    :class="form.errors.when_start ? 'border-red-500' : ''"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#0032A0] focus:border-[#0032A0] block w-full pl-10 p-2.5  dark:bg-transparent dark:border-gray-400 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#0032A0] dark:focus:border-[#0032A0]"
                                    placeholder="Select date start">
                            </div>
                            <span class="mx-4 text-gray-500">to</span>
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" datepicker-autohide v-model="form.when_end"
                                    :class="form.errors.when_end ? 'border-red-500' : ''"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#0032A0] focus:border-[#0032A0] block w-full pl-10 p-2.5  dark:bg-transparent dark:border-gray-400 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#0032A0] dark:focus:border-[#0032A0]"
                                    placeholder="Select date end">
                            </div>
                        </div>
                        {{ form.when_start }}
                        {{ form.when_end }}
                        <InputError :message="form.errors.when_start" />
                        <InputError :message="form.errors.when_end" />
                    </div>

Any workaround?

NPM import does not work in Laravel 9.19

It works normally through CDN links but it does not work when I try to import it through npm. I followed the installation instructions, download and add the import declaration in "app.js", with the other packages, but I keep getting "Uncaught ReferenceError: Datepicker is not defined at :1:1".

My development environment is Laravel 9.19 and has Boxicons and Flowbite, both installed the same way and they work normally.

When using `todayHighlight` today isn't highlighted when going from selecting today to some other date

When using todayHighlight today is not highlighted when you start with today selected and then select some other date. The selected item gets the highlighted class removed, and it doesn't get added back when unselecting.

Today will get highlighted when you switch month back and forth, as this fully redraws the ui.

Issue is caused by the removal of bg-gray-100 from the selected item here:
https://github.com/themesberg/flowbite-datepicker/blob/98eccf3611605ca4ff6b2cf8a65f72d89ab6052b/js/picker/views/DaysView.js#L193C160-L193C160

Close not working using Rails 7 import maps and turbo version

We're using datepicker.turbo via import maps (https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.0.0/datepicker.turbo.js) and are seeing some strange behaviour.

On refreshing a page - which should fire off the turbo:load event - the datepicker won't close on selection of a date (i.e when you click on it in the calendar popup). Even more interesting, clicking on a date in the calendar widget highlights the previously selected date (if you click around multiple times). The date in the text box is correctly updated, but the selected date is the old value.

Escape and clicking off the widget still works.

We've tried using version 2.2.0 of the datepicker.turbo pack with the same issue.

Could this be turbo cache related? Has anyone else seen anything similar?

Edit: we've also tried to manually reinitialize the datepicker elements elsewhere in our JS but can't seem to find an exported constructor. Not core to the problem. The datepicker is being initialized, it just loses/changes behaviour after a page refresh.

Setting options when using Livewire

How can I set options on a datepicker that is already initialized ?

Using Laravel 10, Livewire 3, npm

Documentation - options are not listed

There are no listed options on documentation, you have to find it on your own