Question

我在WordPress中有一个带有Gravity Forms的表单，这个表单有2个datepickers：签到日期和签出日期，但我希望当客户在签入日期选择一个日期时，自动检查 - 在入住日期后一天更新日期更新，所以，这就是我所做的没有结果：

首先，我在我的主题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');
        }
    );
}

Answer 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/

Answer 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');
        }
    });
});

Answer 3

您可以使用setDate执行此操作，请参阅此Fiddle。

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

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

Answer 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日期选择器中改变某些东西。

祝你好运

Answer 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>`

Answer 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>

使用Datepicker jQuery和Gravity Forms开始和结束日期

6 个答案: