0

When I use ngb-datepicker, I set [minDate] and [maxDate] for one year. So users can only choose a date within one year. But I want to remove the arrows that show beside the year-picker-box. Is it possible to remove them?

My code:

<ngb-datepicker #dp [(ngModel)]="toModel" [minDate]="fromModel" (ngModelChange)="setToDate($event)" [maxDate]="{year: 2019, month: 12, day: 31}" [startDate]="startDate"></ngb-datepicker>

enter image description here

theduck
  • 2,589
  • 13
  • 17
  • 23
Aung Phyo Oo
  • 11
  • 6
  • 1
    add the code you tried – Allabakash Dec 20 '19 at 04:51
  • 1
    Right and left arrows are html elements and you can find selector and add to it `display: none`. Top and bottom arrows most likely are native browser dropdown arrows. [Read that question](https://stackoverflow.com/questions/16603979/how-to-remove-the-default-arrow-icon-from-a-dropdown-list-select-element) for info how to remove them. – Arseniy-II Dec 20 '19 at 05:47
  • `code``code` I set minimum date from component and maximum date from view. That give me one year range. But I see arrows of year picker. – Aung Phyo Oo Dec 20 '19 at 06:38
  • @Arseniy-II how to get selector for ngb-datepicker. I have no idea for this. Can you show me example. Thank you. – Aung Phyo Oo Dec 20 '19 at 06:42
  • @AungPhyoOo at the end it is just html and css. Go to your developer tools check what class has that element. Target that element and add `display: none` for that element in your css file – Arseniy-II Dec 20 '19 at 07:02
  • `.ngb-dp-arrow.right { display: none }` – Arseniy-II Dec 20 '19 at 07:09
  • It works when I change in developer tools. But not work in my project code. Anyway Thank you for your answer. – Aung Phyo Oo Dec 20 '19 at 07:17
  • @AungPhyoOo Do you just want the arrows removed, or for the selection to be disabled? – igg Dec 20 '19 at 09:46
  • @IraklisGkougkousis I want to remove just the arrows because I have done disabling them. – Aung Phyo Oo Dec 23 '19 at 04:24

1 Answers1

0

Yes the right arrow can be hidden using the following class

.custom-select {
background: #ffffff !important;
}

.ngb-dp-arrow.right {
display: none !important;
}

Include these classes in styles.css then only it will work, including in styles of a component will be overridden by global css. Also, the class custom-select will hide the arrow of both month and year.

Anu Priya
  • 121
  • 2
  • 5