es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El borde del p-calendario de PrimeNG no está implementado.

13 Jul, 2023 Programación

Estoy utilizando PrimeNG para implementar un selector de tiempo para ingresar las horas de inicio y fin. Implemento el selector de tiempo p-calendar y muestro el resultado, puedes ver que el borde del selector de tiempo no se muestra correctamente.

Aquí está mi código HTML:

<div class="overtime-log-form-working-hours">
    <div class="field">
      <label for="start-time" class="col-12 md-2 pb-0">Hora de inicio</label>
      <div class="col-12">
        <p-calendar formcontrolname="start-time" id="start-time" name="start-time" [(ngmodel)]="model.start-time" (onblur)="formHelper.validateControl('start-time')" [timeonly]="true" placeholder="00:00">
        </p-calendar>
      </div>
    </div>
    <div class="field">
      <label for="end-time" class="col-12 md-2 pb-0">Hora de fin</label>
      <div class="col-12">
        <p-calendar class="border" formcontrolname="end-time" id="end-time" name="end-time" [(ngmodel)]="model.end-time" (onblur)="formHelper.validateControl('end-time')" [timeonly]="true" placeholder="00:00">
        </p-calendar>
      </div>
    </div>
  </div>

.SCSS

:host ::ng-deep .overtime-log-form {
.col-12 {
padding: 0;
}
&-working-hours {
display: flex;
.field {
&:first-child {
margin-right: 2.0625rem;
}
.p-calendar{
max-width: 81px;
}
}
}
#reason {
min-height: 7.6rem;
max-height: 7.6rem;
overflow-y: auto!important;
}
}

Puedes ver un ejemplo de imagen aquí: link

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para solucionar el problema, puede agregar estilos CSS para personalizar el borde del selector de tiempo.

    Aquí están los pasos:

    1. Agregue una clase personalizada al selector de tiempo que desea estilizar, por ejemplo, custom-time-picker.
    2. Use la pseudo-clase ::ng-deep para apuntar al selector de tiempo y personalizar su borde.
    3. Agregue la clase personalizada al selector de tiempo problemático.

    Aquí hay un ejemplo:

    /* Agregue este CSS a su archivo SCSS */
:host ::ng-deep .custom-time-picker .ui-calendar {
  border: 1px solid #ced4da;
  border-radius: 4px;
  box-shadow: none;
}

/* Agregue la clase personalizada a su selector de tiempo problemático */
<p-calendar class="border custom-time-picker" formcontrolname="end_time" id="end_time" name="end_time" [(ngmodel)]="model.end_time" (onblur)="_formHelper.validateControl('end_time')" [timeonly]="true" placeholder="00:00">

    Esto debería solucionar el problema y mostrar correctamente el borde del selector de tiempo.

Comments are closed.