Angular Material is a popular UI component library for building web applications with Angular. One of its components, md-datepicker, provides a datepicker that allows users to select a date from a calendar. However, the default format of the date displayed in the input field may not always be suitable for certain use cases. In this article, we will explore how to change the format of the md-datepicker in Angular Material.
Basic Usage of md-datepicker
Before we dive into the details of changing the format, let's first understand the basic usage of md-datepicker.
First, you need to import the MdDatepickerModule in your module:
-- -------------------- ---- -------
------ - ------------------ - ---- -------------------------------
-----------
-------- -
-- ---
-------------------
-- ---
--
-- ---
--
------ ----- --------- - -Then, you can use the md-datepicker component in your template:
<md-form-field> <input mdInput [mdDatepicker]="picker" placeholder="Choose a date"> <button mdSuffix [mdDatepickerToggle]="picker"></button> </md-form-field> <md-datepicker #picker></md-datepicker>
This will render a datepicker input field and a button next to it. When the button is clicked, the datepicker pops up.
By default, the format of the date displayed in the input field follows the ISO-8601 standard (yyyy-MM-dd). Let's see how we can change this format.
Changing the Format of md-datepicker
To change the format of the md-datepicker, we need to use the MdDateFormats provider provided by Angular Material. This provider allows us to define our own date formats.
First, we need to import the MdNativeDateModule in our module:
-- -------------------- ---- -------
------ - ------------------ - ---- -------------------------
-----------
-------- -
-- ---
-------------------
-- ---
--
-- ---
--
------ ----- --------- - -Then, we can define our own date formats using the MD_DATE_FORMATS injection token:
-- -------------------- ---- -------
------ - -------------- - ---- ----------------
------ - ------------- - ---- -------------------------
------ ----- ---------------- ------------- - -
------ -
---------- -------------
--
-------- -
---------- -------------
--------------- ---- ------
-------------- -----
------------------- ----- ------
--
--
------ ----- --------------------- - --- -------------------------------------------------In the above code, we define our own date format with YYYY/MM/DD, which is different from the default format of yyyy-MM-dd. We also define other date formats for accessibility purposes.
Finally, we need to provide our own MdDateFormats using the MY_DATE_FORMATS_TOKEN:
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------------- - ---- --------------------
------------
--------- -----------
--------- -
---------------
------ ------- ----------------------- ------------------- - ------
------- -------- ---------------------------------------
----------------
-------------- ------------------------
--
---------- -- -------- ---------------------- --------- --------------- ---
--
------ ----- ------------ -
------------------------------------------ ------ -------------- -------------- --
-Now, the format of the md-datepicker should be changed to our own format.
Conclusion
In this article, we have learned how to change the format of the md-datepicker in Angular Material. By using the MdDateFormats provider, we can define our own date formats and provide them to the md-datepicker. This provides us with more flexibility in displaying dates in our web applications.
- 示例代码省略，详见正文。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25360