# How to disable datepicker dates via function?

**URL:** <https://forum.shopware.com/t/how-to-disable-datepicker-dates-via-function/91371>\
**Category:** Shopware 6 (English)\
**Created:** [9. November 2021 um 11:37 UTC](https://forum.shopware.com/t/how-to-disable-datepicker-dates-via-function/91371 "2021-11-09T11:37:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hasan.h](https://avatars.discourse-cdn.com/v4/letter/h/e56c9b/32.png) [@hasan.h](https://forum.shopware.com/u/hasan.h)\
**Post date:** [9. November 2021 um 11:37 UTC](https://forum.shopware.com/t/how-to-disable-datepicker-dates-via-function/91371/1 "2021-11-09T11:37:55Z")

</div>

Hello. I understand that sw-datepicker uses flatpickr and according to flatpickr, dates can be disables via functions. I want to do the same thing but sw-datepicker uses objects to take custom configurations in twig file. An example is the one below

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/b/b79d8d2c2d776035a79cbf4bfab6cb43c79b107a.png)  
How can I use a function within this twig to disable dates (for example to disable certain days of week etc), as shown in the flatpickr documentation:

> **[flatpickr](https://flatpickr.js.org/examples/)**

---

<div class="post-metadata">

**Author:** ![Dennis86](https://avatars.discourse-cdn.com/v4/letter/d/a9adbd/32.png) [@Dennis86](https://forum.shopware.com/u/Dennis86)\
**Post date:** [31. März 2022 um 12:49 UTC](https://forum.shopware.com/t/how-to-disable-datepicker-dates-via-function/91371/2 "2022-03-31T12:49:46Z")

</div>

Same problem here, can’t seem to find out how this works using the documentation.  
Did you already solve the issue?

---

<div class="post-metadata">

**Author:** ![roeding](https://avatars.discourse-cdn.com/v4/letter/r/c68b51/32.png) [@roeding](https://forum.shopware.com/u/roeding)\
**Post date:** [18. Juli 2024 um 14:20 UTC](https://forum.shopware.com/t/how-to-disable-datepicker-dates-via-function/91371/3 "2024-07-18T14:20:42Z")

</div>

I did this ungodly abomination in js plugin that you guys could probably refactor to be a better:

```
  disableSaturdaysAndSundays() {
      const days = document.getElementsByClassName('flatpickr-day');
      for (let i = 0; i < days.length; i++) {
         const day = days[i];
         if (day.classList.contains('flatpickr-disabled')) {
           continue;
         }
        // TODO fix this bullshit
        if (i == 11 || i == 12 || i == 18 || i == 19 || i == 25 || i == 26 || i == 32 || i == 33 || i == 39 || i == 40 || i == 46 || i == 47) {
             day.classList.add('flatpickr-disabled');
          }
        }
     }

```

after this do this in your init function:

```
        const targetNode = document.getElementsByClassName('flatpickr-days')[0];

       // Options for the observer (which mutations to observe)
        const config = { childList: true };
        
        // Callback function to execute when mutations are observed
        const callback = (mutationsList, observer) => {
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    this.disableSaturdaysAndSundays();

                }
            }
        };
        
        // Create a new observer instance linked to the callback function
        const observer = new MutationObserver(callback);
        
        // Start observing the target node for configured mutations
        observer.observe(targetNode, config);

```