单击跨度时打开日期选择器

Posted 2023-05-08

【中文标题】单击跨度时打开日期选择器

【英文标题】：Open date picker on span click

【发布时间】：2018-04-06 22:35:19

【问题描述】：

我的搜索表单如下。

<div class="search-bar-wrapper container-fluid">
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-8 search-bar">
                <span class="col-md-5 mag-name-field" contenteditable>
                </span>
                <span class="col-md-5 date-field datepicker fa fa-calendar open-datetimepicker" contenteditable>
                </span>
                <span class="col-md-2 btn-front">SEARCH</span>
            </div>
            <div class="col-md-2"></div>
        </div>
</div>

我想在点击“open-datetimepicker”时打开一个日期选择器，无论是引导日期选择器还是 jQuery 日期选择器。

我在 SO 上尝试了几个答案。什么都没解决。有人知道怎么做吗？

【问题讨论】：

你能显示你试过的代码吗？

您是否添加了任何日期选择器插件。如果是，请告诉我们名称。

【参考方案1】：

尝试使用输入字段。确保包含所有库并添加 jQuery。祝你好运！

<link rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div class="search-bar-wrapper container-fluid">
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-8 search-bar">
                <span class="col-md-5 mag-name-field" contenteditable>
                </span>
                <input id="date" class="col-md-5 date-field datepicker fa fa-calendar open-datetimepicker" contenteditable/>
                <span class="col-md-2 btn-front">SEARCH</span>
            </div>
            <div class="col-md-2"></div>
        </div>
</div>
<script>
$( "#date" ).datepicker();
</script>

【讨论】：

他被要求在span标签中制作它