Not sure whether it is possible to show only icon for input type date.
<input type="datetime-local" id="test" name="test">
as highlighted below, I’m trying to show datepicker in my Angular material table row (doing *ngFor
)and trigger datetime when click on date icon.
- Don’t know what is the exact css to remove or hide input border,mm/dd/yyyy –:– —
- Not sure how it will behave if i hide rest of the elements after finding proper css.
Alternate
after search lot, Found this alternate package and implemented, but its look odd in inside app.
So decided to go back and use native html element.
Could someone help me how to show only date-time icon ?
or suggest me datetime picker package for Angular?
Thanks to all
Advertisement
Answer
complementary my comment
Using 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>
usign material date picker
<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>