First click on datepicker in Chrome browser does not show today's date

#1

Coincidentally only a few days ago I noticed that there suddenly is a problem that did not exist before.
When - using Chrome - I click into the datepicker input control the datepicker appears with today’s date highlighted. When I click on date of today this date should appear in the datepicker input control as well as in the next control. Now these controls remain empty while the debugger tells me the date I clicked. In order to get the clicked date of today finally displayed I need to click e.g. the day before today. Then the clicked date will be displayed. Only after this detour I can click on today and get today’s date displayed.

After I had the cache cleared the app worked with today’s date immediately. So I thought the cache could have been the proble

TodayNotShown
TodayNotShown.gif608×1068 3.48 MB
m. But the next day I tried the issue with today’s date appeared again, with Chrome.
No problem when I use Edge. When I run the web app within Edge, I get today’s date displayed on the startup screen, as expected and intended, and hitting the current date in datepicker displays the current date at once.
Any ideas what happens with Chrome, current version, and how one could repair this?
Animated gif attached.

#2

Which datepicker control are you using?

#3

Thanks.

tempusdominus with momentjs

I think I found a solution.
When I force (hard reload) clearing cache and update with the circle symbol Chrome provides, the datepicker input appears with date of today and the first click on highlighted 8 will do. This is good enough for me. I am afraid the typical user will just see that the app is not working and leave the site.

#4

@Leader
Super Auto Refresh Plus
extension for Chrome does it too, even better than Chrome hard reload, because it works at once. No need to use reload symbol.

#5

@Leader
Inserting

<meta http-equiv="cache-control" content="no-cache">

at extraHeaders (my idea: for users who do not know about hard reloading)
did not help. Only worked once.

#6

This might be something to ask the developers of TempusDominus about.

#7

Seems to be solved.
If of relevance for somebody:
Had to change input control datetimepicker1 property class from datetimepicker-input to datetimepicker (w/o -input). Solves the problem with Chrome.

#8

Is the hyphen being interpreted as SUBTRACT operator?

#9

class was

class is now solely:
datetimepicker

That’s all I know.

#10

I was thinking more of [datetimepicker-input] to allow for the hyphens in the class name.

#11

Sorry. Possibly again my copy and paste action had not worked. New try:
One of the classes I had entered was datetimpicker-input. One of different suggestions in a tempusdominus forum was to use just datetimpicker. Do you mean that adding [ ] would have been a better solution? I am clueless about this.

#12

I have no experience with this class, so what is best for your usage was not my answer. At this point, if it works for you on all platforms, then go for it. I was just mentioning that hyphens in class names can be interpreted in some cases as a subtraction operator and drive you crazy when debugging.

#13

I indeed expected a bit what you explain. Only I never had noticed that there could be a problem with hyphens in a class name. I think I should expand my research and knowledge about this. Thanks for this hint.

#14

@GaryGorsline: Highly interesting. Just for fun I tried the square brackets. Killed even the design screen. Finally found that e.g. w3schools say Hyphens in HTML and CSS:

HTML5 attributes can start with data- (data-quantity, data-price).
CSS uses hyphens in property-names (font-size).
Hyphens can be mistaken as subtraction attempts. Hyphens are not allowed in JavaScript names.

So I just learned something I had not been aware of. Thanks again.

#15

Ahhh - thanks for the clarification - we’re all learning :slight_smile: