I need to enable a textbox based on the date change in jQuery Datepicker. So I have written a code like this:

HTML Code:

<div class="col-lg-3">
  <div class="form-group">
    <label for="support_due_date" class="form-label">Due date if any</label>
    <div class="input-group date" data-target-input="support_due_date">
      <input type="text" id="support_due_date" name="support_due_date" class="form-control datetimepicker-input" data-target="#support_due_date" value="<?php echo set_value('support_due_date');?>" />
      <div class="input-group-append" data-target="#support_due_date" data-toggle="datetimepicker">
        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
      </div>
    </div>
    <?php echo form_error('support_due_date'); ?>
  </div>
</div>

$("#support_due_date").datepicker({    
     onClose: function(){      
      $("#justify_urgency").removeAttr("readonly");    
      var todays_date = new Date().toISOString().split('T')[0];
     }
  });

Once I click on datepicker, it gives calendar popped up and if I click on a date then it gives another datepicker without any CSS, just green color dates.

Why this calendar pops up twice?

I am using AdminLTE theme so daterangepicker and calendar are the js provided from AdminLTE theme only.

Image of error

Initial Page looks like this

Once we click on calendar, it gives this weird calendar again

When I select date again, it enables textbox to the right