【问题标题】:addressing and setting 2 datepicker fields on WordPress with Ninja Forms使用 Ninja Forms 在 WordPress 上寻址和设置 2 个日期选择器字段
【发布时间】:2017-09-09 09:17:14
【问题描述】:

在 WordPress 上使用 Ninja Forms。我有一个页面,在同一表格中包含多个日期字段(到达日期和离开日期)。我需要更改两个日期字段的值。

以下示例脚本有效(我可以通过 WP 插件将 jQuery 添加到页面),但正在更改两个字段的值:

<script>
$( 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' );
    }
}));
});
</script>

我不知道如何分别处理这两个字段。 Ninja Forms 创建的 2 个字段如下所示(它们的区别仅在于 ID):

<div class="nf-field-element">
<div class="pikaday__container"><input id="nf-field-66" name="nf-field-66" class="ninja-forms-field nf-element datepicker" value="11/04/2016" type="hidden">
<input class="pikaday__display pikaday__display--pikaday ninja-forms-field nf-element datepicker" placeholder="" type="text">
</div></div>

知道如何调整 jQuery 吗?

【问题讨论】:

    标签: jquery html wordpress pikaday ninja-forms


    【解决方案1】:

    我只需要为客户解决完全相同的问题。虽然我没有通过 jQuery 修复它,但我的解决方案可能会帮助您 - 或其他任何有类似问题的人:

    我必须使用查询字符串中定义的值预先填充我的日期选择器,并按照以下方式进行:

    1. 添加一个与“ninja_forms_render_default_value”挂钩的过滤器
    2. 过滤“日期”字段类型
    3. 使用给定键检查日期字段
    4. 检查是否设置了查询字符串

    为了达到同样的效果,你可以把它复制到你的functions.php中:

        add_filter( 'ninja_forms_render_default_value', 'my_change_nf_default_value', 10, 3 );
    
        function my_change_nf_default_value( $default_value, $field_type, $field_settings ) {
    
            if ('date' == $field_type ) {
    
                if ('date_from_query_string' == $field_settings['key']) {
                    if (!empty( get_query_var('date_from') )) {
                        return get_query_var('date_from');
                    }
                }
    
                if ('date_from_query_string' == $field_settings['key']) {
                    if (!empty( get_query_var('date_to') )) {
                        return get_query_var('date_to');
                    }
                }
            }
        }
    

    【讨论】:

      猜你喜欢
      • 2017-11-25
      • 1970-01-01
      • 2019-12-16
      • 2016-02-29
      • 1970-01-01
      • 2015-01-26
      • 2013-08-22
      • 2019-08-05
      • 2019-11-24
      相关资源
      最近更新 更多