Question

我有一个带自己样式的按钮的日期选择器，我只想在用户单击按钮时打开日历，而在用户在文本框内单击时不打开日历。

此answer描述了如何使用现有的jquery datepicker功能添加按钮，然后将类添加到该jquery按钮。但是我认为，在我的情况下，只需在自己的样式按钮中添加一个“ show”方法，然后在jquery datepicker中禁用focus事件，就会更简单。

以下代码不起作用，但是-如果用户在文本框中单击，日历仍然会打开。

<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

您的函数应该是：

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

Answer 2

通过将datepicker showOn选项设置为“ none”来获得所需的结果。

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

使用Jquery datepicker添加自定义按钮

2 个答案: