0

Problem :

  • How can I remove the caret and incrementor/decrementor that appears when I hover over the matInput type=date.
Abhishek Kumar
  • 2,501
  • 10
  • 25
chaucer
  • 91
  • 1
  • 1
  • 4

1 Answers1

0

Demo with no hovered increment/decrement icons

Application Code : https://stackblitz.com/edit/angular-incons-hide-input-type-date?file=src/app/app.component.css

Approach :

  • I looked for the things that are applied on :hover of matinput but no luck,
    So i tricked by making a mask of white color which will cover that icons using :before.

    This will hide those icons and their actions will not be available like opening of calendar dialog on clicking from icon, as icon is hidden.


Code :

Give class to input tag
<input class="myInput" matInput type="date" placeholder="no icons on hover" value="">,
then add following css

.myInput::before {
    content: 'we';
    position: absolute;
    right: 0;
    width: 40px;
    height: 40px;
    background-color: white;
    color: white;
}
Abhishek Kumar
  • 2,501
  • 10
  • 25
  • actually it is not related to material per se..it appears by default for all html input type=date..so is there a method to make it disappear? – chaucer Nov 15 '18 at 08:57
  • and also i want the datepicker to open when i click on the input field..is there a method for it? – chaucer Nov 15 '18 at 08:59
  • @chaucer yes, its for those where you will give this particular class `myInput`, and according to material there is different date picker for this, they don't use type='date' with matInput. See Datepicker docs : https://material.angular.io/components/datepicker/overview – Abhishek Kumar Nov 15 '18 at 08:59
  • See this if its helpful, we can't have control over html5 input with type date, https://stackoverflow.com/questions/18326982/open-html5-date-picker-on-icon-click/#answer-18327043, i will suggest to use datepicker component from angular. – Abhishek Kumar Nov 15 '18 at 09:03
  • I was looking at my problem wrongly..I am just having – chaucer Nov 15 '18 at 09:05
  • See this also, it may help : https://stackoverflow.com/questions/14946091/are-there-any-style-options-for-the-html5-date-picker#16106788/#answer-16106788 – Abhishek Kumar Nov 15 '18 at 09:07
  • I want the datepicker to open on clicking the input field ..is that possible? – chaucer Nov 15 '18 at 09:25
  • @chaucer i tried but no luck, i guess you can style your input with this only https://stackoverflow.com/questions/14946091/are-there-any-style-options-for-the-html5-date-picker#16106788/#answer-16106788, as we have to deal with those icons from html5. As these are not present in html, if present, we can bind their click or call but all we have is input field and focusing clicking on that is not opening the dialog. – Abhishek Kumar Nov 15 '18 at 10:17