Necesito habilitar un cuadro de texto basado en el cambio de fecha en jQuery Datepicker. Así que he escrito un código como este:

Código HTML:

 <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]; } });

Una vez que hago clic en el selector de fechas, aparece el calendario y si hago clic en una fecha, aparece otro selector de fechas sin ningún CSS, solo fechas de color verde.

¿Por qué este calendario aparece dos veces?

Estoy usando el tema AdminLTE, por lo que daterangepicker y calendar son los js proporcionados solo desde el tema AdminLTE.

imagen de error

La página inicial se ve así

Una vez que hacemos clic en el calendario, aparece este extraño calendario nuevamente.

Cuando vuelvo a seleccionar la fecha, habilita el cuadro de texto a la derecha