Question

我在日期选择器中有自定义按钮。按钮文字：完成。

要求：当我点击文本框时，日期选择器应显示并选择一些日期。点击＆＃34; DONE＆＃34;按钮，所选日期应显示在文本框上，日期选择器应关闭。

我已将 autoclose 设置为 false 。

实际输出： 我点击文本框时会收到日期选择器＆＃34;完成＆＃34;按钮，但每当我选择任何日期时，日期选择器都会关闭。

我做错了什么或者不得不追加任何代码。

＆＃13;

$(function () {
  $(".datepicker1").datepicker({
    showButtonPanel: true,
    autoclose: false,
    dateFormat: "yy-mm-dd",
    onSelect: function (dateText, inst) {
        alert('Date Selected');
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script type="text/javascript"  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>    


<input class="datepicker1" type="text"  />

＆＃13;

Answer 1

查看jQuery UI Datepicker API，似乎没有autoclose选项。

利用this SO post中的代码添加到onSelect事件：

＆＃13;

$().ready(function () {
    $(".datepicker1").datepicker({
      showButtonPanel: true,
      dateFormat: "yy-mm-dd",
      onSelect: function (dateText, inst) {
        alert('Date Selected');
        
        // keep dialog open
        if (inst.inline)
        	this._updateDatepicker(inst);
        else {
          this._hideDatepicker(null, this._get(inst, 'duration'));
          this._lastInput = inst.input[0];
          if (typeof(inst.input[0]) != 'object')
            inst.input[0].focus(); // restore focus
          this._lastInput = null;
        }
      }});
    });

＆＃13;

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<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/jquery-ui.min.js"></script>

<input class=datepicker1 type=text>

＆＃13;

Answer 2

我得到了答案。

我在OnSelect事件中添加了以下代码

 if (inst.inline) this._updateDatepicker(inst);
                else {
                    this._hideDatepicker(null, this._get(inst, 'duration'));
                    this._lastInput = inst.input[0];
                    if (typeof (inst.input[0]) != 'object') inst.input[0].focus(); // restore focus
                    this._lastInput = null;
                }

自动关闭不适用于日期选择器

2 个答案: