vue-moment
vue-moment copied to clipboard
brockpetrie
Support empty values without warning
When used on a null value, logs warning into console:
Could not build a valid `moment` object from input.
I would assume that not all values are mandatory and would expect this filter to be permissive in this regard. Please remove the warning.
Possibly replace https://github.com/brockpetrie/vue-moment/blob/master/vue-moment.js#L33
if (!input || !date.isValid())
with
if (input && !date.isValid())
?
@brockpetrie have you seen this issue? When are you going to fix it? Would you approve this PR?
Thanks!
I think this logic was discussed in #29 and just quickly reading through this again, I think this is intentional behaviour.
What is your use case?
@BrockReece I agree with the logic implemented in #75, discussed in #29. I think this is great a should be supported.
However I think we should not make a warning in the browser, because this is a expected behavior and not an exception.
Right now, in a typical user interaction of my app I ended seeing something like this
My PR just remove the warning but keeps the logic.
This is the same way that works in vue-dayjs
I think this is a difference in opinion to the original issue posted. Are you worried about users seeing this warning in production?
Yes I am.
It also makes not useful our cosole log
I don't find useful this warning and this is no the standard behavior of a vue filter.
Take for example prop | capitalize. If the input is empty you just not print anything, but don't flood the console.
We could add a flag to not show this in production if that helps?
I kind of get your point, but I think this is different to something like capitalize as this plugin's logic deviates from the standard behaviour of moment to protect developers who unintentionally pass an empty input, where as moment usually considers an empty input as "now".
Which I suspect is the reason that this issue was opened...
Maybe I have not expressed myself clearly enough. I can see 3 scenarios:
- The value is filled-in and is accepted by MomentJS as valid: happy-day, output the formatted value.
- The value is filled-in and is marked by MomentJS as invalid: log warning (even error maybe?) into console.
- The value is null or undefined (or maybe empty string as well): output empty string as the result of the filter, i.e. bypass its processing by MomentJS.
The typical use case that leads me to output empty value (case 3) is as follows. Say I have a component to display a detail of an order. There is a "Date dispatched" field indicating when the ordered goods were sent to the customer. On order in status "Goods sent" this field contains a date and is processed as in the happy-day case 1. above. On an order in status "Created" however (i.e. before the goods are sent), the field "Date dispatched" is null. In such a case I want to the filter to output empty string, so that the "Date dispatched" value is empty on the screen and I DO NOT WANT any warnings to be logged into console, because this is a perfectly valid state, there is nothing wrong or even suspicious and there is no reason for overflowing the console with these warnings.
I totally agree with @ivos and I think that is the best solution pruposed.
A warning make sense when a date is invalid. However when the string is empty it should not warm. And this way we don't get 5000 warnings in our Dev Console.
Thanks for clarifying @ivos, your first comment (and the 1st PR on this thread) suggest logic changes that would break case 3 in your scenario above, as without catching an empty input, moment will assume you meant 'now'.
Though if this is just about suppressing the warning log, we can easily either:
- Separate the if statements and handle invalid and empty inputs differently.
- Surround the warning in an additional if statement.
- Only fire if certain env or option flag is set (debug mode?)
- Just get rid of the warning all together (#91) and rely on moments error messaging.
Does anyone have any preference?
I have the preference that don't relay on certain env variable. I would rather don't have to mess with lots of logs, just to be ignored, during dev process.
I think that the default behavior should be no warning. Especially in development mode when I am looking at the console and I want to see it empty (or at least uncluttered), so that I know there is no real problem.
Can't see any reason why would anyone want to turn this warning on (case 3.) even in debug mode, but then I admit not to know everything :) So as long as by default it will be off, an option to turn it on explicitly wouldn't hurt.
We can probably take the training wheels off and kill the console warning; let Moment do its own logging.
In terms of what inputs should be valid vs not valid, we should probably just allow all inputs and let moment dictate validity:
null values = invalid, exit filter
undefined values = valid, proceed with filter (datetime will be set to current datetime)
empty strings = invalid, exit filter
This means we can simplify to:
if (!date.isValid()) {
...
}
which is essentially the approach taken in #81, although it goes a bit too far by guarding for invalid inputs rather than letting Moment do the lifting.
Unfortunately, this is a breaking change and requires a full version bump.
@brockpetrie please allow to turn on the warning with an option. This is not a breaking change and should allow you to release it quick. Regarding the allowed input and converting null/undefined to empty strings, I can just use a filter in the chain before moment. Something like:
Vue.filter('nullToEmpty', function(value) {
return value == null ? '' : value
})
This will catch both null and undefined and transform them to ''. This will cause moment filter to just return the empty string instead.
I support the "quiet fail" of null, undefined, and empty string when trying to be formatted with the filter. I would expect the output to also be an empty string
I suggest adding an additional optional "strict" parameter for the filter such that use can decide whether accept null for the input
Need an update on this, is there a way to turn the warning off in Nuxt JS
Bad bad bad((( I hoped it fixed. But why so long((( just turn of error in console
After some upgrade this filter stopped reflecting MomentJS locale. Creating this 9-line filter in main.js covered all my requirements, quit nagging me in the console AND respects the locale set in MomentJS:
import moment from 'moment'
Vue.filter('moment', function (value, format) {
if (value === null || value === undefined || format === undefined) {
return ''
}
if (format === 'from') {
return moment(value).fromNow()
}
return moment(value).format(format)
})
Ditched this library and never looked back.
Thanks @ivos ...ditching this library as well. Your solution does what I need without the console noise.
Ditching this library too @ivos, thanks for that tip. That does exactly what is needed, this library is useless when using nullable data.
@datrinh Just use @ivos solution above. It is simple and renders this package useless.
In my case, I wouldn't to show the message "Invalid Date", I want just no message. So I modified the @ivos solution:
Vue.filter('moment', function (value, format) {
if (value === null || value === undefined || value == '' || format === undefined) {
return ''
}
if (format === 'from') {
return moment(value).fromNow()
}
return moment(value).format(format)
})
Thank you for this!
And I can't believe it is still the case a year and a half later :(
There is no point to needing this package... just use the solution above.
tx. came to that conclusion myself. used a method with native moment. i assume that is just as performant.