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.

1. Don't know what is the exact css to remove or hide input border,mm/dd/yyyy --:-- --
2. 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

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.

1. Don't know what is the exact css to remove or hide input border,mm/dd/yyyy --:-- --
2. 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

• javascript
• html
• angular
• angular-material

• I'm struggling to understnad what you want to do here. Do you want to show an icon (on its own) and then show the native datetime picker popup when it's clicked? – T.J. Crowder Commented Nov 11, 2021 at 9:05
• 1 @T.J.Crowder yes exactly . Sorry for not conveying my issue clearly – Jade Commented Nov 11, 2021 at 9:07
• Overlaying a div over the input box till the width where calendar icon starts might work, like Codepen codepen.io/wwwrakesh/pen/GRvBBdK – Rakesh Shekhawat Commented Nov 11, 2021 at 9:15
• @RakeshShekhawat but <div class="hide-input"></div> its still in DOM, this may affect other columns structure in the mat-table – Jade Commented Nov 11, 2021 at 9:26
• Jade, you can use any "dropdown" with an icon. If use material use a mat-menu and inside a mat-calendar, if use ng-bootstrap use a dropdown with a ngb-datepicker, if use another library sure has a menu or a dropdown and a calendar. An "icon" can be a simple svg -you can choose,e.g. any svg of bootstrp icons- – Eliseo Commented Nov 11, 2021 at 21:29

3 Answers 3

To discover the -webkit properties in Chrome Developer Tools, I entered Settings > Preferences > Elements and then checked "Show user agent shadow DOM". Once this change was made, I selected datetime-local element and drilled down on the underlying div pseudo elements and discovered by adding the following CSS to my page, I was able to show only the calendar icon.

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

The result is: , just the calendar icon is displayed until the user clicks to select a date.

plementary my ment

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>

Assign the width of the element to 50px, it will be enough to show only the icon and the rest won't be visible.