Elementor表单中日期格式的最小和最大日期不起作用

时间:2020-06-10 作者:Rahul Kumar

我在Elementor表单中使用最小和最大日期。“最小日期”和“最大日期”工作正常,但当我添加日期格式时,“最小日期”和“最大日期”;最大日期无效,日期格式有效。

我的最小值(&M);添加的最大日期代码functions.php:

add_action( \'wp_footer\', function() {
?>
<script type="text/javascript">
    jQuery( window ).load( function( $ ){
        var limitFlatPicker;
        var afterTwoDays;
        var afterEightDays;
        limitFlatPicker = limitFlatPicker || {};
        limitFlatPicker = {
            defaultSettings: {
                selector: \'.flatpickr-input\',
                minDate: true,
                maxDate: true,
            },
            settings: {},
            init: function( options ) {
                this.settings = jQuery.extend( this.defaultSettings, options );
                if ( this.settings.minDate || this.settings.maxDate ) {
                    this.waitForFlatpicker( this.callback );
                }
            },
            waitForFlatpicker: function( callback ) {
                if ( typeof window.flatpickr !== \'function\' ) {
                    setTimeout( function() { limitFlatPicker.waitForFlatpicker( callback ) }, 100 );
                }
                callback();
            },
            modifyPicker: function( picker, settings ) {
                flatpickr( picker ).set( settings );
            },
            callback: function() {
                var self;
                self = limitFlatPicker;
                jQuery( self.settings.selector ).each( function() {
                    var picker;
                    picker = jQuery( this )[0],
                    pickerSettings = {};

                    if ( self.settings.minDate ) {
                        pickerSettings[\'minDate\'] = self.settings.minDate;
                    }
                    if ( self.settings.maxDate ) {
                        pickerSettings[\'maxDate\'] = self.settings.maxDate;
                    }
                    self.modifyPicker( picker, pickerSettings );
                } );
            }
        }

            limitFlatPicker.init( {
                minDate: new Date(),
                selector: \'#form-field-form_field_date\',
            });         
            
    } );
</script>

<?php
},11);
但是当我添加日期格式代码时functions.php, 最小值(&M);最大日期无效,但日期格式有效:

add_action(\'wp_footer\', function () {
       ?>
      <script>
      jQuery( document ).ready( function( $ ){
            setTimeout( function(){
                  $(\'.flatpickr-input\').each(function(){ flatpickr( $(this)[0] ).set(\'dateFormat\', \'d/m/Y\');});
            }, 1000 );
      });
      </script>
      <?php
},13);
所以,我想用日期格式添加最小和最大日期。

我还尝试在上述代码中添加此内容,但它不起作用:

 limitFlatPicker.init( {
            minDate: new Date(),
            dateFormat: \'d/m/Y\',
            selector: \'#form-field-form_field_date\',
        }); 
任何帮助都是非常感激的。

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

您正在使用this flatpickr, 正当

因此,我不使用Elementor,因此,我没有使用Elementor或Elementor表单对此进行测试。然而,从我所看到的,您需要做的就是minDatedateFormat 工作,是添加以下内容:

if ( self.settings.dateFormat ) {
    pickerSettings.dateFormat = self.settings.dateFormat;
}
该行上方:

self.modifyPicker( picker, pickerSettings );
因为您的最小值(&M);最大日期代码当前仅接受某些(或更准确地说,仅接受两个)自定义设置,即minDatemaxDate; 因此,对于其他设置,您需要像上面的示例一样手动添加它们。

当然,这种限制是可以消除的,但我想你(或脚本的作者)这样设计脚本是有充分理由的,所以我就顺其自然吧

因此,通过上述添加(pickerSettings.dateFormat), 以下内容dateFormat 现在应该可以工作了:

limitFlatPicker.init( {
    minDate: new Date(),
    selector: \'#form-field-form_field_date\',
    dateFormat: \'d/m/Y\' // this should now work with minDate
});

附加说明:您应该使用点符号代替数组符号,例如。pickerSettings.minDate 而不是pickerSettings[\'minDate\'].

另一个JS提示(用于flatpickr v4): 这个true 如中所示maxDate: true 将导致控制台中出现JS错误(因为true 不是有效日期),因此您应该使用maxDate: \'\'. 好\'\' 不是有效日期,但空值被忽略flatpickr. (即免于解析为日期)

更新您询问的评论:“<你能告诉我怎么加吗disableMobile: "true" 在这个代码中“参考资料”;

正如我在原始答案中所说的,您基本上只需要添加以下内容ifself.modifyPicker( picker, pickerSettings );:

if ( undefined !== self.settings.<setting name> ) {
    pickerSettings.<setting name> = self.settings.<setting name>;
}
或者正如我所说的,你可以取消限制(即easy设置自定义设置flatpickr) 这里有一种方法:只需更换整个callback: function() { ... } 使用此选项:

callback: function() {
    var self = limitFlatPicker;
    $( self.settings.selector ).each( function() {
        self.modifyPicker( this, jQuery.extend( {}, self.settings, {
            selector: null,
        } ) );
    } );
}
关于disableMobile 设置,我不知道是否设置为true (这是一个布尔值true, 不是字符串\'true\', 虽然这也会起作用)将与您的主题或表单一起工作,因为它完全取决于您使用的主题和插件。因此,您只需尝试&;自己测试该设置。但是,您应该检查mobile support 有关的信息flatpickr 您可以找到所有可用设置以及每个设置的正确值here.

更新2实际上,没有必要调用modifyPicker() 方法callback() 方法,所以在callback(), 打个电话就行了flatpickr() 像这样:

callback: function() {
    var self = limitFlatPicker;
    $( self.settings.selector ).each( function() {
        flatpickr( this, jQuery.extend( {}, self.settings, {
            selector: null,
        } ) );
    } );
}
或者使用原始代码-但在添加pickerSettings.dateFormatpickerSettings.disableMobile, 使用flatpickr( picker, pickerSettings ); 而不是self.modifyPicker( picker, pickerSettings );.

以及(即呼叫flatpickr() 直接)应解决此问题:<主要问题是dateFormat 在桌面上正常工作,但在移动设备上不工作“引用”;。

此外,我注意到您的waitForFlatpicker() 方法,因此您应该改为使用以下方法init()waitForFlatpicker() 代码:

init: function( options ) {
    // [1]: Pass {} as the first arg so that this.defaultSettings doesn\'t get modified.
    this.settings = jQuery.extend( {}, this.defaultSettings, options );

    if ( this.settings.minDate || this.settings.maxDate ) {
        // [2]: Pass the \'options\' and not this.callback
        this.waitForFlatpicker( options );
    }
    // there should be an \'else\' here, but I assumed it\'s not necessary...
},
// [3]: The first arg is \'options\' and not \'callback\'
waitForFlatpicker: function( options ) {
    if ( typeof window.flatpickr !== \'function\' ) {
        setTimeout( function() { limitFlatPicker.waitForFlatpicker( options ); }, 100 );
    }
    else { // [4]: Make sure there\'s an \'else\'.
        this.settings = jQuery.extend( {}, this.defaultSettings, options );
        this.callback();
    }
},

工作演示(在JS Fiddle上)

不是Elementor表单,但您会看到minDate, dateFormatdisableMobile 一切正常in this fiddle — 第一个输入在桌面和移动设备上看起来应该相同。

顺便说一下,我用了不同的callback() 如果只允许某些flatpickr 使用设置limitFlatPicker.init().

相关推荐

禁用jQuery javascript的Cloudflare Rocket Loader并使其首先加载

我使用Cloudflare Rocket Loader在我的站点上加速Javascript。问题是,它在加载jQuery本身之前加载某些需要jQuery的脚本,使它们无法正常工作。尽快禁用Rocket Loader以添加特定脚本data-cfasync=\"false\" 到<script src=\"\"> 我想知道如何将其添加到jQuery脚本中,因为Wordpress并不是简单地通过脚本标记加载jQuery。目前我的网站加载jquery-migrate.min.js 和jquery.js