Skip to content

[bug]日期选择框会出发modal的show,hide等事件 #197

@zubin999

Description

@zubin999

测试代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/zui.min.css" />
    <link rel="stylesheet" href="./lib/datetimepicker/datetimepicker.css" />
</head>
<body>
    <div class="modal fade" id="timeModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
              <h4 class="modal-title">标题</h4>
            </div>
            <div class="modal-body">
              <form>
                  <input class="form-control form-date" name="started"/>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary">保存</button>
            </div>
          </div>
        </div>
      </div>

      <button class="btn btn-primary" type="button" id="openModal">打开弹层</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="./js/zui.js"></script>
<script type="text/javascript" src="./lib/datetimepicker/datetimepicker.js"></script>
<script>
    $(function(){
        $(".form-date").datetimepicker(
            {
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 0,
                format: "yyyy-mm-dd HH:ii:ss"
            }
        );

        $('#openModal').on('click', function(){
            $('#timeModal').modal('show');
        });
        $('#timeModal').on('hide.zui.modal', function(){
            console.log('hide')
            $('#timeModal input[name=started]').val('');
        });
    })
</script>
</body>
</html>

原本监听的弹窗关闭事件,关闭时清空input框内容,但是选择日期后,input框没有显示所选日期,同时控制台输出hide,这原本应该是弹窗关闭时输出的

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions