简介
ng2-date-picker 是一个开源的 Angular2/4/5 的日期选择器库。
它具有以下功能：
- 响应式设计，支持移动设备和桌面设备
- 多语言支持
- 日历显示
- 可选择年份和月份
- 选择区间日期
安装
npm install ng2-date-picker --save
如果你使用的是 Angular5，你还需要手动下载和安装以下依赖：
npm install moment --save npm install @angular/material --save npm install hammerjs --save
使用
在你的模块中导入 Ng2DatePickerModule：
import { Ng2DatePickerModule } from 'ng2-date-picker';
@NgModule({
imports: [
Ng2DatePickerModule
]
})在你的组件中使用 ng2-date-picker：
<ng2-date-picker [(ngModel)]="date" dateFormat="yyyy-MM-dd" [dayLabels]="dayLabels" [monthLabels]="monthLabels"></ng2-date-picker>
其中，
[(ngModel)]指定 ngModel，与普通的 HTML 元素相同dateFormat指定日期格式dayLabels指定星期几的标签monthLabels指定月份的标签
你也可以通过下面的方式在组件中设置这些选项：
export class YourComponent {
public date: Date = new Date();
public dayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
public monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
}示例代码
以下代码示例展示了如何使用 ng2-date-picker 实现一个日期选择器。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- --------------------
--------- -
-------------
---------------- ------------------ ----------------------- ----------------------- ----------------------------------------------
----------- ----- ------ - -----------------------
--
--
------ ----- ---------------- -
------ ----- ---- - --- -------
------ --------- - ------- ------ ------ ------ ------ ------ -------
------ ----------- - ------- ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ -------
-这里有一个在线示例：https://stackblitz.com/edit/ng2-date-picker-example
结论
ng2-date-picker 是一个非常实用的日期选择器库，它能够提供响应式设计、日历显示、支持多语言、选择区间日期等多种功能。在 Angular 项目中使用它可以让你的日期选择器具有更强的可定制性和用户友好性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57672