CODEWITHSUNDEEP
htmlangulardatepickerpopup
arun dalakoti
arun dalakoti

Reputation: 11

How to change Position of Datepicker popup in angular

Date picker popup needs to be on the side of calendar dropdown instead of left side

1

Date picker popup needs to be towards the datepicker button..i.e right side instead of left.

Upvotes: 0

Views: 2295

Answers (3)

arun dalakoti
arun dalakoti

Reputation: 11

Well it turns out we can use the following code in your .ts file which have values start and end

@Input() xPosition: DatepickerDropdownPositionX;

And in the html file we can make changes as

<mat-datepicker #any_id [xPosition]= "xPosition"></mat-datepicker>.

Upvotes: 1

Rahul Savaliya
Rahul Savaliya

Reputation: 138

View file:

<div class="class-name">
      <input datepicker-popup="...">
</div>

CSS:

.class-name{
  position: relative;
}
.class-name.dropdown-menu {
   left: auto !important;
   right: 0px;
 }

Upvotes: 1

user20731134
user20731134

Reputation: 9

make in calender tag -> appendTo="body"

Upvotes: 1

Related Questions