这篇文章将向您介绍如何使用 angular-mat-datepicker, 一个可以帮助您快速创建 Material Design 风格日期选择器的 npm 包。
安装
运行以下命令可以在您的项目中安装该 npm 包:
--- ------- ---------------------- ------
导入
您需要在您的 app.module.ts
中导入以下模块:
------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ------------ ------------------- - ---- ----------------- ------ - ----------------------- - ---- --------------------------------------- ------ - -------------- - ---- -------------------------- ------ - ------------------ - ---- ------------------------------- ------ - ------------------- - ---- ------------------------------- ------ - ------------------- - ---- ----------------------------------- ------ - ------------ - ---- ------------------ ----------- ------------- - ------------- -- -------- - -------------- ------------ -------------------- ------------------------ --------------- ------------------- -------------------- ------------------- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -
使用
在您的组件中,您需要导入 Moment
模块和 MAT_DATE_FORMATS
常量,以及在您需要使用日期选择器的 HTML 文件中插入组件:
------ - --------- - ---- ---------------- ------ - ----------- - ---- ----------------- ------ - ------ - ---- --------- ------ - -- ------- ---- --------- ------ - ---------------- - ---- ------------------------- ------ - ----------------------- - ---- ------------------------------- ----- ------ - -------- ------ ----- ---------- - - ------ - ---------- ----- -- -------- - ---------- ------------- --------------- ---- ------ -------------- ----- ------------------- ----- ------ -- -- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------- ---------- - - -------- ----------------- --------- ---------- -- -- -- ------ ----- ------------ - ---- - --- ---------------------- -------------- ------- ------ -------------------------------- - --------------------- ----------------- - -
在 HTML 文件中,您应该像下面这样输入 mat-datepicker
标签:
------ ---------------- ------ -------- ------------------------ --------------------- ---------------------- --------- --------------------------------------- --------------- ------- ---------------------------------- -------- ---------------------------------- -------------------------- ----------------- -------
这就是 angular-mat-datepicker
的使用方法。祝您享受 Material Design 效果的日期选择器。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562e581e8991b448e0819