在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了。有錯誤或不足之處請留言，我將盡快更正，謝謝！