Show/Hide 按钮，当日期选择器在 x-editable 中为 hidden/visible

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 日期选择器，如何向 show/hide 日期选择器添加事件？

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

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

已显示和隐藏的事件已触发，但 hide/show 未触发。

Answer 1

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

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

Show/Hide 按钮，当日期选择器在 x-editable 中为 hidden/visible

Show/Hide buttons when datepicker is hidden/visible in x-editable

javascript

datepicker

twitter-bootstrap

x-editable