with readonly Attribute wont open widget

Question

I am trying to use the https://github.com/Eonasdan/bootstrap-datetimepicker and trying to make the input field read-only then even the date picker button getting disabled and I am not able to open the date picker widget

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control readonly" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

Is there any way I can make the field read-only and still access the date pciker widget?

Why would you set it to readonly if you want the user to be able to pick a value? That makes very little sense. — CBroe, Jun 22 '18 at 11:40
I want to make the user available button to select the date using datepicker and not to manually edit the input field after date has been selected in the input — Suvojit, Jun 22 '18 at 11:53
Possible duplicate of [How to restrict user to input data using datetimepicker and disable manual user input?](https://stackoverflow.com/questions/46375097/how-to-restrict-user-to-input-data-using-datetimepicker-and-disable-manual-user) — VincenzoC, Jun 24 '18 at 22:16

Guillaume Georges · Answer 1 · 2018-06-22T12:26:26.617

For your datetimepicker to work, you have to set the id to the input, not to a parent container.

For your input to be readonly, you have to add an attribute to your input. Not a class.

<input type='text' class="form-control"  id='datetimepicker1' readonly/>

EDIT : I updated the snippet below so you could see the 4 different behaviours :

picker's id defined in a parent div
picker's id defined in the input
picker's id defined in a parent div, readonly attribute in the input
picker's id defined in the input, readonly attribute in the input

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
<script src="https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    id in the parent div : <input type='text' class="form-control"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date'>
                    id in the input :<input type='text' class="form-control"  id='datetimepicker2' />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker3'>
                    id in the parent div, readonly : <input type='text' class="form-control" readonly/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date'>
                    id in the input, readonly :<input type='text' class="form-control"  id='datetimepicker4' readonly/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>        
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
$('#datetimepicker3').datetimepicker();
$('#datetimepicker4').datetimepicker();
            });
        </script>
    </div>
</div>

The date-picker is working irrespective I put id="datetimepicker1" in the parent div or to the input field. My problem is once i make input read-only, the date-picker doesn't works — Suvojit, Jun 22 '18 at 11:57
@Suvojit Use the updated snippet in my answer and see the different behaviours depending on where you set the id and wether you set the readonly attribute or not. — Guillaume Georges, Jun 22 '18 at 12:20

score 0 · Answer 2 · answered Jun 23 '18 at 17:40

I found the solution to my problem which I was facing.

Setting ignoreReadonly:true in the options for datetimepicker did the trick (ignoreReadonly defaults to false)

Input field was set to read-only using the read-only attribute in the HTML tag and the date-picker button was enabled using the above option.

Thanks.

with readonly Attribute wont open widget

2 Answers2