How to set Flatpickr to inline mode in NinjaForms (WordPress)

Question

I have a NinjaForm with a datepicker. NinjaForms uses flatpickr for that.

I try to set the datepicker to "inline calendar mode".

Inline Calendar Display the calendar in an always-open state with the inline option.

{ inline: true }

I don't get how I can apply flatpickr settings to the NinjaForms flatpickr.

I tried this:

   var customDatePicker = Marionette.Object.extend({

        initialize: function() {
            // Listen to our date pickers as they are created on the page.
            this.listenTo(Backbone.Radio.channel('pikaday'), 'init', this.modifyDatepicker);
        },
    
        modifyDatepicker: function(dateObject, fieldModel) {
    
            dateObject.set(
                "inline", true
            );
            
        }
    });

UPDATE: This works with Ninja Forms:

var fpConfig = {
    inline: true,
};
$("#nf-field-8").flatpickr(fpConfig);

But I'm not happy yet, because I would like to apply it via dateObject.set().

Answer 1

Maybe not an optimal solution and a bit late, but I had the same problem.

We use the Advanced Datepicker addon from NinjaForms and when looking through the source code I noticed that the inline function is present as an option for the field, but commented out. I commented in the lines and a toggle also appears within the date field in the backend. So you can decide per date field if this should be displayed inline or not.

In the frontend the datepicker is now also output inline, so far I haven't found any errors as to why the option was commented out.

The file can be found here: wp-content/plugins/ninja-forms-advanced-datepicker/includes/class-fields-date.php