javascript - 如何使可点击的日期选择器glyphicon-calendar图标正常工作？

这是启用datepicket在Firefox中工作的代码

<script src="js/vendor/jquery-3.2.1.min.js"></script>

<script src="js/vendor/modernizr-custom.js"></script>

<script type="text/javascript">
   var datefield=document.createElement("input");
    datefield.setAttribute("type", "date");
    if (datefield.type!=="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
     document.write('<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/dot-luv/jquery-ui.css " rel="stylesheet" type="text/css" />\n');
     document.write('<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"><\/script>\n');

 }
</script>

<script>
    $(function(){
        if (!Modernizr.inputtypes.date) { //if browser doesn't support input type="date", initialize date picker widget:
        // If not native HTML5 support, fallback to jQuery datePicker
            $('input[type=date]').datepicker({
                // Consistent format with the HTML5 picker
                    dateFormat : 'dd-mm-yy'

                },
                // Localization
                $.datepicker.regional['it']
            );
        }
    });
</script>

以下是html代码

    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
       <label for="inputDate">Date of Birth: </label>
          <div class="input-group datetime">
              <input type="date" id='datefield' name="date" placeholder="DD/MM/YYYY" class="form-control" required/>
                  <span class="input-group-addon">
                        <i class="glyphicon glyphicon-calendar"></i>
                   </span>

                </div>
            </div>

我想要的是，当我单击glyphicon图标/按钮时，日历也会出现，以便我可以选择一个日期输入到同一字段中，就像输入type = date一样。

最佳答案

  <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
       <label for="inputDate">Date of Birth: </label>
          <div class="input-group datetime">
              <input type="date" id='datefield' name="date" placeholder="DD/MM/YYYY" class="form-control" required/>
                  <label class="input-group-addon" for="datefield">
                        <i class="glyphicon glyphicon-calendar"></i>
                   </label>
                </div>
            </div>

将包含glyphicon-calendar的跨度更改为label，添加具有父datetimepicker的ID的属性（在这种情况下，ID为datefield），您的glyphicon-calendar图标现在可以单击，并将打开日期时间选择器。

感谢@华盛顿瓜迪斯的原始答案

顺便说一句，如果您出于某种原因将日期时间选择器嵌套在html表中，则此解决方案将不起作用-认为此信息可能有用...您必须使用引导程序。

关于javascript - 如何使可点击的日期选择器glyphicon-calendar图标正常工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44335304/