Customising Ninja Forms date picker field

customDatePicker.js

/*
 * When our date picker loads, we want to modify some of picker settings.
 *
 * We want to:
 * 1) Modify our month labels with a different string.
 * 2) Disable specific dates so that they can't be selected.
 *
 * 
 * This object will listen to date pickers as they initialize so that we can modify settings.
 */
var customDatePickerStuff = 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 ) {
        /*
         * When we want to add or modify pikaday settings, we have to access those like:
         *
         * dateObject.pikaday._o.SETTING_NAME
         *
         * In the examples below, we'll use this to change pikaday settings.
         */
        
        /*
         * This is how we modify the labels on our date picker calendar.
         */
         dateObject.pikaday._o.i18n = {
            previousMonth : 'Month Before',
            nextMonth     : 'Month After',
            months        : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
            weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
        };

        /*
         * The disableDayFn pikaday setting lets us disable specifc days so that the user can't select them.
         * 
         * Note that if a user manually enters a disabled date, the "invalid date" text will be shown.
         *
         * The function receieves the "date" variable which represents the date currently being rendered on the calendar.
         * All the days of the month will be passed through this function.
         * Returning boolean true will disable the specific date.
         *
         * In this example, we are setting an array of "disabled days" that we don't want to allow.
         * If the date passed is in that array, we return true, which disables that day.
         *
         */
        dateObject.pikaday._o.disableDayFn = function( date ) {
            var disabledDays = ["2017-04-28", "2017-04-29", "2017-04-30"];

            if ( _.indexOf( disabledDays, moment( date ).format( "YYYY-MM-DD" ) ) !== -1 ) {
                return true;
            }
        }

        /*
         * Reversing the logic above to check a list of "enabled days".
         */
        dateObject.pikaday._o.disableDayFn = function( date ) {
            var enabled = ["2017-04-15", "2017-04-14", "2017-04-13"];

            if ( _.indexOf( enabled, moment( date ).format( "YYYY-MM-DD" ) ) === -1 ) {
                return true;
            }
        }

        /*
         * Note that if you have both snippets above in your code, the second will always override the first.
         */
    }
});

jQuery( document ).ready( function() {
	new customDatePickerStuff();
} );

How can I limit years that can be selected on both sides?

Hello,
I am trying to set the pickWholeWeek pikaday setting to true. below is the js, doesn't seem to work, any clue as to what I'm doing wrong?

var customDatePickerStuff = Marionette.Object.extend( {
    initialize: function() {
        this.listenTo( Backbone.Radio.channel( 'pikaday' ), 'init', this.modifyDatepicker );	
    },

    modifyDatepicker: function( dateObject, fieldModel ) {
     	dateObject.pikaday._o.pickWholeWeek = true;
		
	}
});

jQuery( document ).ready( function() {
	new customDatePickerStuff();
} );

hello, good day, I just wanted to ask how do I change datepicker settings in pikaday on one specific element only, because I have two datepickers on one page, first one is birthdate which requires all dates to be returned, and appointment date that requires only weekdays and remove past dates. I have followed the coding structure here: https://developer.ninjaforms.com/codex/datepicker/, however, it works on both datepickers so I need to specify the field of the datepicker to which the setting will take effect, thank you for the response in advance.

if ( _.indexOf( enabled, moment( date ).format( "YYYY-MM-DD" ) ) === -1 ) {
returns Uncaught SyntaxError: Invalid or unexpected token

It would be great to have an updated version, now that Ninja Forms date fields uses the JS library Flatpickr instead of Pikaday.

now that Ninja Forms date fields uses the JS library Flatpickr instead of Pikaday.

Brilliant. I just noticed today that I was getting a Uncaught TypeError: dateObject.pikaday.setMinDate is not a function error on a client's site since updating to the latest version of NinjaForms back at the beginning of December, and didn't realize that it had switched datepicker plugins.

To initialize for Flatpickr, simply use the options specific to this plugin (and not Pikaday); For example, to set a minDate on the field, you'd use something like:

// Modify datepicker - limit to current date
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 ) {
        // Limit datepicker to today's date
        dateObject.set("minDate", new Date());
    }
});
new customDatePicker();

Hope this helps, and thanks for shedding some light on my issues in the process!

To modify Flatpickr within WordPress for Ninja Forms blocking the calendar for both today's date and weekends (Sat/Sun), here are the exact steps:

#1 - Add this to your child theme /functions.php file, make sure to change the [your-child-theme] slug to match your child theme folder name exactly:

add_filter( 'ninja_forms_enqueue_scripts', 'nf_datepicker_custom' ); function nf_datepicker_custom() { wp_enqueue_script( 'nf_datepicker_custom', '/wp-content/themes/**[your-child-theme]**/ninja-forms/nf-scripts-custom.js', array( 'jquery' ), false, true ); }

#2 - Create a new ninja-forms directory within the root of your child theme, example: /wp-content/themes/[your-child-theme]/ninja-forms

#3 - Create a new nf-scripts-custom.js file within the new ninja-forms directory from step 2 ^above:

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 ) {
        
        // Limit Ninja Forms Flatpickr datepicker to current and future dates
        dateObject.set(
            "minDate", new Date()          
        );
        
        // Limit Ninja Forms Flatpickr datepicker with no weekends
        dateObject.set(              
            "disable", [
                function (date) {
                    return (date.getDay() === 0 || date.getDay() === 6);
                } 
            ]           
        );
    }
});
new customDatePicker();

@she-media-xyz Thank you!

for those who want to target a specific datepicker and not all of them, do something like this:

modifyDatepicker: function( dateObject, fieldModel ) {  
    if ( fieldModel.attributes.key == 'keyToTarget' ) {
        // do somthing
    } else if ( fieldModel.attributes.key == 'otherKeyToTarget' ) {
        // do somthing
    } 
}

Thank you for posting this. The Disable on the weekends doesn't appear to be working. Is there a recent change that requires an update on this?

I'm also wondering if there's some way to have the minDate set to tomorrow. Like Date+1 or something. I'm a JS n00b.

I had tried the following, but it didn't work.

   var tomorrow = new Date();
   tomorrow.setDate(tomorrow.getDate() + 1);
        
   "minDate", tomorrow; 

Hi there, I am using Ninja Forms and need to disable any past dates in the date picker. I never changed/overwrote a plugin, can anyone help me how I can disable past dates for the date picker?? Would be SO much appreciated!!

Thank you for posting this. The Disable on the weekends doesn't appear to be working. Is there a recent change that requires an update on this?

I'm also wondering if there's some way to have the minDate set to tomorrow. Like Date+1 or something. I'm a JS n00b.

I had tried the following, but it didn't work.

   var tomorrow = new Date();
   tomorrow.setDate(tomorrow.getDate() + 1);
        
   "minDate", tomorrow; 

I used this to set 2 weeks in advance:

function addWeeks(date, weeks) {
	date.setDate(date.getDate() + 7 * weeks);
	return date;
}

Then, changed the code to dateObject.set("minDate", addWeeks(new Date(), 2) );

You could probably do something similar with days.

There is a deprecation Warning showing up after the latest update of NinjaForms.

Deprecated Ninja Forms Pikaday custom code detected.

Does anyone know how to adjust the code for future use?