javascript - 我的最小日期在 WordPress 的日期选择器中不起作用
问题描述
我正在使用 Elementor 处理我的 WordPress 项目。在那,我使用了带有日期选择器的 Elementor 表单,并且我已经为 min-date 编写了代码,但它不起作用。
这是我在弹出窗口中带有日期选择器的表单:
我也可以选择不应该发生的前一个日期。
我在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: false,
maxDate: false,
},
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_date',
} );
<?php
if ( is_page( 207 ) || is_page( 215 )) {
?>
limitFlatPicker.init( {
minDate: new Date(),
selector: '#form_field_date',
} );
<?php
}
?>
limitFlatPicker.init( {
minDate: new Date(),
selector: '#form_field_date',
} );
} );
</script>
<?php
},11);
我的这不起作用,因为我也可以选择上一个日期。
我的选择器:form-field-form_field_date
我的日期选择器:
<input type="text" name="form_fields[form_field_date]" id="form-field-form_field_date" class="elementor-field elementor-size-md elementor-field-textual elementor-date-field flatpickr-input active" placeholder="Start Date*" required="required" aria-required="true" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
当我将表单添加到页面时,代码正在工作,但是当表单处于弹出状态时,代码不起作用,因为弹出表单代码出现在页脚中。
任何帮助深表感谢。
解决方案
我通过将表单移动到页面而不是弹出来解决了这个问题,因为弹出表单代码出现在页脚中并且脚本代码也是如此,我认为这就是脚本在弹出表单中不起作用的原因。
页面中的表单现在可以正常工作,但弹出窗口中的表单仍然无法正常工作。
推荐阅读
- python - 如何使用熊猫将一行中不同类型的数据拆分为单独的列
- javascript - for循环中的AppendChild每隔一个孩子添加一次?
- powershell - 在计算机启动时运行 powershell 网络脚本将失败
- powershell - 为什么 -whatif 参数不传递给管道
- python - 重新格式化格式化为字符串的嵌套字典列表
- angular - Linting Angular 项目在 CI/CD 管道中需要很长时间
- sql - 如何在SQL中按列值获取增量rowid
- c# - MongoDB增量与对应列的限制c#
- r - 将定制功能应用于列对并创建汇总表
- android - 如何使用 CameraX 禁用降噪