WordPress ACF 管理员日期选择器范围答案

【问题标题】：WordPress ACF Admin Datepicker RangeWordPress ACF 管理员日期选择器范围
【发布时间】：2016-01-11 16:16:40
【问题描述】：

我在我的 WordPress 网站上使用高级自定义字段，并且我有一个日期选择器开始日期和结束日期，我试图在选择一个时设置最小值/最大值。从 jQuery 的 datepicker 日期范围 我正在尝试添加 onClose 选项。

我目前有以下基于 custom javascript fields page 的代码，但它不起作用。

<?php function takeover_scripts() { ?>

  <script type="text/javascript">
    (function($) {

      var startDate = $('.acf-field-568d4b2968a3e');
      acf.add_filter('date_picker_args', function( args, startDate ){
        // do something to args
        args.changeMonth = false;
        args.onClose = function( selectedDate ) {
          $( ".acf-field-568d4bbd68a3f" ).datepicker( "option", "minDate", selectedDate );
        }
        // return
        return args;
      });

      var endDate = $('.acf-field-568d4bbd68a3f');
      acf.add_filter('date_picker_args', function( args, endDate ){
        // do something to args
        args.changeMonth = true;
        args.onClose = function( selectedDate ) {
          $( ".acf-field-568d4b2968a3e" ).datepicker( "option", "minDate", selectedDate );
        }
        // return
        return args;
      });

    })(jQuery); 
  </script>

<?php }

add_action('acf/input/admin_footer', 'takeover_scripts'); ?>

我不确定我是否需要定位结束日期输入的 id 或字段编号，或者我什至是否正确选择了开始日期字段。如果有人对此有任何经验，请告诉我我设置/选择错误的地方。

这是两个字段的标记：

<div class="acf-field acf-field-date-picker acf-field-568d4b2968a3e" style="width:25%;" data-name="start_date" data-type="date_picker" data-key="field_568d4b2968a3e" data-required="1" data-width="25">
    <div class="acf-label">
        <label for="acf-field_568d479e68a3b-0-field_568d4b2968a3e">Start Date <span class="acf-required">*</span></label>
    </div>
    <div class="acf-input">
        <div class="acf-date_picker acf-input-wrap" data-display_format="MM d, yy" data-first_day="0">
            <input id="acf-field_568d479e68a3b-0-field_568d4b2968a3e" class="input-alt" type="hidden" name="acf[field_568d479e68a3b][0][field_568d4b2968a3e]" value="">
            <input type="text" value="" class="input active hasDatepicker" id="dp1452127570218">
        </div>      
    </div>
</div>

<div class="acf-field acf-field-date-picker acf-field-568d4bbd68a3f" style="width:25%;" data-name="end_date" data-type="date_picker" data-key="field_568d4bbd68a3f" data-required="1" data-width="25">
    <div class="acf-label">
        <label for="acf-field_568d479e68a3b-0-field_568d4bbd68a3f">End Date <span class="acf-required">*</span></label>
    </div>
    <div class="acf-input">
        <div class="acf-date_picker acf-input-wrap" data-display_format="MM d, yy" data-first_day="0"><input id="acf-field_568d479e68a3b-0-field_568d4bbd68a3f" class="input-alt" type="hidden" name="acf[field_568d479e68a3b][0][field_568d4bbd68a3f]" value=""><input type="text" value="" class="input active hasDatepicker" id="dp1452127570219"></div>     
    </div>
</div>

谢谢

附： : 我在 ACF 的支持下也有这个，位于 here。

【问题讨论】：

你把这个 JavaScript 放在哪里了？
嗨乔治，我更新显示add_action - acf/input/admin_footer。该脚本正在运行，但似乎无法单独运行。即使我的目标是一个字段，它仍然会将参数放在两个字段上。由于最后一个参数将changeMonth 设置为true，因此即使它只是一个，它也会将其设置为两者。同样，onClose 将为两者设置相同。如果我将onClose 设置为运行console.log('test');，它将运行但被分配给两者。由于某种原因，它不允许我动态设置最小/最大日期。

标签： wordpress datepicker advanced-custom-fields

【解决方案1】：

这有点晚了，但我终于弄明白了。

所以事实证明，.datepicker() 函数需要在类 .hasDatepicker 的输入字段上调用，而不是在具有 acf id 的输入字段上调用。

我有以下工作：

$('.acf-field-568d4b2968a3e').find('.hasDatepicker').datepicker('option', 'minDate', minDateVar );

希望这对某人有所帮助！

【讨论】：