Min And Max Date With Date Format In Elementor Form Not Working

You are using this flatpickr, right?

So I don’t use Elementor and therefore, I haven’t tested this with Elementor or an Elementor form. However, from what I could see, all you need to do to make both the minDate and dateFormat work, is add this:

if ( self.settings.dateFormat ) {
    pickerSettings.dateFormat = self.settings.dateFormat;
}

above this line:

self.modifyPicker( picker, pickerSettings );

Because your Min & Max Date Code is currently only accepting certain (or more precisely, just two) custom settings, namely minDate and maxDate; hence, for other settings, you’d need to manually add them just as in the above example.

And that limitation can of course be removed, but I’m assuming there’s a good reason why you (or the script’s author) designed the script like that, so I’ll let it be so. 🙂

So with the above addition (pickerSettings.dateFormat), the following dateFormat should now work:

limitFlatPicker.init( {
    minDate: new Date(),
    selector: '#form-field-form_field_date',
    dateFormat: 'd/m/Y' // this should now work with minDate
});

Additional Notes

1. JS tip: Instead of the array notation, you should use the dot notation, e.g. pickerSettings.minDate and not pickerSettings['minDate'].

2. Another JS tip (for flatpickr v4): The true as in maxDate: true would result in a JS error in the console (because true is not a valid date), so you should just use maxDate: ''. Well, '' isn’t a valid date, but empty values are ignored by flatpickr. (i.e. exempted from being parsed into a date)

Update

So in the comment you asked: “Can you please tell how the add disableMobile: "true" in this code?“

And as I said in the original answer, you basically just need to add the following if block above the self.modifyPicker( picker, pickerSettings );:

if ( undefined !== self.settings.<setting name> ) {
    pickerSettings.<setting name> = self.settings.<setting name>;
}

Or as I also said, you can remove the limitation (i.e. make it easy to set your custom settings for flatpickr) and here’s one way of doing so: just replace the entire callback: function() { ... } with this:

callback: function() {
    var self = limitFlatPicker;
    $( self.settings.selector ).each( function() {
        self.modifyPicker( this, jQuery.extend( {}, self.settings, {
            selector: null,
        } ) );
    } );
}

And regarding the disableMobile setting, I don’t know if setting it to true (it’s a boolean true, not the string 'true', although that would also work) will work with your theme or form because it all depends on the theme and plugins you’re using. So you’ll just have to try & test that setting on your own. However, you should check the mobile support info on the flatpickr site and you can find all the available settings and the proper value for each setting here.

Update 2

Actually, there’s no need to call the modifyPicker() method from the callback() method, so in that callback(), just call flatpickr() like so:

callback: function() {
    var self = limitFlatPicker;
    $( self.settings.selector ).each( function() {
        flatpickr( this, jQuery.extend( {}, self.settings, {
            selector: null,
        } ) );
    } );
}

Or with your original code — but after adding both the pickerSettings.dateFormat and pickerSettings.disableMobile, use flatpickr( picker, pickerSettings ); and not self.modifyPicker( picker, pickerSettings );.

And that (i.e. calling flatpickr() directly) should fix this: “The main problem is that the dateFormat is working correctly in Desktop but in mobile it is not working.“.

Additionally, I noticed a major issue with your waitForFlatpicker() method, so you should instead use the following init() and waitForFlatpicker() code:

init: function( options ) {
    // [1]: Pass {} as the first arg so that this.defaultSettings doesn't get modified.
    this.settings = jQuery.extend( {}, this.defaultSettings, options );

    if ( this.settings.minDate || this.settings.maxDate ) {
        // [2]: Pass the 'options' and not this.callback
        this.waitForFlatpicker( options );
    }
    // there should be an 'else' here, but I assumed it's not necessary...
},
// [3]: The first arg is 'options' and not 'callback'
waitForFlatpicker: function( options ) {
    if ( typeof window.flatpickr !== 'function' ) {
        setTimeout( function() { limitFlatPicker.waitForFlatpicker( options ); }, 100 );
    }
    else { // [4]: Make sure there's an 'else'.
        this.settings = jQuery.extend( {}, this.defaultSettings, options );
        this.callback();
    }
},

Working Demo (on JS Fiddle)

Not an Elementor form, but you’d see the minDate, dateFormat and disableMobile all working good in this fiddle — the first input should look the same on both desktop and mobile devices.

And by the way, I used a different callback() code there and you’d want to use it if you want to allow only certain flatpickr settings with the limitFlatPicker.init().