Comments (3)
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
from tempus-dominus.
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
from tempus-dominus.
Check example https://stackblitz.com/edit/tempus-dominus-v6-simple-setup-z8sshh?file=index.html
from tempus-dominus.
Related Issues (20)
- Markup input value not load correctly when use time with meridiem p.m. HOT 2
- Call with Classname not with only ID HOT 2
- minDate option Error: this.optionsStore.options is undefined HOT 1
- ❗No new feature requests❗
- Localization: Croatian and Serbian HOT 1
- Initialising picker with stepping of 0 causes time format error
- Unable to parse date range from input value HOT 2
- viewDate is overriden by minDate HOT 2
- maxDate not selectable HOT 4
- Module parse failed when using Encore/Webpack
- Config by attribute is not working: ex. Restrict by dateMin HOT 2
- "Short Weekday" (ddd) throws error when setting the value in the text input HOT 1
- _dateToDataValue() should not use formatted month and date HOT 1
- Error with Sass Loader
- Difference between documentation and actual behavior of restriction options for dates HOT 1
- Typescript interface Options differs from Docs HOT 1
- errors.ts:108 Uncaught Error: TD: No element was provided on Stackblitz example code HOT 3
- Error when trying to change AM/PM before selecting a time
- Incorrect behavior when entering an invalid date
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tempus-dominus.