Calendar(日历)

日历是一个输入组件，可以选择日期，时间

使用说明

1. Import

import {Calendar} from 'primeng/primeng';

2. Getting Started

使用ngModel指令实现数据双向绑定

<p-calendar [(ngModel)]="dateValue"></p-calendar>

export class MyModel { 
    dateValue:string;
}

3.Model Driven Forms

日历组件也可以作用于模型驱动的表单（Model Driven Forms）

<p-calendar formControlName="date"></p-calendar>

4.Popup and Inline

日历组件默认以弹出形式展现，可以设置内联风格展示

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

5.日期格式

默认格式为: mm/dd/yy, 通过dataFormat设置日期格式 格式公式)

<p-calendar [(ngModel)]="dateValue" dateFormat="dd.mm.yy"></p-calendar>

6.时间

通过设置timeOnly或者timeFormat属性来激活TimePicker 日期格式选项

<p-calendar [(ngModel)]="dateTimeValue" dateFormat="dd.mm.yy" timeFormat="HH:mm"></p-calendar>

7.展现效果

Calendar组件弹出可以设置多种效果，默认为fadeIn 其他效果有:sildeDown,silde,clip

<p-calendar [(ngModel)]="dateValue" showAnim="slideDown"></p-calendar>

8.日期限制

禁用手动输入日期,将readonlyInput设置为true,并且限制使用minDate和maxDate选项可选择的日期。minDate和maxDate允许值为类似dateFormat中的字符串或着类似"+ 1 m + 7 d"这种。

<p-calendar [(ngModel)]="dateValue" minDate="-1m" maxDate="+1m" [readonlyInput]="true">></p-calendar>

9.本地化

本地化为不同的语言和格式定义,设置区域属性。下面是西班牙的日历。

<p-calendar [(ngModel)]="dateValue" [locale]="es"></p-calendar>

export class MyModel { 
    es: any; 
    ngOnInit() { 
        this.es = { 
            //date 
            closeText: "Cerrar", 
            prevText: "<Ant", 
            nextText: "Sig>", 
            currentText: "Hoy", 
            monthNames: [      "enero","febrero","marzo","abril","mayo","junio", "julio","agosto","septiembre","octubre","noviembre","diciembre" ], 
            monthNamesShort: [ "ene","feb","mar","abr","may","jun", "jul","ago","sep","oct","nov","dic" ], 
            dayNames: [ "domingo","lunes","martes","miércoles","jueves","viernes","sábado" ], 
            dayNamesShort: [ "dom","lun","mar","mié","jue","vie","sáb" ],
            dayNamesMin: [ "D","L","M","X","J","V","S" ], 
            weekHeader: "Sm", 
            dateFormat: "dd/mm/yy", 
            firstDay: 1, 
            isRTL: false, 
            showMonthAfterYear: false, 
            yearSuffix: "" 

            //time 
            timeOnlyTitle: 'Elegir una hora', 
            timeText: 'Hora', 
            hourText: 'Horas', 
            minuteText: 'Minutos', 
            secondText: 'Segundos', 
            millisecText: 'Milisegundos', 
            microsecText: 'Microsegundos', 
            timezoneText: 'Uso horario', 
            timeFormat: 'HH:mm', 
            timeSuffix: '', 
            amNames: ['a.m.', 'AM', 'A'], 
            pmNames: ['p.m.', 'PM', 'P'], 
        }; 
    } 
}

详情看: datapicker timepicker

10.属性

11.事件

12.样式风格

13.第三方组件依赖

jQuery UI 的 Datepicker 和 DateTimePicker