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();
} );

@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?