-
-
Notifications
You must be signed in to change notification settings - Fork 4.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Date format changes when the date is entered in the input field #2537
Comments
I have exactly the same problem, as I want to display dates which come from the db, I've tried to do so by using the "defaultDate" param, unfortunately this doesn't fill in the date into the input field anymore, therefore I tried filling in the input field's "value" param with the database value "manually" which results in exactly the same behaviour as mentioned above. Mac OS 12.3.1 |
I have the same problem with some dates that gets to the input already formatted, like 09/05/2022 for May 9th and it gets swapped to 05/09/2022. Came here to look for a solution, and indeed, that's an incredibly annoying bug, you CAN'T enter a date by hand as it will get swapped immediately! I think this should be considered critical, tbh, as a basic behavior (entering by hand, or copy-pasting something like 09/05/2022) simply won't work! I mean, go click today's date, click out. Come back in, add a space, click out - it switched. And you can do it again, and again, and again.... It's kinda addictive but it misses the point, right? |
I do not experience this issue. What's your browser's locale? You can find this easily by going to this stackblitz |
I can confirm that if I simply add a space on the stackblitz it switches day and month. |
Hey, I have a similar problem. Because my browser's locale is
What happens is:
Am I missing something here? |
Same issue for 10 MAY -> 12 MAY for myself too. |
The issue here is that the native javascript date object is dumb and extremely limited. If you did I choose not to force an external date library (dayjs/moment/etc.) to avoid the extra dependencies and to make it easy to go from 4/5 => v6. The problem is that my date extension is not as robust as one of those libraries. I see three solutions to this:
It's easy for me to recommend (1) because it doesn't add any work for me 😁 . I'm leaning towards (2). This means that I also have to make sure the picker is able to parse those formats. |
Please take a look at this. I found some code that tries to guess the locales default format. Let me know your results. |
Hey, thanks :) I will try it next week somehow. And yes I agree, (2) is the best option. Or at least document the issue in the docs and give examples on how to resolve it with (1). |
You can look at the plugin docs here for an example of the overwriting a function. |
Hey @Eonasdan the fix with the momentjs plugin solved the problem, but we have the problem that we uses multiple configurations (datepickers with and without seconds for example), but this fix will parse all with/without seconds. The strangest thing is that I use the 'nl' locale in the datetime picker setup with: When I use a en-GB browser it won't format it correctly but with a 'nl' browser it will parse the dates correctly. I think option 2 would be the best for all people who want to use your library. |
@duvel3 you don't have to use moment btw, you can use dayjs or whatever. If you aren't using moment for anything else, I'd highly recommend you use dayjs instead. You can use the plugin as an example for how you could make this work. If you took the parsing bits outside of the plugin you could do what you needed per picker. There's also a Please take a look at this. I am trying to figure out if this code is smart enough to properly figure out a format string. |
Hello @Eonasdan, having the same issue I tried to follow various suggestions but I can't still figure out how to solve the problem. My browser in in English, but I need to have the date in Italian for my customers. I set the date in the picker configuration: `var itLocale = {
` Everything in the picker is in Italian and as long as I select the date via the picker everything works. When I manually input a date in the input field, it gets reversed in "MM/DD/YYYY". I then overrided the formatInput function with moment: while manually inserting the date in "DD/MM/YYYY" format in the input field results in a date object in this function that is already wrong, for example if I change the date and insert tomorrow, I get: Being the date object already swapped the format function can't solve the problem. If the day is under 12 it formats the date in the wrong way, otherwise it gives an error. Because the date gets here already I am attaching three screenshots to show you the sequence. In the first one I selected the date via the picker, in the second one I manually change the day and it shows just before I exit the field. The third one is what happens as soon as the field losts focus and the inputFormat gets activated. Am I missing something? There should be something I didn't understand of the whole process. . |
What I need people to do is take a look at this. I am trying to figure out if this code is smart enough to properly figure out a format string.I added a textbox to make it easier to change what locale the code uses. |
Please test this outPlease go to this stackblitz and try a couple of date/times and formats. I've borrowed a bunch of code from a dayjs plugin that allows you to provide a string date and a string (or array) of formats. The localization object will be updated with some defaults. I don't know if I will use the guessing code from before or not. If a couple of you can verify what this code does, I'll either add it directly the the DateTime object or it will be a plugin. |
Okay, I tested a bunch of dates in my french browser. All good with the format provided. I think the best would be adding guess capabilities but allow for a format to be submitted as well to force the issue. Great work! |
Thanks for helping me test this @JerryBels How about it @duvel3 @eryx12o45 @DragosChirila @Konstanty @fgiamma ? |
yeah i think that could also work for us, if we can overwrite it at class level but then get enough state through the config to do our own parsing at the instance. So yes if we can set our format string in the config.localization and we can get that on the "this" again on in our format/parse functions then this could work but: The problem i still have with overwriting classes is who will be able to do that, we have many packages that don't know each other and all of those packages could use in 1 form or the other a calendar. So who is going to overwrite it at the class level in this instance? is it Package 1? or is it Package 2? What happens if i use another 3rd party thing that uses your component and does this overwrite? Then will be overwriting it again... or it depends who goes last.. So i still think i cant use this class level overwrite. i need it to be at the instance level. because i just can do this because i have no idea for which thing i would then also change it... This override of classes is really a bad thing in some projects, that are really a lot of stand alone packages that don't know each other.. Right if you are in a small project and you dictated everything that it works fine. because there is only 1.. |
Sorry, was out in vacation... For me the last stackblitz seems to behave correctly. |
This is now in the v6 release. I need to write up examples and docs for the plugin. |
clear button don't work with customDateFormat plugin, see example here reason by this logic
|
Thanks I'll take a look |
dates.parseInput isn't work with customDateFormat plugin see https://stackblitz.com/edit/tempus-dominus-v6-simple-setup-import-hjto8w?file=index.js |
I have a fix in but another npm package randomly disappeared and now github won't build the project. I'll try to get some time to fix this. |
Hi 6.0.1 has been release. Please check that out @hieplq |
Hello, Ales
|
I don't know if I'm making a mistake somewhere, but it continues to give me an error in the same way. my lang files `const name = 'tr';
}; I tried this ` tempusDominus.loadLocale(localization)
` When I use the selector, it works properly as DD.MM.YYYY, but when I manually input on it, the month and day are swapped. It changes month to day and day to month. (MM.DD.YYYY) |
The docs have been updated with examples using the plugin. https://getdatepicker.com/6/plugins/customDateFormat.html |
Showing error "Uncaught Error: TD:: "localization.format" in not a known option." |
@shamarin Please make sure you have the latest version and that you've loaded the plugin. If you've done both of those things, please fork one of the example stackblitz |
@shamarin
The problem is that this localization does not contain a format property and the check for know properties is done against DefaultOptions So I solved it by adding |
@Eonasdan so I updated it on my main project, and everything works fine. Except that I have an issue. I'm building JS dependencies with Webpack (tried with Vite as well, same problem). So in my main JS file :
This will get compiled into a single JS file along with the rest of my imports. The issue is, each import is "isolated" from the rest of the code, which usually works great. But here when opening a page with a datepicker, I get Anyway, you got any idea how I could fix this? And thanks for the plugin, you rock :) |
@JerryBels The problem is webpack assuming customDateFormat has a default export.
I solved it by doing
|
@Eonasdan An error occures if to set default location globally |
With new build it's fixed. |
this.errorMessages.customDateFormatError is not a function still occurring in v6.2.6. To reproduce: in the example: https://getdatepicker.com/6/plugins/customDateFormat.html enter an invalid date in the picker textbox. |
@mvxproject this is fixed in the |
I can't make this plugin work on my inputs. They interfere at each other.
I tried with
It's weird for me how could a simple thing be so complex. Can you help? |
@albanafmeti please open a new issue. |
Bug reports must include:
Windows 10 19044.1586
Microsoft Edge 100.0.1185.29 (Official build) (64-bit)
tempus-dominus 6.0.0-beta5
When the date is entered by hand (so when you not use the date picker) then the month/day gets swapped each time the entered date exists (so 04/12 will be swapped to 12/05 instead of 05/12, but 13/12 will correctly be formatted to 14/12).
I can reproduce the issue with all datepicker examples on your site except the Linked pickers, which doesn't swap.
As seen on the image below, I only changed the day (04 to 05 to 06), but the datetime picker swaps the day and month on each edit. This issue does only occurs when the date is manually edited in the field.
The text was updated successfully, but these errors were encountered: