时间戳

首页 > 解决方案 > 为什么我在使用仅月份选择器时也得到日期 [PrimeNG]

html - 为什么我在使用仅月份选择器时也得到日期 [PrimeNG]

问题描述

我阅读了 PrimeNG 文档。我也在 github 上打开了这个问题（这里）。但还没有收到任何答复。我正在使用primeng组件 ie<p-calendar>以及其他一些primeng组件。这是我的代码：

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

但为什么我得到这个： 在此处输入图像描述

它应该如下所示：

在此处输入图像描述

PS：假设没有应用引导程序。

我尝试更新primeng和primeicons版本。一切正常，但存在一些风格问题。

在此处输入图像描述

标签： htmlangularprimeng

解决方案

像 Dino 提到的月份选择器在 Primeng-5.2.7 中不可用。但是如果你想用 5.2.7 做，你可以用一个简单的 CSS 技巧来做，你只能选择月份和年份。

CSS

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

这将仅显示年份和月份。

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

推荐阅读