Localize NinjaForms THREE Pikaday Datepicker

Since the release of THREE NinjaForms uses Pikaday as a new datepicker instead of jQueryUI, so I had to update my datepicker localization script.

I had no experience with BackboneJS, MomentJS, Marionette and all these new libraries used in NinjaForms 3 so it took me some time to find out how to customize the frontend.

Triggers: WordPress Hooks for JavaScript

NinjaForms offers some specific triggers so we can hook in our custom code as we would normally do in PHP.

When the datepicker initializes it fires an init  trigger in pikaday  channel. There’s an example in the NinjaForms developer docs.

Translate DatePicker and Date Format

To translate Pickaday as well as the return value we can use built in localization of moment.js:

// https://codemiq.com/en/localize-ninjaforms-three-pikaday-datepicker/
HaetNinjaFormsInitController = Marionette.Object.extend( {
    initialize: function() {
        this.listenTo( nfRadio.channel( 'pikaday' ), 'init', this.translateDatePicker );
    },

    translateDatePicker : function( dateObject, model ){
        // set locale
        moment.locale('de-de');

        // we destroy the existing datepicker first
        dateObject.pikaday.destroy();

        // and create our own one
        dateObject = pikadayResponsive( dateObject.element, {
            format:         moment.localeData()._longDateFormat.L,
            outputFormat:   moment.localeData()._longDateFormat.L,
            classes:        jQuery( dateObject.element ).attr( "class" ),
            pikadayOptions: {
                i18n: {
                    months:         moment.localeData()._months, 
                    weekdays:       moment.localeData()._weekdays, 
                    weekdaysShort:  moment.localeData()._weekdaysShort
                }
            }
        } );
        if ( 1 == model.get( 'date_default' ) ) {
           dateObject.setDate( moment() ); 
        }
    }
} );

jQuery(document).ready( function($){

    new HaetNinjaFormsInitController();

});

 

6 Responses to “Localize NinjaForms THREE Pikaday Datepicker”

  1. Daniel

    Hi
    For months I have tried to localize Ninja Forms pickaday to French. Your post has given me some hope, but… No such file as moment.js exists in latest NJ version. One single item is moment-with-locales.min.js with a lot of exotic languages, but no French. Is there anything to do (within my own meagre coding competence) to fix that ?
    Thanks in advance

    Reply
    • hannes

      Hey Daniel,
      I think this was not clear enough in my article. You don’t need the file moment.js but the code is based on the library called “moment.js”
      You can copy the code above and use it in one of your (child-)theme’s JavaScript files (or any other custom JS file). You don’t need to modify any NinjaForms plugin files.
      best regards, Hannes

      Reply
  2. adam

    Hi
    I have tried to localize Ninja Forms pickaday to French but whith no success. I have tried to insert your script in a js page of my template , but no French. there is anything to localize ninja datepicker in french whith success?
    Thanks, for your help

    Reply
  3. Miriam

    I’m afraid, it is not clear where to put that code. In NJ Forms init they look for:

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

    The Plugin-Directory!? So putting your above code in template JS-File will not be found? It must be added to plugins/ninja-forms/ and must be named: script.js

    Would you please look over this?

    Reply
    • Hannes

      Hey Miriam, there’s no need for a specific file name or folder. If you have a custom (child-)theme with some javascript in it you can put it there.

      Reply

Leave a Reply