How to hide time from the date time picker only for Inactive label using Angular8 bootstarp date time picker

Question

in this i am using bootstrap datetime picker to show date and time calendar, but time must be hided in all labels except inactive. so only for Inactive label, i need to show time and date picker.

I tried below css but this hides all time pickers, but i need to show time picker only in Inactive label when checkbox is checked and clicked on date input.

I have attached demo as well.

Css:

::ng-deep
  .bootstrap-datetimepicker-widget
  .list-unstyled
  li:nth-child(2) {
  display: none;
}

Html:

<div class="col-6 {{isReadOnly ? 'link-disabled' : ''}}"
            *ngFor="let restrictValue of Restrictions;let i = index">
            <div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" id="{{restrictValue.id}}"
                [checked]="restrictValue.boolValue" (change)="restrictValue.boolValue = $event.target.checked"
                >
              <label class="custom-control-label" for="{{restrictValue.id}}">{{restrictValue.label}}</label>
            </div>
            <div class="form-group">
              {{restrictValue.datetime}}
              <input type="text" class="form-control onlyDateTime" placeholder="MM/DD/YYYY HH:MM AM/PM"
                [disabled]="!restrictValue.boolValue" [(ngModel)]="restrictValue.datetime"  (click)="dateRestriction( i)"
                [ngModelOptions]="{standalone: true}" >
            </div>
          </div>

Demo

Answer 1

pickDate(index) {
  this.Restrictions.forEach((value, i) => {
    if (i === index) {
      $(`#${index}`).datetimepicker({
        format: 'DD/MM/YYYY HH:mm:ss a',
      });
    } else {
      $(`#${i}`).datetimepicker({
        format: 'DD-MM-YYYY',
      });
   }
 });
}

You can Do condition based on how you want to enable or disable timer for datetime picker. Complete demo you can find in this Stackblitz