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

Question

我的 WordPress 网站中有一个使用 Ninja Forms 插件的日期选择器字段。我不认为该插件给了我限制过去日期的选项。所以我想实现用户不能选择任何过去的日期。

我当然尝试过谷歌搜索解决方案，但我不太擅长 javascript/jquery 并且不明白如何实现这一点。有人可以帮忙吗？非常感谢！

Answer 1

通过结合我在尝试解决此问题时在网络上找到的一些内容，找到了解决方案。

只需将此代码添加到您想要限制过去日期的日期选择器的任何页面即可。这也限制了当天，所以他们必须从明天开始选择。

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

Answer 2

Ninja Forms 似乎有一个提前日期选择器选项，我不熟悉它，但这里是 link

现在我不知道确切的 Ninja Forms 语法，但这应该会刺激你的大脑开始使用。 否则，您可以使用

WP-plugin

和

add_filter()

像

 创建一个小的自定义 

function

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

这会调用

JQuery

文件中的

JavaScript

或

theme/js/script.js

函数或保存自定义 JS 的任何位置，这可能会使用类似的东西。

var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
dateObject.pikaday.setMinDate(tomorrow); 

Answer 3

谢谢马克·特博格。它非常有效，只是为了今天也能预订我做了更改的日期：

    <script>
jQuery(document).ready( function( $ ) {
var customDatePicker = 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 ) {
        
        // Limit Ninja Forms Flatpickr datepicker to current and future dates
        dateObject.set(
            "minDate", new Date()          
        );
    }
});
new customDatePicker();
} );
</script>