Angular4中使用PrimeNG calendar

逃离我推掉我的手 2022-05-22 09:27 134阅读 0赞

这段时间在我的Angular项目中需要用到日历这一控件：

![Image 1][]

像treeview、calendar等等这些“大”型控件，如果要自己写的话，需要花费很多时间，而且容易遗漏掉一些细节问题。如同大漠穷秋老师说的，如果一个ui库缺少了这些“大”型控件，那这个ui库一定是不合格的。于是我在： [easyui][]、 [MaterialAngular][]、 [ant-design][]、 [primeng][]里面找。 其中，easyui的使用方式是jQuery，而Angular官方不推荐使用jq，所以第一个放弃了他。而后三者相比之下，我果断选择了primeng，为什么？看他的默认样式：

![Image 1][]

十分相似，既然在primeng里有相似度如此高的控件，为什么要选其他需要自己调整更多的库呢？好，开始Get Started！

![Image 1][]

这时候，可以看到primeng给出的文档。 首先，文档告诉我们需要使用npm进行对PrimeNG库的下载工作。有人说：这个我知道啊，淘宝大大好，我们用cnpm吧！但是我想说，千万不要这样做。如果你用cnpm进行下载安装操作，你的日历控件是显示不出自带样式的。为什么？因为cnpm下载的资源经常会缺失部分内容，如果你做的东西只是自己用或者还没进入生产模式，那没问题。但是如果你的项目一旦进入生产，请务必先把你的node\_module删除干净，然后用npm install安装一遍，不要嫌慢或者麻烦，这将为你在以后避免掉更多的修复bug的机会。要记住这点，如果你执意而行，那或许待会儿你会回到这里的。  
接下来，如果你是用AngularCli构建的项目，并且之前是使用的cnpm方式安装的node\_module，请按照下面的步骤走一遍，如果一直都是用的npm，那么请跳过第一步：  
删除你的node\_module

打开你的项目中的package.json，在“dependencies”中加入：

"primeng": "^4.1.0",
    "font-awesome": "^4.7.0"

打开你的项目中的.angular-cli.json，在“styles”中加入：

"../node_modules/font-awesome/css/font-awesome.min.css",
    "../node_modules/primeng/resources/primeng.min.css",
    "../node_modules/primeng/resources/themes/omega/theme.css"

如果你没有安装animations，还是安装一下。…有没有animations你心里就没点A数吗？

npm install @angular/animations --save

最后，安装node\_module：

npm install

慢也没办法，自己约的……代码，总得负责到底。  
现在解释一下为什么要有以上操作：  
第一步清空node\_module是因为防止之前的部分资源缺失，造成npm安装时产生异常，毕竟npm和cnpm是同父异母生的。 第二步添加依赖，是让npm知道，到底要给你安装些什么资源，这里安装了primeng的相关组件和一些样式 第三步让你的项目引用primeng里面的样式文件，这样就能保证你从primeng里面使用的控件有他的“出厂”样式 第四步是因为不少控件都有或多或少的动画在里面，如果你不安装而使用了primeng，控制台会报错的，可以先试着不安装 第五步，让npm安装好你需要的所有类库文件。在你的模块中引入你要用的控件模块，在这里我要用的是calendar，所以我引入：

import {CalendarModule} from 'primeng/primeng'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ imports: [ *其他模块*, CalendarModule, BrowserAnimationsModule ], *** })

在目标html中引入：

<p-calendar [(ngModel)]="date" [inline]="true"></p-calendar>

接下来可以看看效果：

![Image 1][]

定好了默认宽高，让我无法改变。我能怎么办，我也很无奈啊，自己写类名，甚至修改源码，也无法让他变宽居中半步，果然老哥稳！纠结半天，最后只能在全局样式，styles.css里面动刀：

p-calendar{ width: 100%; display: block; margin-top: 8%; } body .ui-calendar{ width: 90%; margin: 0 auto; display: block; } body .ui-datepicker{ width: 100%; }

让你跳，还不是被我改变成功了。然后呢，我想要这个日历是显示中文，英文太不亲切了，这时候可以翻翻API。

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th style="text-align:right;">类型</th> 
   <th style="text-align:center;">默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>selectionMode</td> 
   <td style="text-align:right;">string</td> 
   <td style="text-align:center;">single</td> 
   <td>定义时间选择器的选择模式single,multiple和range</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td style="text-align:right;">string</td> 
   <td style="text-align:center;">null</td> 
   <td>组件的内联样式</td> 
  </tr> 
  <tr> 
   <td>styleClass</td> 
   <td style="text-align:right;">string</td> 
   <td style="text-align:center;">null</td> 
   <td>组件的样式类</td> 
  </tr> 
  <tr> 
   <td>inputStyle</td> 
   <td style="text-align:right;">string</td> 
   <td style="text-align:center;">null</td> 
   <td>输入区域的样式</td> 
  </tr> 
  <tr> 
   <td>inputStyleClass</td> 
   <td style="text-align:right;">string</td> 
   <td style="text-align:center;">null</td> 
   <td>输入区域的样式类</td> 
  </tr> 
  <tr> 
   <td>inputId</td> 
   <td style="text-align:right;">string</td> 
   <td style="text-align:center;">null</td> 
   <td>定义输入框的id</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td style="text-align:right;">string</td> 
   <td style="text-align:center;">null</td> 
   <td>输入框的name属性</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td style="text-align:right;">string</td> 
   <td style="text-align:center;">null</td> 
   <td>文本内容的提示信息</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td style="text-align:right;">boolean</td> 
   <td style="text-align:center;">false</td> 
   <td>为true时，选择的日期将不会被获取到</td> 
  </tr> 
  <tr> 
   <td>dateFormat</td> 
   <td style="text-align:right;">string</td> 
   <td style="text-align:center;">mm/dd/yy</td> 
   <td>转换获取日期的格式（这个我没看到效果）</td> 
  </tr> 
  <tr> 
   <td>inline</td> 
   <td style="text-align:right;">boolean</td> 
   <td style="text-align:center;">false</td> 
   <td>为true的时候日历将直接显示，false则为文本弹出式</td> 
  </tr> 
  <tr> 
   <td>showOtherMonths</td> 
   <td style="text-align:right;">boolean</td> 
   <td style="text-align:center;">true</td> 
   <td>是否让本月显示其他月份的日期</td> 
  </tr> 
  <tr> 
   <td>selectOtherMonths</td> 
   <td style="text-align:right;">boolean</td> 
   <td style="text-align:center;">true</td> 
   <td>是否让本月可选其他月份的日期</td> 
  </tr> 
  <tr> 
   <td>showIcon</td> 
   <td style="text-align:right;">boolean</td> 
   <td style="text-align:center;">false</td> 
   <td>是否展示小日历图标</td> 
  </tr> 
  <tr> 
   <td>showOnFocus</td> 
   <td style="text-align:right;">boolean</td> 
   <td style="text-align:center;">true</td> 
   <td>你选择日期的时候是否会有标记</td> 
  </tr> 
  <tr> 
   <td>icon</td> 
   <td style="text-align:right;">string</td> 
   <td style="text-align:center;">fa-calendar</td> 
   <td>自定义小日历图标</td> 
  </tr> 
  <tr> 
   <td>minDate</td> 
   <td style="text-align:right;">Date</td> 
   <td style="text-align:center;">null</td> 
   <td>可选的最小日期</td> 
  </tr> 
  <tr> 
   <td>maxDate</td> 
   <td style="text-align:right;">Date</td> 
   <td style="text-align:center;">null</td> 
   <td>可选的最大日期</td> 
  </tr> 
  <tr> 
   <td>disabledDates</td> 
   <td style="text-align:right;">Array</td> 
   <td style="text-align:center;">null</td> 
   <td>数组里的日期将不可被选</td> 
  </tr> 
  <tr> 
   <td>disabledDays</td> 
   <td style="text-align:right;">Array</td> 
   <td style="text-align:center;">null</td> 
   <td>数组里的天数将不可被选</td> 
  </tr> 
  <tr> 
   <td>monthNavigator</td> 
   <td style="text-align:right;">boolean</td> 
   <td style="text-align:center;">false</td> 
   <td>月份是否可以弹出下拉框选择</td> 
  </tr> 
  <tr> 
   <td>yearNavigator</td> 
   <td style="text-align:right;">boolean</td> 
   <td style="text-align:center;">false</td> 
   <td>年份是否可以弹出下拉框选择</td> 
  </tr> 
  <tr> 
   <td>yearRange</td> 
   <td style="text-align:right;">string</td> 
   <td style="text-align:center;">null</td> 
   <td>下拉选择的年份范围，格式就像(2000:2020)</td> 
  </tr> 
  <tr> 
   <td>showTime</td> 
   <td style="text-align:right;">boolean</td> 
   <td style="text-align:center;">false</td> 
   <td>是否展示时间选择器</td> 
  </tr> 
  <tr> 
   <td>hourFormat</td> 
   <td style="text-align:right;">string</td> 
   <td style="text-align:center;">24</td> 
   <td>设置是12小时制还是24小时制</td> 
  </tr> 
  <tr> 
   <td>locale</td> 
   <td style="text-align:right;">object</td> 
   <td style="text-align:center;">null</td> 
   <td>用一个对象来配置日历显示的参数（下附简例）</td> 
  </tr> 
  <tr> 
   <td>timeOnly</td> 
   <td style="text-align:right;">boolean</td> 
   <td style="text-align:center;">false</td> 
   <td>是否只显示时间选择器</td> 
  </tr> 
  <tr> 
   <td>dataType</td> 
   <td style="text-align:right;">string</td> 
   <td style="text-align:center;">date</td> 
   <td>返回ngModel的值的类型，默认是date和string二选一</td> 
  </tr> 
  <tr> 
   <td>required</td> 
   <td style="text-align:right;">boolean</td> 
   <td style="text-align:center;">false</td> 
   <td>在表单项中，日历项是否必填</td> 
  </tr> 
  <tr> 
   <td>showSeconds</td> 
   <td style="text-align:right;">boolean</td> 
   <td style="text-align:center;">false</td> 
   <td>是否在时间选择中选显示秒</td> 
  </tr> 
  <tr> 
   <td>stepHour</td> 
   <td style="text-align:right;">number</td> 
   <td style="text-align:center;">1</td> 
   <td>每次切换小时数</td> 
  </tr> 
  <tr> 
   <td>stepMinute</td> 
   <td style="text-align:right;">number</td> 
   <td style="text-align:center;">1</td> 
   <td>每次切换分钟数</td> 
  </tr> 
  <tr> 
   <td>stepSecond</td> 
   <td style="text-align:right;">number</td> 
   <td style="text-align:center;">1</td> 
   <td>每次切换秒数</td> 
  </tr> 
  <tr> 
   <td>utc</td> 
   <td style="text-align:right;">boolean</td> 
   <td style="text-align:center;">false</td> 
   <td>是否把选择的日期换算成世界标准时间</td> 
  </tr> 
  <tr> 
   <td>maxDateCount</td> 
   <td style="text-align:right;">number</td> 
   <td style="text-align:center;">null</td> 
   <td>在多选模式中，可选日期的最大个数</td> 
  </tr> 
  <tr> 
   <td>showButtonBar</td> 
   <td style="text-align:right;">boolean</td> 
   <td style="text-align:center;">false</td> 
   <td>是否在底部显示今天和清零按钮</td> 
  </tr> 
  <tr> 
   <td>todayButtonStyleClass</td> 
   <td style="text-align:right;">string</td> 
   <td style="text-align:center;">ui-secondary-button</td> 
   <td>今天按钮的样式类</td> 
  </tr> 
  <tr> 
   <td>clearButtonStyleClass</td> 
   <td style="text-align:right;">string</td> 
   <td style="text-align:center;">ui-secondary-button</td> 
   <td>清零按钮的样式类</td> 
  </tr> 
 </tbody> 
</table>

从上可知，加个locale属性就好了：

**html code**

<p-calendar [(ngModel)]="date" [inline]="true" [locale]="ch"></p-calendar>

**typescript code**

ch = { /** 每周第一天，0代表周日 */ firstDayOfWeek: 0, /** 每周天数正常样式 */ dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], /** 每周天数短样式（位置较小时显示） */ dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], /** 每周天数最小样式 */ dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"], /** 每月月份正常样式 */ monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], /**每月月份短样式 */ monthNamesShort: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"] };

看看效果：

![Image 1][]

[Image 1]: 
[easyui]: https://link.jianshu.com?t=https://www.baidu.com/link?url=AvCmicaqUKeYUDCW2TPF63TLJLd5d736uHKz6ixZBZR0ynP-vMR7jYIKjttobMZX&wd=&eqid=e79f1cdd00006e4f0000000659bc9043
[MaterialAngular]: https://link.jianshu.com?t=https://material.angular.io/
[ant-design]: https://link.jianshu.com?t=https://ant.design/index-cn
[primeng]: https://link.jianshu.com?t=https://www.primefaces.org/primeng/#/