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

Question

I have this html for 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>

that is used to create x-editable datepicker, how can I add events to show/hide datepicker?

I've try to find input box when edit is shown but this don't work:

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

shown and hidden events are fired but hide/show don't.

Answer 1

x-editable add class datepicker-open so you can hide buttons using:

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