使用jquery试试下面的代码：

<span class="col-md-5 date-field datepicker fa fa-calendar open-datetimepicker" contenteditable
     onclick="$('#yourDatepickerName').datepicker('show');">
</span>

尝试使用输入字段。确保包含所有库并添加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>