0
596
Views¿Cómo mostrar solo el icono de fecha en el elemento HTML nativo?
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.
- No sé cuál es el CSS exacto para eliminar u ocultar el borde de entrada, mm/dd/yyyy --:-- --
- No estoy seguro de cómo se comportará si escondo el resto de los elementos después de encontrar el CSS adecuado.
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
2 answers
Answer question0
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>0
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.