How to disable the datetimepicker?

[webspeaks]

How can we dynamically enable/disable the datetimepicker?

[dalelotts]

Can you tell me a bit more about your use case?

[webspeaks]

I need to disable the calender until a radio button is clicked. So that no
click operation can be performed on it. When the radio button is checked,
the calender should be re-enabled (clickable).
On 17-Dec-2014 9:59 PM, "Dale Lotts" notifications@github.com wrote:

Can you tell me a bit more about your use case?

—
Reply to this email directly or view it on GitHub
#123 (comment)
.

[dalelotts]

I guess you could use the on-before-render callback to disable all dates until the radio button is checked. You might also wrap it in an ng-if or ng-show tied to the radio button.

[webspeaks]

Ng-if/show would completely hide the datepicker. I need to show it in
disabled mode. I can try on-before-render callback but thats not desired
solution.
May be you can add this feature in a future version of this directive.
On 17-Dec-2014 10:07 PM, "Dale Lotts" notifications@github.com wrote:

I guess you could use the on-before-render callback to disable all dates
until the radio button is checked. You might also wrap it in an ng-if or
ng-show tied to the radio button.

—
Reply to this email directly or view it on GitHub
#123 (comment)
.

[dalelotts]

Feel free to submit a PR per https://github.com/dalelotts/angular-bootstrap-datetimepicker/blob/master/contributing.md

[webspeaks]

Sure i will do..
On 17-Dec-2014 10:13 PM, "Dale Lotts" notifications@github.com wrote:

Feel free to submit a PR per
https://github.com/dalelotts/angular-bootstrap-datetimepicker/blob/master/contributing.md

—
Reply to this email directly or view it on GitHub
#123 (comment)
.

[grd2345]

Has this been added? I need this ability also

[grd2345]

on my project, i found a workaround by adding a ng-attr-data-toggle attribute to the which will disable the toggling of the date dropdown. It seems to be working alright. below is the html of the datetimepicker.

<div class="dropdown"><a id="dropdown2" ng-attr-data-toggle="{{!item.neverExpires &amp;&amp; &quot;dropdown&quot; || &quot;&quot; }}" data-target="#" href="#" class="dropdown-toggle">
    <div class="input-group">
      <input format-date-input="format-date-input" type="text" ng-model="expiresDateFormatString" final-date-value="item.expires" date-picker-value="expiresDateValue" ng-disabled="item.neverExpires" ng-required="!item.neverExpires" class="form-control"/><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div></a>
  <ul role="menu" aria-labelledby="dLabel" class="dropdown-menu">
    <datetimepicker ng-model="expiresDateValue" data-datetimepicker-config="{ dropdownSelector: '#dropdown2' }"></datetimepicker>
  </ul>
</div>

[bradrisse]

used css and boolean switch to accomplish disabled

CSS

.disabled-picker {
   cursor: not-allowed;
}
.disabled-picker:before {
   content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.8);
}

HTML

<div ng-class="{'disabled-picker': data.isDisabled}">
    <datetimepicker ng-model="data.date"></datetimepicker>
</div>

JS

$scope.data = {
    date: moment(),
    isDisabled: true
};