Datepicker

The Date Field uses the Pikaday Responsive JavaScript library for datepicker functionality. This is a wrapper for the original Pikaday library.

Pikaday methods for modifying the datepicker are accessible via the pikaday property of the dateObject. The ‘dateObject is passed by the init radio message on the pikaday radio channel along with the associated fieldModel`. This radio message is triggered after the date

field’s view is rendered, so the datepicker has already been initialized.

<?php
/*
* Plugin Name: Ninja Forms – Datepicker Customizations
*/
add_filter( 'ninja_forms_enqueue_scripts', 'nf_datepicker_options' );
function nf_datepicker_options() {
wp_enqueue_script( 'nf_datepicker_options', plugin_dir_url( __FILE__ ) . 'script.js', array( 'jquery' ), false, true );
}

view raw
index.php
hosted with ❤ by GitHub

jQuery( document ).ready( function() {
new(Marionette.Object.extend( {
initialize: function() {
this.listenTo( Backbone.Radio.channel( 'pikaday' ), 'init', this.modifyDatepicker );
},
modifyDatepicker: function( dateObject, fieldModel ) {
// dateObject.pikaday.setDate( '04/11/2016' );
// dateObject.pikaday.gotoYear( '2017' );
// dateObject.pikaday.setMinDate( new Date( 'December 21, 2016' ) );
}
}));
});

view raw
script.js
hosted with ❤ by GitHub

Here is an example of how to modify datepicker settings.

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

view raw
customDatePicker.js
hosted with ❤ by GitHub