Bootstrap Datetimepicker Don't Work With Readonly Or Disabled

I have a serious problem with bootstrap datetimepicker, Here is the jsfiddle :

Copy

That's it.

$(function () {
  $('#datetimepicker').datetimepicker({
    ignoreReadonly: true
  });
});

.container {
  margin-top: 80px;
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"rel="stylesheet"/><linkhref="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css"rel="stylesheet"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script><divclass="container"><divclass="row"><divclass="col-sm-12"><divclass='col-sm-6 col-sm-offset-3'><divclass="form-group"><divclass='input-group date'id='datetimepicker'><inputtype='text'class="form-control"readonly /><spanclass="input-group-addon"><spanclass="glyphicon glyphicon-calendar"></span></span></div></div></div></div></div></div>

Use the icon to pick your date not the text field. The text field is read only.

Solution 2:

The clause readonly="yes" in put statement is workable, actually required libraries are not included, that are as following ones

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css"rel="stylesheet"><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

Solution 3:

This worked for me:

.bootstrap-datetimepicker-widget.dropdown-menu  {
    width: 100%;
    max-width: calc(100%) !important;
}

Solution 4:

Following clause is workable, if it is not working it simply means required libraries are not included, that are as following ones

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css"rel="stylesheet"><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

Share