Datepicker jQuery 和 Gravity 表单的开始和结束日期

Posted 2023-05-09

【中文标题】Datepicker jQuery 和 Gravity 表单的开始和结束日期

【英文标题】：Start and End Dates with Datepicker jQuery and Gravity Forms

【发布时间】：2014-09-11 08:14:26

【问题描述】：

我在 WordPress 中有一个带有重力表格的表格，这个表格有 2 个日期选择器：入住日期和退房日期，但我希望当客户在入住日期中选择一个日期时，自动检查 -在入住日期之后的一天更新日期，所以，这就是我所做的没有结果：

首先，我在我的主题中的functions.php 中添加了一个函数：

/**
* Gravity Forms Datepicker Changes
*/
function my_scripts_method() 
   wp_register_script( 'my-js-file',
       get_template_directory_uri() . '/js/my-js.js',
       array( 'jquery' ),
       '1.0',
       false );

   wp_enqueue_script( 'my-js-file' );


add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

然后我在我的主题中创建了一个名为 /js 的文件夹，还创建了一个名为 my-js.js 的文件，其中包含以下代码：

jQuery.noConflict();

jQuery(document).ready(function ($)) 
    $('#input_7_1').datepicker(
        changeMonth: true,
        onSelect: function (selectedDate) 
            $('#input_7_5').datepicker('option', 'minDate', selectedDate);
        
    );

    $('#input_7_5').datepicker(
        changeMonth: true,
        onSelect: function (selectedDate) 
            $('#input_7_1').datepicker('option', 'maxDate', selectedDate);
        
    );
);

但问题是我的日期选择器没有任何影响，没有任何变化，知道为什么会这样吗？

还有一个奇怪的事情，如果重力表格有这个文件：datepicker.js，如果我删除那里的所有内容，没有任何变化，或者如果改变一些值，也没有变化。这是该文件中的代码：

jQuery(document).ready(gformInitDatepicker);
function gformInitDatepicker()
    jQuery('.datepicker').each(
        function ()
            var element = jQuery(this);
            var format = "mm/dd/yy";

            if(element.hasClass("mdy"))
                format = "mm/dd/yy";
            else if(element.hasClass("dmy"))
                format = "dd/mm/yy";
            else if(element.hasClass("dmy_dash"))
                format = "dd-mm-yy";
            else if(element.hasClass("dmy_dot"))
                format = "dd.mm.yy";
            else if(element.hasClass("ymd_slash"))
                format = "yy/mm/dd";
            else if(element.hasClass("ymd_dash"))
                format = "yy-mm-dd";
            else if(element.hasClass("ymd_dot"))
                format = "yy.mm.dd";

            var image = "";
            var showOn = "focus";
            if(element.hasClass("datepicker_with_icon"))
                showOn = "both";
                image = jQuery('#gforms_calendar_icon_' + this.id).val();
            

            element.datepicker( yearRange: '-100:+20', minDate: +10, maxDate: "+24M +30D", showOn: showOn, buttonImage: image, buttonImageOnly: true, dateFormat: format,  changeMonth: false, changeYear: false, showAnim: 'slideDown', duration: 'slow' ).attr('readonly','readonly');
        
    );

【问题讨论】：

可能是其他日期选择器代码在您的代码之后运行

那么，我如何确定这一点？重力表单插件中有一个文件，其中其他代码应用于所有日期选择器

先查看页面源代码，看看是不是真的。在声明新设置之前可能还需要使用destroy 方法。或者只是传入新选项，如果它们已经初始化，则不要初始化它们

你能给我举个例子说明如何使用destroy方法吗？

$('#input_7_1').datepicker('destroy');

【参考方案1】：

如果您不想对代码大惊小怪，我编写了一个插件，可以在 Gravity Forms UI 中处理这个问题。

http://gravitywiz.com/how-to-restrict-dates-in-second-date-field-based-on-date-selected-in-first-date-field-with-gravity-forms/

【参考方案2】：

我意识到这是一篇相当老的帖子，但对于那些偶然发现相同问题的人来说，该问题不需要如此复杂的解决方案 - 所缺少的只是“刷新：

jQuery.noConflict();

jQuery(document).ready(function ($)) 
    $('#input_7_1').datepicker(
        changeMonth: true,
        onSelect: function (selectedDate) 
            $('#input_7_5').datepicker('option', 'minDate', selectedDate);
            $('#input_7_5').datepicker('refresh');
        
    );

    $('#input_7_5').datepicker(
        changeMonth: true,
        onSelect: function (selectedDate) 
            $('#input_7_1').datepicker('option', 'maxDate', selectedDate);
            $('#input_7_1').datepicker('refresh');
        
    );
);

【参考方案3】：

您可以使用 setDate 来完成，请参阅Fiddle。

$(function() 
  $( "#from" ).datepicker(
     onSelect: function () 
         var newDate = $(this).datepicker('getDate'); 
         newDate.setDate(newDate.getDate()+7); 
         $('#to').datepicker('setDate', newDate);
     
  );

  $( "#to" ).datepicker();
);

【讨论】：

嗨，问题是由于某种原因任何更改都没有效果，我不确定为什么，我可以将此代码添加到重力表单文件夹中的 datepicker.js 吗？还是我必须添加我的主题功能的功能？

@user55125 添加到datepicker代码的任何地方，我相信你提到它是my-js.js。

是的，我做到了，但是根本没有任何变化，即使我从gravityforms插件文件夹中更改了主要的datepicker.js，这很奇怪，因为我几个月前就改变了，但现在没有任何影响，我已经在开发模式下尝试了purgin缓存，cloudflare，但没有。

@user55125 表单的 html 是否与小提琴中的 HTML 匹配？确保将代码调整为您的表单。

是的，所有这些都是通过重力表单插件完成的，我已经检查了 datepickers id，它应该是匹配的。

【参考方案4】：

我最后想通了，我想分享解决方案：

由于某种原因，我无法以我尝试的方式使用代码，因此我在 wordpress 中的主题的 functions.php 中的代码不起作用，但我尝试在我的页面上插入另一个代码。我的主题的 php 文件，它起作用了，而且我必须将每个“$”更改为“jQuery”，所以代码以这种方式工作，这是我使用的代码：

<script type="text/javascript">
jQuery(document).bind('gform_post_render', function()
        // destroy default Gravity Form datepicker
jQuery("#input_7_1").datepicker('destroy');
        // create new custom datepicker
jQuery('#input_7_1').datepicker(
    minDate: 1,
    defaultDate: 0,
    dateFormat: "m/d/yy",
    changeMonth: true,
    changeYear: true,
    onClose: function (dateText, inst) 
        var d = jQuery.datepicker.parseDate(inst.settings.dateFormat, dateText);
        d.setDate(d.getDate() + 1);
        jQuery('#input_7_5').val(jQuery.datepicker.formatDate(inst.settings.dateFormat, d));
        jQuery('#input_7_5').datepicker('option', 
            minDate: jQuery.datepicker.formatDate(inst.settings.dateFormat, d)
        );
    
);
// destroy default Gravity Form datepicker
jQuery('#input_7_5').datepicker('destroy');
jQuery('#input_7_5').datepicker(
    minDate: "d",
    defaultDate: "d",
    dateFormat: "m/d/yy",
    changeMonth: true,
    changeYear: false,
);
)
</script>

希望这可以帮助其他尝试从重力形式的 jquery datepicker 中更改某些内容的人。

最好的问候

【参考方案5】：

您的代码有效，我正在我的网站上使用它，但我遇到了一个问题，我找到了解决方法。

问题是当您第一次单击输入字段时，日期选择器显示得很好。但是，如果您不选择日期并单击页面上的任何其他位置，则当您再次单击输入字段时，日期选择器将不再显示。解决方法是将 onClose 事件更改为 onSelect。我是菜鸟，所以我不知道是什么导致了这个问题，但我现在可以正常工作了。

<script type="text/javascript">
jQuery(document).bind('gform_post_render', function()
jQuery(".event_date_value input").datepicker('destroy');
jQuery('.event_date_value input').datepicker(
    minDate: 1,
    defaultDate: 0,
    dateFormat: "m/d/yy",
    changeMonth: true,
    changeYear: true,
    onSelect: function (dateText, inst) 
        var d = jQuery.datepicker.parseDate(inst.settings.dateFormat, dateText);
        d.setDate(d.getDate() - 30);
        jQuery('.balance_date_value  input').val(jQuery.datepicker.formatDate(inst.settings.dateFormat, d));
    jQuery('.balance_date_value input').datepicker('option', 
        minDate: jQuery.datepicker.formatDate(inst.settings.dateFormat, d)
    );

);

jQuery('.balance_date_value input').datepicker('destroy');
jQuery('.balance_date_value input').datepicker(
    minDate: "d",
    defaultDate: "d",
    dateFormat: "m/d/yy",
    changeMonth: true,
   changeYear: false,
);
)
</script>`

【讨论】：

要获得更完整的答案，您能否发布代码的修改部分？

实际上对我来说 Onselect 功能给了我另一个错误，即日期选择器自动打开第二个日期选择器（签出），但有点令人困惑，我认为我们能做的最好的是字段被阻止，我的意思是使字段只读，这样日期选择器将始终打开，没有错误，我会尝试这样做，完成后，我会发布结果和代码来做。 :)

【参考方案6】：

重力形式记录了这种情况并提供了解决方案。他们称之为“Datepicker 1 成为 datepicker 2 的 minDate”。在包含表单的页面中添加一些 js：

<script type="text/javascript">
gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) 
    if ( formId == 7 && fieldId == 1 ) 
        optionsObj.minDate = 0;
        optionsObj.onClose = function (dateText, inst) 
             jQuery('#input_7_5').datepicker('option', 'minDate', dateText).datepicker('setDate', dateText);
        ;
    
    return optionsObj;
);
</script>