CODEWITHSUNDEEP
htmlangularprimeng
Tanzeel
Tanzeel

Reputation: 5008

Why I am getting dates also while using Month only picker [PrimeNG]

I read the PrimeNG documentation. I opened this issue on github also (here). But didn't receive any answer yet. I'm using primeng component i.e. <p-calendar> along with some other primeng components. Here is my code:

<p-overlayPanel #op>
    <div id="comp-render" name="fieldName" ngDefaultControl>
        <div class="all-container">
            <p>Time selection</p><br>
            <div class="ui-g-12 ui-md-4">
                <p-calendar view="month" dateFormat="mm/yy" [yearNavigator]="true" yearRange="2018:2022" [readonlyInput]="true" placeholder="Year-to-date"></p-calendar>
            </div>
            <br>
            <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="customSwitches">
            <label class="custom-control-label" for="customSwitches">Comparing</label>
            </div>
            <br>
            <p-dropdown [options]="cities1" [(ngModel)]="selectedCity1" ></p-dropdown>
            <br><br>
            <div>
                <p-calendar view="month" dateFormat="mm/yy" [yearNavigator]="true" yearRange="2018:2022" [readonlyInput]="true" placeholder="Previous Year-to-date"></p-calendar>
            </div>
        </div>
    </div>
</p-overlayPanel>

But Why I'm getting this: enter image description here

It should look like this:

enter image description here

PS: Assume that no bootstrap is being applied.

I tried updating the primeng and primeicons version. Things worked but there are some style issues.

enter image description here

Upvotes: 0

Views: 3186

Answers (2)

Suhas Parameshwara
Suhas Parameshwara

Reputation: 1454

Like Dino mentioned month picker is not available in Primeng-5.2.7. But if you want to do with 5.2.7 you can do it with a simple CSS trick where you can pick only the month and the year.

CSS

::ng-deep body .ui-datepicker.ui-widget .ui-datepicker-calendar {
  display: none !important;
}

This will display only the year and the month.

Demo => https://stackblitz.com/edit/p-calendar-jdcrjq

Upvotes: 1

Dino
Dino

Reputation: 8292

Version 5 of PrimeNG does not support this feature you are trying to add - The view that shows only months view="month". When browsing through the documentation you have to make sure you are browsing the correct version.

Take a look here: Primeng-5.2.7/Calendar

The month only was implemented in version 6, so your solution would be to update PrimeNG to that version. Since you mentioned that you are using Angular 6, it should be pretty straight forward.

Edit your package.json and change primeng to 6.1.6

NOTE: You might need to add primeicons as well

"primeicons": "^1.0.0-beta.9"

To do it smoothly, follow the PrimeNG - Get Started section for version 6

Upvotes: 1

Related Questions