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,那么请跳过第一步:
删除你的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>
接下来可以看看效果:
定好了默认宽高,让我无法改变。我能怎么办,我也很无奈啊,自己写类名,甚至修改源码,也无法让他变宽居中半步,果然老哥稳!纠结半天,最后只能在全局样式,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"]
};
看看效果:
Angular4中使用PrimeNG calendar相关推荐
- angular4 php,Angular4中常用管道实例详解
通常我们需要使用管道实现对数据的格式化,Angular4中的管道和之前有了一些变化.本文主要介绍Angular4中常用管道,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧, ...
- Angular4中常用管道
原文链接:http://blog.csdn.net/haijing1995/article/details/71404350 ------------------------------------- ...
- php 引入echarts路径,angular4中引入echarts的方法(代码示例)
本篇文章给大家带来的内容是关于angular4中引入echarts的方法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.安装ngx-echarts npm insta ...
- 探索 Java 中的 Date, Calendar, TimeZone 和Timestamp
探索 Java 中的 Date, Calendar, TimeZone 和Timestamp java 2010-12-31 08:56:49 阅读8 评论0 字号:大中小 订阅 对象 宋晟 (sh ...
- Angular4中使用DomSanitizer
作用 DomSanitizer有助于防止跨站点脚本安全漏洞(XSS),通过清除值以便在不同的DOM上下文中安全使用. 为什么会需要使用DomSanitizer Angular4中默认将所有输入值视为不 ...
- angular4 php,Angular4中router使用技巧
这次给大家带来Angular4中router使用技巧,Angular4中router使用的注意事项有哪些,下面就是实战案例,一起来看一下. router,也就是路由,是前端中一个比较重要的概念.通过r ...
- vue 项目中使用mobiscroll calendar
快速跳转 在vue 项目中使用 mobiscroll calendar 准备 初始化组件 修改组件样式 在vue 项目中使用 mobiscroll calendar 准备 1. 首先在项目中引入jqu ...
- java calendar与date_Java中date和calendar的用法
获取现在系统的时间和日期看起来是一件非常神奇的事情,但是当使用date和calendar之后发现仍然非常神奇. 1.date 使用date日期之前需要导入包: import java.text.Sim ...
- 在Angular4中使用ng2-baidu-map详解
一.引言 之前在Angular4使用过百度地图,记录一下踩过的坑 二.实现 1.安装 npm install angular2-baidu-map 2.在app.module.ts配置 ak key在 ...
最新文章
- 欢迎使用CSDN-markdown编辑器1
- dictionary changed size during iteration
- Http 与 Socket 区别
- centos7配置不开启浏览器执行基于python+selenium的功能自动化脚本
- 除了清空购物车,阿里年会的技术也够霸气!
- mean技术栈 linux,“MEAN”技术栈开发web应用
- 虚拟化精华问答 | 什么是虚拟化?
- ASP.NET 1.1与ASP.NET 2.0 应用运行并存
- 200个 jquery插件
- python中weekday_Python calendar firstweekday()用法及代码示例
- 实现一个 webpack loader
- PowerDesigner16工具学习笔记-建立CDM
- 公众号获取token失败_恶意请求微信公众号token,导致access_token超过10万次解决思路...
- 小米便签源码分析——tool包
- java 集成支付宝支付
- RPC远程调用框架rsf和dubbo
- 阿里云 免费领服务器 具体步骤
- [ROC-RK3568-PC] [Firefly-Android] 10min带你了解GPIO复用
- Request和response的用法总结
- WEB 请求处理二:Nginx 请求 反向代理
热门文章
- 手机屏幕按键测试软件,涨见识了——手机居然能作为维修检测工具来用!
- Android异常与性能优化相关问题及解决办法
- DataWhale第21期组队学习自然语言处理实践(知识图谱)task4— 用户输入->知识库的查询语句
- vue父子传值,slot插槽的使用
- snes9x 源码_仅64kb的SNES游戏如何制作优美的音乐
- 数组最大值/最小值计算方法
- blas、lapack、atlas在Ubuntu上的安装
- ilm 和dlm差异_NetPro 耐特普羅資訊:技術應用 / 漫談ILM與DLM-3 由DLM著手落實ILM的精神...
- word 插入脚注尾注和删除页眉页脚
- 性价比打过折的故宫紫禁城