Last active
February 2, 2024 10:06
-
-
Save kstover/90cb03da447d0a7206ab982a239cd6d3 to your computer and use it in GitHub Desktop.
Customising Ninja Forms date picker field
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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(); | |
} ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?