New plugin system for date formatting issue

[scoldwell]

• macOS 12.3
• Chrome 99.0.4844.83
• tempus-dominus 6.0.0-beta4

Prior to the new plugin system, we were able to set date formats on a per-instance level using inputFormat and inputParse in the hooks section of the options:

$('dateField1').tempusDominus({
    hooks: {
        inputFormat: (context, date) => { return moment(date).format('MM/DD/YYYY'); },
        inputParse: (context, value) => { return moment(value, 'MM/DD/YYYY').toDate(); }
    }
});

$('dateField2').tempusDominus({
    hooks: {
        inputFormat: (context, date) => { return moment(date).format('MM/YYYY'); },
        inputParse: (context, value) => { return moment(value, 'MM/YYYY').toDate(); }
    }
});

Now that hooks have been removed from the options there is no way to set formatting except globally using the extend method on the module itself:

<script src="/path/to/plugin.js"></script>

tempusDominus.extend(tempusDominus.plugins.moment_parse, 'MM/DD/YYYY');

$('dateField1').tempusDominus({
    // how to change the format?
});

$('dateField2').tempusDominus({
    // how to change the format?
});

This makes it impossible to have 2 fields on the same page with separate date formats (for example, one field with a full date and another with just month and year). The plugin documentation states that this should be possible, but I don't see how:

Plugins allow you to extend the picker by adding new functionality to either Tempus Dominus globally, a single picker or by overwritting existing functionality.

[Eonasdan]

You can still do the same thing per picker if you want

const td = new tempusDominus.TempusDominus(
  document.getElementById('datetimepicker1'),
  {
    //put your config here
  }
);

td.dates.formatInput = function(date) { {return moment(date).format('MM/DD/YYYY') } }

[scidec]

What would be the equivalent for inputParse hook in this example?

[scidec]

I might have to revert code and use the hooks again - Android Chrome browser raises exception of no extend method. So the plugin I have working on Chrome (Windows) does not work on a phone. The previous release worked on both.

[Eonasdan]

@scidec are you sure you have the latest? setFromInput is the equivalent. See the moment example. I need to make the docs more clear.

[scidec]

Yep, definitely do have the latest but sorry if I am not clear. Can you provide a sample for setFromInput please, to be used in a similar example to the above (not a plugin)? Also, android phone always says no extend method (with the latest code and with a plugin that works on a desktop).

[jcompagner]

this fails if the input already has a value that default parser can't parse, because the input is processed at construction time..

[scoldwell]

Got it. Thanks. Can this be added to the docs?

[Eonasdan]

Yes. I was just doing that 😁.

[rhousham]

Hi I'm confused as well, I want to set the formatting but I can't see how currently I'm using the jquery plugin.

$(".datepicker").tempusDominus({
               
               Dates.prototype.setFromInput: function(date) { { return moment(date).format('MM/DD/YYYY') } },
               display: {
                   icons: {
                       time: "bi bi-clock",
                       date: "bi bi-calendar",
                       up: "bi bi-arrow-up",
                       down: "bi bi-arrow-down",
                       next: "bi bi-arrow-right",
                       previous: "bi bi-arrow-left",
                       today: "bi bi-calendar-check",
                       clear: "bi bi-trash",
                       close: "bi bi-x"
                   },
                   buttons: {
                       today: true,
                       clear: true,
                       close: true,
                   }
               },
               stepping: 5
           });

But yeah, I can't do it that way?

[rhousham]

Ok, so basically I've sorted this out (sort of)

 var ele = document.getElementsByClassName("datepicker");
            for (var i = 0; i < ele.length; i++) {
               
                var td = new tempusDominus.TempusDominus(ele[i], {
                    display: {
                        icons: {
                            time: "bi bi-clock",
                            date: "bi bi-calendar",
                            up: "bi bi-arrow-up",
                            down: "bi bi-arrow-down",
                            next: "bi bi-arrow-right",
                            previous: "bi bi-arrow-left",
                            today: "bi bi-calendar-check",
                            clear: "bi bi-trash",
                            close: "bi bi-x"
                        },
                        buttons: {
                            today: true,
                            clear: true,
                            close: true,
                        },
                        components: {
                            clock: false
                        }
                    },
                    stepping: 5
                });

                td.dates.formatInput = function (date) { { return moment(date).format('DD-MMM-YYYY') } }

                var m = moment(ele[i].value, "DD/MM/YYYY").toDate();

                td.dates.setFromInput(m);
            }

So basically if you want to use formatting you have to take the date set and then set it back.

[FredDut]

We need to check if the input is empty:

var ele = document.getElementsByClassName("datepicker");
            for (var i = 0; i < ele.length; i++) {
               
                var td = new tempusDominus.TempusDominus(ele[i], {
                   localization: {
			locale: 'fr',
			startOfTheWeek: 1
		},
		restrictions: {
			daysOfWeekDisabled: [0, 6]
		},
		display: {
			viewMode: 'calendar',
			components: {
				decades: true,
				year: true,
				month: true,
				date: true,
				hours: false,
				minutes: false,
				seconds: false,
			},
                });

                td.dates.formatInput = function (date) { { return moment(date).format('YYYY-MM-DD') } }
               if (td.dates._dates[0] !== undefined){
                     var m = moment(td.dates._dates[0]);
                     td.dates.setFromInput(m.format('YYYY-MM-DD'));
               }

       }

[jcompagner]

this keeps being a problem for us when we moved the formatting/parsing hooks from the config to a plugin system
Because there are various issues with this plugin system thing

1> class level is absolute no go for us, because formatting/parsing is instances specific. we would leak stuff

2> instance level has this problem:

Error: TD: Could not correctly parse "19-03-2006 18:00" to a date for input.
at ErrorMessages.failedToParseDate (tempus-dominus.esm.js:524:1)
at OptionConverter.dateConversion (tempus-dominus.esm.js:1262:1)
at Dates.parseInput (tempus-dominus.esm.js:1524:1)
at Dates.setFromInput (tempus-dominus.esm.js:1537:1)
at TempusDominus._inputChangeEvent (tempus-dominus.esm.js:3282:1)
at TempusDominus._initializeInput (tempus-dominus.esm.js:3584:1)
at new TempusDominus (tempus-dominus.esm.js:3307:1)
at ServoyBootstrapCalendar.initializePicker (calendar.ts:106:27)
at ServoyBootstrapCalendar.svyOnInit (basecalendar.ts:70:14)
at ServoyBootstrapCalendar.initializeComponent (basecomponent.ts:133:18)

because we can only initialized the parse/format after we already have the instance:

        this.picker = new TempusDominus(this.getNativeElement(), this.config);
        this.picker.dates.formatInput =  (date: DateTime) => this.formattingService.format(date, this.format, false);
        this.picker.dates.parseInput =  (value: string) => {

but the constructor already tries to parse stuff. but i couldn't have set it yet..

If i could just push the formatting as before with the "this.config" all problems would be gone..

Now i really need to work around it by making sure the input doesn't have a value yet and so on, which are all hacks and workaround around the problem that we cant initialize, configure a instance of the picker correctly at construction time.

[Eonasdan]

Please see this issue: #2537

[Eonasdan]

I'm working on a complete and better solution to this. I put a lot of work into emulating some stuff that dayjs is doing. Please see this ticket for more info. #2537