Datepicker not working as expected

[CNRP]

So i've got an input like this:

<input datepicker datepicker-autohide datepicker-format="dd/mm/yyyy" name="moving_date" id="moving-date" type="text" placeholder="Select move date">

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

The date picker works, however the datepicker-autohide & datepicker-format="dd/mm/yyyy" do not change the input at all. Any additional variable I add inside the input tag, has no effect on the actual date picker, it initialises like it is a default configuration.

All I really need to work is having the date format as the UK date format dd/mm/yyyy.

I'm using laravel10 & tailwind in the setup. I may have configured something wrong, but I'm not sure because it works, just the extra parameters don't set. Should I be adding them inside the options somehow instead?

Any help would be greatly appreciated!

[Fludem]

Pass it into the constructor, it takes a config object

const dateRangePickerEl = document.getElementById('moving-date');
                       new dateRangePicker(dateRangePickerEl, {
                           autohide: true,
                           format: "dd/mm/yyyy"
                       });

Sorry this is late, also using Laravel & Livewire and was looking for documentation :P

[raaydr]

Pass it into the constructor, it takes a config object

const dateRangePickerEl = document.getElementById('moving-date');
                       new dateRangePicker(dateRangePickerEl, {
                           autohide: true,
                           format: "dd/mm/yyyy"
                       });

Sorry this is late, also using Laravel & Livewire and was looking for documentation :P

still not working for me

[Fludem]

Pass it into the constructor, it takes a config object

const dateRangePickerEl = document.getElementById('moving-date');
                       new dateRangePicker(dateRangePickerEl, {
                           autohide: true,
                           format: "dd/mm/yyyy"
                       });

Sorry this is late, also using Laravel & Livewire and was looking for documentation :P

still not working for me

Are you seeing any console errors?

I had to put this in a component in

App.js (Vite)

import Datepicker from 'flowbite-datepicker/Datepicker';
import DateRangePicker from 'flowbite-datepicker/DateRangePicker';
window.datePicker = Datepicker;
window.dateRangePicker = DateRangePicker;

In my components blade file:

                <script>
                    const dateRangePickerEl = document.getElementById('date');
                    const inputs = [
                        document.getElementById('start'),
                        document.getElementById('end')
                    ];
                    new dateRangePicker(dateRangePickerEl, {
                        format: "dd/mm/yyyy",
                        inputs: inputs
                    });
                    document.getElementById('start').addEventListener('changeDate', function() {
                        console.log('startDate', this.value);
                        @this.set('date1', this.value);
                    });
                    document.getElementById('end').addEventListener('changeDate', function() {
                        console.log('endDaate', this.value);
                        @this.set('date2', this.value);
                    });
                </script>

[ChrisThompsonTLDR]

@Fludem, your example isn't utilizing DOM attributes to power the datepicker. You coded them into the instantiation of a new Datepicker object with:

new dateRangePicker(dateRangePickerEl, {
    format: "dd/mm/yyyy",
    inputs: inputs
});

The following code is probably what @CNRP has.

<input id="purchased_at" datepicker datepicker-buttons datepicker-format="yyyy-mm-dd" type="text" />

import Datepicker from 'flowbite-datepicker/Datepicker';

document.querySelectorAll('[datepicker]').forEach((input) => {
    new Datepicker(input, {
        //
    });
});

Using the above code, when the new Datepicker gets created, it doesn't use/read the DOM attributes datepicker-buttons or datepicker-format.

[Fludem]

@Fludem, your example isn't utilizing DOM attributes to power the datepicker. You coded them into the instantiation of a new Datepicker object with:

new dateRangePicker(dateRangePickerEl, {
    format: "dd/mm/yyyy",
    inputs: inputs
});

The following code is probably what @CNRP has.

<input id="purchased_at" datepicker datepicker-buttons datepicker-format="yyyy-mm-dd" type="text" />

import Datepicker from 'flowbite-datepicker/Datepicker';

document.querySelectorAll('[datepicker]').forEach((input) => {
    new Datepicker(input, {
        //
    });
});

Using the above code, when the new Datepicker gets created, it doesn't use/read the DOM attributes datepicker-buttons or datepicker-format.

My bad, I am an idiot I also did a quick change to my code cause I was using DateRangePicker but I am no good at JS tbh, I just knew my example worked and I'm not smart enough to know if I'm doing it correctly

[marcopolello]

Pass it into the constructor like this:

onMount(() => {
   const datepickerEl = document.getElementById(id);
   new Datepicker(datepickerEl, {
      format: "yyyy-mm-dd",
      config: {
         autohide: true,
      },
   });
});

this should solve the problem for you!

[RichardHpa]

Im getting a similar issue with react.

  useEffect(() => {
    const datepickerEl = document.getElementById(name);
    new Datepicker(datepickerEl, {
      orientation: 'bottom right',
      autohide: true,
      todayHighlight: true,
      format: 'dd/mm/yyyy',
    });
  }, []);

All the other configs work except for autohide which when I have it as true, when I select a date it doesnt close but it selects a random date on the calendar

[zoltanszogyenyi]

Hey everyone!

We released v2.4.1 and this makes the datepicker a component meaning:

• it now has its own API, methods, options via the Flowbite JS
• it is now part of the Instance Manager object
• it will work with re-initialization just like any other component

Please read:

https://flowbite.com/docs/components/datepicker/#javascript-behaviour

Cheers, Zoltan