Добавление настраиваемой кнопки с помощью Jquery DatePicker

Question

У меня есть средство выбора даты с моей собственной стилизованной кнопкой, и я хотел бы открыть календарь, только если пользователь нажимает кнопку, а не если пользователь нажимает внутри текстового поля.

В этом ответе описывается, как добавить кнопку с использованием существующей функциональности DatePicker в jquery, а затем добавить классы к этой кнопке Jquery. Однако я подумал, что в моем случае было бы проще просто добавить метод show к моей собственной стилизованной кнопке и отключить событие focus в jquery datepicker.

Однако следующий код не работает - календарь все равно открывается, если пользователь нажимает внутри текстового поля.

<input class="form-control" id="np_OpenDate" value="">                      
 <div id="np_btn_OpenDate" class="btn btn-icon"><i class="icon icon-calendar"></i></div> 

$('#np_OpenDate').datepicker().focus(
    function() {
        event.preventDefault();
    }
);
$('#np_btn_OpenDate').click(function() {
    $('#np_OpenDate').datepicker('show');
});

Есть идеи?

Answer 1

Достигните желаемого результата, установив опцию dateOicker showOn в «none».

$('#np_OpenDate').datepicker( {
   format: "dd/mm/yyyy",
     autoclose: true,
    showOn: "none"
  });

Answer 2

Ваша функция должна быть:

$('#np_OpenDate').datepicker().focus(
    function(ev) {    
   //here you hide the div that appears
   $(".datepicker").hide();
    }
);