前言
在前端开发中，日期选择器是非常常见的一个组件。而使用 angular-material-persian-datepicker 这个npm包，可以快速集成实现一个支持波斯语日期的日期选择器。
安装
在终端输入以下命令安装 angular-material-persian-datepicker ：
npm install angular-material-persian-datepicker --save
引入
在需要使用的组件中引入 angular-material-persian-datepicker ：
import { MatDatepickerModule } from 'angular-material-persian-datepicker';并将其添加至要使用的模块中的 imports 数组中
@NgModule({
...
imports: [
...
MatDatepickerModule
],
...
})使用
在 HTML 模板中使用 <mat-datepicker> 标签：
<mat-form-field> <input matInput [matDatepicker]="picker" placeholder="请选择日期"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field>
上述代码中，我们指定输入框会打开一个日历选择器，根据展示效果选择是否需要添加适当的样式。
附加选项
除了基本的日期选择器外，该npm包提供的 mat-datepicker 还有一些可选的配置项
禁用某些日期
通过 matDatepickerFilter 属性禁用在日历上显示的日期：
-- -------------------- ---- -------
------ ----------- ---- ----------------
--- ------ ---------- ---- ------ ---------- --
------------
--------- ----------------------------
------------ ---------------------------------
---------- ----------------------------------
--
------ ----- ----------------------- -
-------- - --- ------ ------- -- -
----- --- - -----------
-- ------- -------- --- ------ ---- ----- ---------
------ --- --- - -- --- --- --
-
-<mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Choose a date" [matDatepickerFilter]="myFilter"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field>
自定义日期格式
通过 matDatepickerFormat 属性设置日期格式：
<mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Choose a date" [matDatepickerFormat]="dateFormat"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field>
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ ------------------------- ---- --------------------------------------
--- ------ ---------- --------- - ---- --- ----- ------ --
------------
--------- -------------------------------------
------------ ------------------------------------------
---------- -------------------------------------------
--
------ ----- ------------------------------- -
------- ----- - --- -------
--- ------- ------ -
------ ---------------------------------------
-
--- ----------- ------- -
----- ------ ------ ---- - -----------------
---------- - --- ------------------- ---- --------------- --- - -- ------------- -----
-
--- ---------- ---- -
----- ------ - --- -------
-------------------
-------------------
------ -------
-
--- ---------- ---- -
----- ------ - --- -------
-------------------
-------------------
------ -------
-
--- ----------- -
------ --- ----- -- -
----- ---- - ------------
-- --------- --- --- --- ---- --- -- ---- ------
------ ----- --- - -- ---- --- --- - --------------------------- - ---
--
-
--- ------------ -
------ -
----------- ------ ----- -- -
------ ---------------------------------
--
---------- ------ ------- -- -
----- ----- ------ ----- - ----------------
------ --- ------------------- ---- --------------- --- - -- ------------- -----
--
--
-
-------------- ------- ------ ------------------------------ -
--------- - ----------------------------------------
-
-结语
上述就是 angular-material-persian-datepicker 这个npm包的使用方法，希望对于使用该包的人有所帮助。同时，我们也可以根据自己的需求，加以修改和扩展，以达到更为优化的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562de81e8991b448e05b0