绘制日历
在本教程中，我们将通过实例来学习Priming日历的基础知识。Primeng是一组用于Angular 12库的Rich UI元素。
日历是一个供用户选择日期的组件。
日历的特点
- 支持多语言
- 双向绑定
- 能够根据用户的要求进行定制
- 允许选择时间和日期
首先，使用npm软件包管理器安装angular-cli工具。Angular-cli是一个创建Angular应用程序的命令行工具。
npm install @angular/cli -g
一旦安装，为了测试Angular-cli的安装，请发出一个版本命令
B:\angularclidemo>ng --version
Angular-cli已经安装，Cli提供了各种命令来处理Angular应用程序/组件代码。现在你已经准备好使用Angular-cli创建应用程序了。
ng new calendardemo
这将创建一个带有所有初始化配置和代码的日历演示应用程序。使用npm install命令安装依赖项
npm install
为了启动Angular应用程序，请发出ng serve命令
ng serve
服务器启动时默认端口为4200
用Angular12安装Primeng
要为Angular 12应用程序安装primeng，你需要添加primeng和font-awesome依赖项
yarn add primeng font-awesome
npm install primeng font-awesome
样式配置
按以下方式修改angular.json文件。angular.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",
]
导入CalendarModule
下一步是在app.module.ts中添加CalendarModule。
import {CalendarModule} from 'primeng/calendar';
修改HTML
在app.component.html中添加日历HTML代码 ngModel被设置为selectDate。这在UI和Modal之间起到了双向数据绑定的作用。
类型脚本的变化
export class AppComponent implements OnInit{
selectDate: Date;
}
输出
