Question 106222 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – How to write a script to restrict Ninja Form date picker for past dates?

I have a date picker field in my WordPress Website using the Ninja Forms Plugin. I don’t think the plugin gives me the option to restrict past dates. So I want to achieve that the user can not pick any past dates.

I have of course tried to google a solution but I am not really good with javascript/jquery and don’t understand how I can achieve this. Can anyone help? Many thanks in advance!

Tags:

2

Answers


  1. 0

    It appears Ninja Forms has an advance date picker option I am not familiar with it but here is the link

    NOW I don’t know the exact Ninja Forms syntax but this should jolt your brain to get started.
    Other wise you can create a small custom WP-plugin using a add_filter() and function like

    <?php
  
  add_filter( 'ninja_form_date_limt'  );
  
  function ninja_form_date_limt() {
      wp_enqueue_script( 
        'ninja_form_date_limt', 
        plugin_dir_url( __FILE__ ) . 'script.js', 
        array( 'jquery' ), 
        false, 
        true 
      );
  }

    This calls on a JQuery or JavaScript function in your theme/js/script.js file or wherever you keep custom JS Which could will could use something like this.

    var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
dateObject.pikaday.setMinDate(tomorrow);
    Login or Signup to reply.
  2. 0

    Found a solution to this by combining a few things I found across the web while trying to solve this problem.

    Simply add this code to any page where you have a date picker where you want to restrict past dates. This one also restricts the current day so they have to pick starting tomorrow.

    <script>
jQuery(document).ready( function( $ ) {
var customDatePicker = Marionette.Object.extend( {
initialize: function() {

this.listenTo( Backbone.Radio.channel( 'flatpickr' ), 'init', this.modifyDatepicker );
},
modifyDatepicker: function( dateObject, fieldModel ) {
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
dateObject.set("minDate", tomorrow );
}
});


new customDatePicker();
} );
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search