No estoy seguro de si es posible mostrar solo el icono para la fecha de tipo de entrada.
<input type="datetime-local" id="test" name="test">
como se destaca a continuación, estoy tratando de mostrar el selector de fechas en mi fila de la tabla de materiales Angular (haciendo *ngFor
) y activar la fecha y hora cuando hago clic en el icono de fecha.
Alterno
después del lote de búsqueda, encontré este paquete alternativo e lo implementé, pero se ve extraño en la aplicación interna.
Así que decidí volver y usar el elemento html nativo.
¿Alguien podría ayudarme a mostrar solo el ícono de fecha y hora?
o sugiérame un paquete selector de fecha y hora para Angular?
Gracias a todos
complementa mi comentario
Usando ngb-datepicker
<div ngbDropdown class="form-group" placement="bottom-rigth" #myDrop="ngbDropdown" (openChange)="open($event, dp)" > <div class="input-group"> <button ngbDropdownToggle class="btn btn-outline-secondary calendar" type="button" ></button> <div ngbDropdownMenu> <ngb-datepicker #dp (select)="onDateSelection($event, myDrop)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden" > </ngb-datepicker> </div> </div> </div>
usar selector de fecha de material
<button mat-icon-button [matMenuTriggerFor]="appMenu"> <mat-icon>calendar_today</mat-icon> </button> <mat-menu #appMenu="matMenu" class="drop-calendar" > <div (click)="$event.stopPropagation()"> <mat-calendar #calendar (selectedChange)="select($event,calendar)" ></mat-calendar> </div> </mat-menu>
Para descubrir las propiedades de -webkit en Chrome Developer Tools, ingresé a Configuración> Preferencias> Elementos y luego marqué "Mostrar agente de usuario shadow DOM". Una vez que se realizó este cambio, seleccioné el elemento local de fecha y hora y profundicé en los pseudoelementos div subyacentes y descubrí que al agregar el siguiente CSS a mi página, solo podía mostrar el ícono del calendario.
input[type="datetime-local"]::-webkit-inner-spin-button, input[type="datetime-local"]::-webkit-calendar-picker-indicator { /* display: none; -webkit-appearance: none; */ margin:0; } input[type="datetime-local"]::-webkit-datetime-edit { display:none; }
El resultado es: , solo se muestra el icono del calendario hasta que el usuario hace clic para seleccionar una fecha.