当日期选择器在 x-editable 中隐藏/可见时显示/隐藏按钮

Question

我有这个 html 可用于 x-editable

<a class="x-editable  editable editable-click" href="#"
   data-custom-params="{&quot;inPlanId&quot;:64,&quot;inPlanVid&quot;:15}" 
   data-date-format="mm-yyyy" data-disabled="false"
   data-emptytext="Specify date" data-name="inDate"
   data-placeholder="mm-yyyy" data-type="date"
   data-url="/synergy/planner/submitInPlacePlanSimulateDate.action"
   data-value="12-2015" style="display: inline;">12-2015</a>

用于创建 x-editable datepicker，如何添加事件以显示/隐藏 datepicker？

我尝试在显示编辑时查找输入框，但这不起作用：

$editEl.on('hidden', function() {
    console.log('hidden');
    console.log($editEl);
});
$editEl.on('shown', function() {
    var $container = $editEl.siblings('.editable-container');
    var $buttons = $container.find('.editable-buttons');
    $container.find('input').on('hide', function() {
        console.log('hide');
        $buttons.show();
    }).on('show', function() {
        console.log('show');
        $buttons.hide();
    });
    console.log($container.find('input'));
});

显示和隐藏事件被触发，但隐藏/显示不被触发。

Answer 1

x-editable 添加类 datepicker-open 以便您可以使用以下方法隐藏按钮：

.datepicker-open + .editable-container .editable-buttons {
   display: none;
}