Skip to content

Instantly share code, notes, and snippets.

@kstover
Last active February 2, 2024 10:06
Show Gist options
  • Save kstover/90cb03da447d0a7206ab982a239cd6d3 to your computer and use it in GitHub Desktop.
Save kstover/90cb03da447d0a7206ab982a239cd6d3 to your computer and use it in GitHub Desktop.
Customising Ninja Forms date picker field
/*
* 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();
} );
@lapalach
Copy link

lapalach commented Feb 2, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment