在Angular4中使用PrimeNG calendar

这段时间在个人Angular项目中须要用到日历这一控件：

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

十分类似，既然在primeng里有类似度如此高的控件，为何要选其余须要本身调整更多的库呢？好，开始Get Started！

这时候，能够看到primeng给出的文档。 
首先，文档告诉咱们须要使用npm进行对PrimeNG库的下载工做。有人说：这个我知道啊，淘宝大大好，咱们用cnpm吧！可是我想说，千万不要这样作。若是你用cnpm进行下载安装操做，你的日历控件是显示不出自带样式的。为何？由于cnpm下载的资源常常会缺失部份内容，若是你作的东西只是本身用或者还没进入生产模式，那没问题。可是若是你的项目一旦进入生产，请务必先把你的node_module删除干净，而后用npm install安装一遍，不要嫌慢或者麻烦，这将为你在之后避免掉更多的修复bug的机会。要记住这点，若是你执意而行，那或许待会儿你会回到这里的。

接下来，若是你是用AngularCli构建的项目，而且以前是使用的cnpm方式安装的node_module，请按照下面的步骤走一遍，若是一直都是用的npm，那么请跳过第一步：

1. 删除你的node_module

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

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

3. 打开你的项目中的.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"

4. 若是你没有安装animations，仍是安装一下。…有没有animations你内心就没点A数吗？

   npm install @angular/animations --save

5. 最后，安装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>

接下来能够看看效果：

emmmm，很棒，定好了默认宽高，让我没法改变。我能怎么办，我也很无奈啊，本身写类名，甚至修改源码，也没法让他变宽居中半步，果真老哥稳！纠结半天，最后只能在全局样式，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。

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

从上可知，加个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"]
  };

看看效果： 

本身再美化一下就好~

相信到这里，你已经知道如何使用primeng了。有错误或不足之处请留言，我将尽快更正，谢谢！