Question

我有一个使用bootstrap datepicker的例子，如下面的代码，在日期选择器中显示readonly，这会阻止用户修改日期选择器。当我在Chrome中运行并尝试选择日期时，它运行正常。然后当我切换到IE并且在我选择日期之后，它在输入字段中显示一个光标，这可能误解了用户他们可以编辑日期，而实际上他们不能。如何在IE中隐藏此光标

＆＃13;

$(document).ready(function() {
        // adding todays date as the value to the datepickers.
        var d = new Date();
        var curr_day = d.getDate();
        var curr_month = d.getMonth() + 1; //Months are zero based
        var curr_year = d.getFullYear();
        var eutoday = curr_day + "-" + curr_month + "-" + curr_year;
        var ustoday = curr_month + "-" + curr_day + "-" + curr_year;
        $("div.datepicker input").attr('value', eutoday);
        $("div.usdatepicker input").attr('value', ustoday);

        //calling the datepicker for bootstrap plugin
        // https://github.com/eternicode/bootstrap-datepicker
        // http://eternicode.github.io/bootstrap-datepicker/
        $('.datepicker').datepicker({
            autoclose: true,
            startDate: new Date()
        });
    });

＆＃13;

.datepicker input {
  cursor: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<a data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="/mmfansler/aQ3Ge/show/">
  <div class="modal-header">
      Header
  </div>
<div class="input-append date datepicker no-padding" data-date-format="dd-mm-yyyy">
    <input class="input-medium" size="16" type="text" readonly ><span class="add-on"><i class="icon-th"></i></span>
</div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>


<br><br><br>

<div class="input-append date datepicker no-padding" data-date-format="dd-mm-yyyy" >
    <input class="input-medium" size="16" type="text" readonly ><span class="add-on"><i class="icon-th"></i></span>
</div>

＆＃13;

Answer 1

添加

.datepicker input {
  pointer-events: none;
}

到你的CSS

IE中的Readonly仍然在Chrome中显示光标

1 个答案: