JSFiddle - React, Tailwind, and code Playground

by 5ally

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.3/flatpickr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.3/flatpickr.js"></script>
<h3>
	Test using a mobile device and note the differences in the <em>display</em> between the date value in the <em>picker/input</em> and the one next to the "Selected date:".
</h3>

<form method="post" action="" onsubmit="alert('Just testing, so no submission is allowed..'); return false">
	<fieldset>
		<legend>
			Here, <code>dateFormat</code> is <code>d.m.Y</code>, whereas <code>disableMobile</code> is <code>true</code>.
		</legend>
		I.e. On a <b>mobile device</b>, the browser's native date picker <strong>would NOT</strong> be used.<br>
		<input id="form-field-form_field_date" placeholder="Date">
		Selected date: <b id="date-1">N/A</b>
	</fieldset>

	<fieldset>
		<legend>
			Here, <code>dateFormat</code> is <code>d/m/Y</code>, whereas <code>disableMobile</code> is <code>false</code>.
		</legend>
		I.e. On a <b>mobile device</b>, the browser's native date picker <strong>would</strong> be used.<br>
		<input id="form-field-form_field_date2" placeholder="Date 2">
		Selected date: <b id="date-2">N/A</b>
	</fieldset>

	<fieldset>
		<legend>
			Same as the second example above, except the <code>dateFormat</code> is <code>l, F j, Y</code>.
		</legend>
		<input id="form-field-form_field_date3" placeholder="Date 3">
		Selected date: <b id="date-3">N/A</b>
	</fieldset>
</form>

<p>
	Note <small>(from <a href="https://wordpress.stackexchange.com/a/369217/137402" target="_blank">Sally</a>)</small>: See the flatpickr's <a href="https://flatpickr.js.org/options/" target="_blank">options/settings</a> and its <a href="https://flatpickr.js.org/mobile-support/" target="_blank">mobile support</a> for more details.
</p>

JavaScript

jQuery( window ).load( function( /*$*/ ){ // Note: That $ is an event object, not a jQuery object.
	var limitFlatPicker;
//	var afterTwoDays;   // Unused var; so I commented it out.
//	var afterEightDays; // Unused var; so I commented it out.
	limitFlatPicker = limitFlatPicker || {};
	limitFlatPicker = {
		defaultSettings: {
			selector: '.flatpickr-input',
			minDate: true,
			maxDate: ''
		},
		settings: {},
		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 );
			}
		},
		// [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();
			}
		},
		modifyPicker: function( picker, settings ) {
			flatpickr( picker ).set( settings );
		},
		callback: function() {
			var self = limitFlatPicker;
			jQuery( self.settings.selector ).each( function() {
				var pickerSettings = {};

				// Format of the below array: [ 'settingName', 'settingName', 'settingName', ... ]
				[ 'minDate', 'maxDate', 'dateFormat', 'disableMobile' ].map( function ( setting ) {
					if ( undefined !== self.settings[ setting ] ) {
						pickerSettings[ setting ] = self.settings[ setting ];
					}
				} );

				flatpickr( this, pickerSettings );
				console.log( self.defaultSettings, self.settings, pickerSettings );
			} );
		}
	};

	limitFlatPicker.init( {
		minDate: new Date(),
		selector: '#form-field-form_field_date',
		// Below define your dateFormat, disableMobile, etc. settings.
		dateFormat:...