Question

以下是启用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图标/按钮时，日历也会出现，以便我可以选择输入相同字段的日期，就像输入类型=日期一样。

Answer 1

  <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的范围更改为标签，使用父datetimepicker的ID添加属性（在这种情况下，ID为 datefield ），您的glyphicon-calendar图标现在可以点击，并将打开日期时间选择器。

感谢@Washington Guedes的原始回答

btw如果你因为某些原因将日期时间选择器嵌套在html表中，这个解决方案将无效 - 认为这个信息可能有用......你必须使用bootstrap。

如何使可点击的datepicker glyphicon-calender图标正常工作？

1 个答案: