Bootstrap日期控件，实现日期控件只选择不准输入效果

Tiger_Paul

已于 2022-02-19 12:56:41 修改

阅读量3.9k

点赞数 2

分类专栏：前端文章标签： bootstrap css html

于 2022-01-22 11:30:27 首次发布

本文链接：https://blog.csdn.net/Tiger_Paul/article/details/122634785

版权

前端专栏收录该内容

5 篇文章

订阅专栏

一、引入日期控件CSS，JS

二、input就用控件

 <td>发行时间</td>
 <td>
    <div class='input-group date' style="width: 14em;" id='datetimepicker1'>
    <input type='text' id="addtime" name="addtime" class="timeInput form-control" readonly="readonly"/>
    <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
	</span>
    </div>
  </td>

   //调用控件方法
   <script>
        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
            defaultDate: "",
            ignoreReadonly: true
        });
    </script>

input输入框设置为readonly="readonly"属性， datetimepicker方法里设置忽略只读属性ignoreReadonly: true，这样就可以实现日期控件只选择不输入效果。