updateOptions changing theme not working

[stijn7621]

Prerequisites

• [X] I have searched for duplicate or closed issues.
• [X] I have validated my setup against the latest version on StackBlitz.
• [X] I have read the contributing guidelines.
• [X] I understand that only sponsored issues will be worked on and that if I wish to sponsor an issue, I will contact the owner FIRST.

Describe the issue

After I try to toggle the theme from 'light' to eg. 'dark' using the updateoptions function within one of the subscribed events it seems not to be updating the datepicker itself.

StackBlitz fork

https://stackblitz.com/edit/tempus-dominus-v6-simple-setup-z8sshh?file=index.html

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of are you using? You can find this information from the sample StackBlitz.

v6.9.4

What your browser's locale? You can find this information from the sample StackBlitz.

nl-NL

[William-H-M]

Can you please show us how you're doing it?

Because the way I'm doing it works as expected, this is the way:

import { TempusDominus } from '@eonasdan/tempus-dominus';

const changeOptionsButton = document.getElementById('changeOptions');
const settingOptionsPicker = new TempusDominus(
  document.getElementById('datetimepicker1'),
  {
    display: {
      theme: 'dark', //default theme
    },
  }
);

let on = false;
changeOptionsButton.addEventListener('click', () => {
  settingOptionsPicker.updateOptions({
    display: {
      theme: on ? 'dark' : 'light',
    },
  });
  on = !on;
  changeOptionsButton.classList.toggle('btn-primary');
  changeOptionsButton.classList.toggle('btn-secondary');
});

You can try this code either in the StackBlitz or in the REPL , in both should work

[stijn7621]

Check example https://stackblitz.com/edit/tempus-dominus-v6-simple-setup-z8sshh?file=index.html

[William-H-M]

Ok I can see kinda what's different with yours, thing is the event you're subscribing to is done after the display so it kinda doesn't render the way you want to.

You can see that the shown event happens first than the click event add this line

element.addEventListener("show.td", (e) => console.log("displayed"))

It's a weird way for you to do it, as the change of the is usually dependent on another button and not directly done when clicked on the display element.

Anyway, I consider this to be a non issue, @Eonasdan may close this