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();
} );
@tsteingard
Copy link

tsteingard commented Jul 29, 2021

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; 

@JanaKL90
Copy link

JanaKL90 commented Oct 8, 2021

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!!

@sm-mdp
Copy link

sm-mdp commented Nov 6, 2023

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.

@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