最小和最大日期格式的元素或格式不工作的日期
我在元素表单中使用Min和Max date。Min和Max日期工作正常，但是当我添加日期格式时，Min & Max日期不工作，日期格式也工作。
My Min & Max Date Code添加在functions.php中：
add_action( 'wp_footer', function() {
?>
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',
});
} );但是，当我在functions.php中添加日期格式代码时，Min & Max日期不起作用，但日期格式正在工作：
add_action('wp_footer', function () {
?>
jQuery( document ).ready( function( $ ){
setTimeout( function(){
$('.flatpickr-input').each(function(){ flatpickr( $(this)[0] ).set('dateFormat', 'd/m/Y');});
}, 1000 );
});因此，我想添加日期格式的Min和Max日期。
我还试图将其添加到上面的代码中，但它不起作用：
limitFlatPicker.init( {
minDate: new Date(),
dateFormat: 'd/m/Y',
selector: '#form-field-form_field_date',
}); 任何帮助都很受欢迎。
回答 1
WordPress Development用户
发布于 2020-06-17 13:52:32
你在使用这flatpickr，对吗？
所以我不使用Elementor，因此，我还没有用Elementor或Elementor表单测试这个。但是，根据我所看到的，要使minDate和dateFormat都工作，只需添加以下内容：
if ( self.settings.dateFormat ) {
pickerSettings.dateFormat = self.settings.dateFormat;
}在这条线之上：
self.modifyPicker( picker, pickerSettings );因为您的Min & Max日期代码目前只接受某些(或者更准确地说，只接受两个)自定义设置，即minDate和maxDate；因此，对于其他设置，您需要像上面的示例那样手动添加它们。
当然，这个限制是可以消除的，但是我假设有一个很好的理由你(或者脚本的作者)是这样设计脚本的，所以我会让它这样做。:)
因此，有了上面的加法(pickerSettings.dateFormat)，下面的dateFormat就可以工作了：
limitFlatPicker.init( {
minDate: new Date(),
selector: '#form-field-form_field_date',
dateFormat: 'd/m/Y' // this should now work with minDate
});附加备注
- JS提示:应该使用点表示法，例如
pickerSettings.minDate而不是pickerSettings['minDate']，而不是数组表示法。 - 另一个JS提示(对于
flatpickrv4)：true(在maxDate: true中)将导致控制台中的JS错误(因为true不是一个有效的日期)，所以应该只使用maxDate: ''。''不是一个有效的日期，但是flatpickr忽略了空值。(即获豁免被解析为日期)
更新
所以在评论中你问：“你能告诉我如何在这段代码中添加disableMobile: "true"吗？”
正如我在最初的答案中所说的，您基本上只需要在self.modifyPicker( picker, pickerSettings );之上添加以下D31块：
if ( undefined !== self.settings. ) {
pickerSettings. = self.settings.;
}或者，正如我刚才所说的，您可以删除限制(即，将简易设置为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'，尽管这也能工作)将与您的主题或表单一起工作，因为这取决于您正在使用的主题和插件。因此，您只需自己尝试&测试该设置。但是，您应该检查移动支撑站点上的flatpickr信息，您可以为每个设置这里找到所有可用的设置和适当的值。
更新2
实际上，不需要从modifyPicker()方法调用callback()方法，所以在callback()中，只需像这样调用flatpickr()：
callback: function() {
var self = limitFlatPicker;
$( self.settings.selector ).each( function() {
flatpickr( this, jQuery.extend( {}, self.settings, {
selector: null,
} ) );
} );
}或者使用原始代码--但是在添加了pickerSettings.dateFormat和pickerSettings.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)
不是元素或表单，但您会看到minDate、dateFormat和disableMobile都运行良好的在这小提琴里 --第一个输入在桌面和移动设备上都应该是一样的。
顺便说一句，我在那里使用了不同的callback()代码，如果您想只允许在limitFlatPicker.init()中使用特定的flatpickr设置，您可能希望使用它。
https://wordpress.stackexchange.com/questions/368713
复制相似问题
腾讯云开发者
