Question

我想问一下是否有办法取消jquery datepicker的默认行为，那么当我点击附加了datepicker的输入字段时，我的自定义逻辑流和datepicker日历都不显示。我阅读了文档并使用了建议的＆＃34;隐藏＆＃34;选项，但似乎无法完美无缺。这是我使用的js小提琴： jquery datepicker jsfiddle

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

function showIt(){   
    $( "#datepicker" ).datepicker("show");
}

Answer 1

试试这个

function hideIt(){ 
}

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

Answer 2

无需添加按钮。只需让它来处理datepicker。

＆＃13;

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

＆＃13;

<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>

＆＃13;

注意：要防止在文本框上书写，请在需要时将其禁用。

Answer 3

通过使用带有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 !" />

取消jQuery datepicker默认点击输入

3 个答案: