取消jQuery DatePicker默认单击输入

Question

我想询问是否有任何方法可以取消jQuery DatePicker的默认行为和datepicker日历不显示。我阅读了文档，并使用了建议的"隐藏"选项，但似乎无法完美无缺。这是我使用的JS小提琴：jQuery datepicker jsfiddle

function hideIt(){
    $( "#datepicker" ).datepicker( "hide" );
    //custom logic
}
function showIt(){   
    $( "#datepicker" ).datepicker("show");
}

Answer 1

无需添加按钮。只要给它处理datepicker。

$(function() {
  $("#datepicker").datepicker({
    constrainInput: true,
    showOn: 'button',
    buttonText: 'Show It !'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js
"></script>
<p>Date:
  <input type="text" id="datepicker" /> </p>

注意：要防止在文本框上写入，如果您想要的话。

Answer 2

我通过使用ImageOnly属性使用"虚构"按钮找到了解决问题的解决方案。这是jsfiddle：jsfiddle

javaScript：

$(function() {
  $("#datepicker").datepicker({
        showOn: 'button',
    buttonImage: 'randomlocation/nonexisting-calendar-img.gif',
    buttonImageOnly: true,
    buttonText: ''
  })
});

function hideIt(){
        //custom logic
}
function showIt(){   
    $( "#datepicker" ).datepicker("show");
}

html：

<p>Date: <input type="text" id="datepicker" onclick="javascript:hideIt();" /></p>
<input type="button" onclick="javascript:showIt();" value="Show It !" />

Answer 3

尝试像这样

function hideIt(){ 
}
function showIt(){ 
$( "#datepicker" ).datepicker();
$('#datepicker').focus();
$('#datepicker').prop('disabled', true);
}