Date format doesn't appear to be used/applied

[nickalbrecht]

Trying to customize the date control to use a custom format. For example to get a date to look like "Sept 15, 2021". However, after picking the date, it shows as "9/15/2021". Doesn't seem like it's using the custom date format at all. Not entirely sure if I'm using the correct options to specify a format, but I used the documentation as much as possible to get this far.

https://stackblitz.com/edit/js-aqvqwe?file=index.js

[akbaryahya]

so this is a bug? in previous version v4 i used like this

$('#set_start').datetimepicker({ format: 'YYYY-MM-DD HH:mm', defaultDate: moment().add(-1, 'hours').format('YYYY-MM-DD HH:mm'), });

in latest version (v6) it doesn't work even when trying code something like

new tempusDominus.TempusDominus(document.getElementById('set_start'), { //format: 'YYYY-MM-DD HH:mm', display: { inputFormat: 'YYYY-MM-DD HH:mm' }, //defaultDate: moment().format('YYYY-MM-DD HH:mm'), });

I'm confused

[Eonasdan]

Hello. Please try your config with this stackblitz. I believe I've fixed this in the v6-next branch, which I'll publish soon.

There was an issue with the docs and the inline and inputFormat options where in the wrong place.

I've changed inputFormat in this next release to be a function instead of a string. Hopefully, this will let people use heavier date libraries like moment/dayjs for more complex formatting without making the library dependent on them. Notice that these options are under hooks not display. The following docs will be in places once I merge this.

hooks

inputFormat

Accepts: (date: DateTime) => string or undefined Defaults: undefined
Takes a function that turns the selected date(s) into a string. If not provided, Intl formatting will be used based on configured components.

Whenever the picker attempts to set the input value from a selection, it will call this function. An example that would set the value to an ISO string. Obviously, it's up to you how you want the results to be displayed.

inputFormat:(date) => { return date.toISOString() }

	

inputParse

Accepts: (value: any) => DateTime or undefined Defaults: undefined
Takes a function that turns the input value into a DateTime object. If not provided, the internal parsing method will be used.

Whenever the input value changes, this function will be called. The most simple example is just to attempt to parse the string.

inputParse: (value) => { return new tempusDominus.DateTime(value) }

	

[nickalbrecht]

I tried your example, and hit an error. When I've cleared the contents of the textbox after it has previously held a date, I get an error about date.toISOString is not a function. Should the TD code calling the inputFormat function when the date param is empty, or is that up to the implimentation inside of the inputFormat?

[nickalbrecht]

There's an issue somewhere in there too. I have no options set for the following explanation. If I type into the field Sept 1, 2021, and hit tab, it gets rewritten as 09/01/2021, 12:00 AM. If I then delete the text in the input box, and type Sept 1, 2021 in again, then hit tab, nothing happens. it stays as I entered it.

[Eonasdan]

I could add a check internally for an empty value, but I would think it would be up to the function to check that first and return an empty string. Otherwise, if you wanted to force a value on empty.. I guess you could listen to the change function.

For you second issue, I think is because I provide a basic input format based on the selected components and then use Intl to format the date. E.g. Intl.DateTimeFormat('default', clickmeFormat).format(new Date('Sept 1, 2021'))

[nickalbrecht]

I think you're right, that makes sense that it'd up to the implementation of inputFormat to determine how to handle nulls.

[nickalbrecht]

The issue I was trying to describe is that, when typing a custom date (like "sept 1, 2021"), it gets parsed and then formatted as "09/01/2021, 12:00 AM", totally fine. But if I then delete the textbox's contents, and type in the same date "sept 1, 2021", it tries to parse it, but doesn't call inputFormat, because it's the same date as before. So it stays as "sept 1, 2021" instead of applying the expected format.

[Eonasdan]

Hello. Please check the preview branch again. That stackblitz should still work, though you might have to clear your cache.

Originally there was code to ignore the change if the dates evaluated to the same. I've changed this a bit so it will still update the input field regardless.

[nickalbrecht]

Yup, it seems to be working now, and applies the format even if it's for the same date. I did have to clear/disable caching to get it to update to the most recent version.