如何编写脚本来限制过去日期的 Ninja Form 日期选择器？

Question

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!

Answer 1

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

Answer 2

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>