@luoxiao123/angular-material-date-time-range-picker 21.0.0 → 21.1.1

package/README.md

@@ -62,17 +62,35 @@ yarn add @luoxiao123/angular-material-date-time-range-picker
 ```typescript
 import { Component } from '@angular/core';
 import { DatePickerComponent, DateTimePickerValue } from '@luoxiao123/angular-material-date-time-range-picker';
+import { provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
+import { MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';
+import { zhCN } from 'date-fns/locale';
+
+export const MY_DATE_FORMATS = {
+  parse: {
+    dateInput: 'yyyy-MM-dd',
+  },
+  display: {
+    dateInput: 'yyyy-MM-dd',
+    monthYearLabel: 'MMM yyyy',
+    dateA11yLabel: 'PP',
+    monthYearA11yLabel: 'MMMM yyyy',
+  },
+};
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [DatePickerComponent],
+  providers: [
+    provideDateFnsAdapter(),
+    { provide: MAT_DATE_LOCALE, useValue: zhCN },
+    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
+  ],
   template: `
     <date-time-picker 
       [(ngModel)]="selectedRange"
       [required]="true"
-      [dateFormat]="'yyyy年M月d日 HH:mm'"
-      [optionalFeatures]="true"
       (selectionChange)="onRangeSelected($event)"
     />
   `,
@@ -98,7 +116,6 @@ export class AppComponent {
     matInput
     [(ngModel)]="selectedRange"
     [required]="true"
-    [dateFormat]="'yyyy-MM-dd HH:mm'"
   />
   @if (formControl.hasError('required')) {
     <mat-error>此字段为必填</mat-error>
@@ -125,7 +142,6 @@ export class AppComponent {
 // 模板
 <date-time-picker 
   [formControl]="rangeControl"
-  [dateFormat]="'yyyy-MM-dd HH:mm'"
 />
 ```
 
@@ -167,9 +183,7 @@ export class DateRangeModule {}
 | `ngModel` / `formControl` | `DateTimePickerValue \| null` | - | 选中的日期时间范围（支持双向绑定） |
 | `required` | `boolean` | `false` | 是否为必填项 |
 | `disabled` | `boolean` | `false` | 是否禁用组件 |
-| `dateFormat` | `string` | `'yyyy年M月d日 HH:mm'` | 日期显示格式（DatePipe 格式） |
 | `valueFormat` | `string` | `'yyyy-MM-dd HH:mm:ss'` | 值的输出格式（DatePipe 格式） |
-| `optionalFeatures` | `boolean` | `true` | 是否启用星期选择和小时范围选择 |
 | `future` | `boolean` | `false` | 是否允许选择未来日期 |
 
 ### 输出事件
@@ -204,30 +218,42 @@ export class DateRangeModule {}
   [(ngModel)]="selectedRange"
   [required]="true"
   [disabled]="isLoading"
-  [optionalFeatures]="true"
   [future]="false"
-  [dateFormat]="'yyyy-MM-dd HH:mm'"
   (selectionChange)="onRangeSelected($event)"
 />
 ```
 
 ### 自定义日期格式
 
-```typescript
-// 中文格式
-[dateFormat]="'yyyy年M月d日 HH:mm'"
-
-// 英文格式
-[dateFormat]="'MMM d, yyyy HH:mm'"
+组件使用 Angular Material 的 `DateAdapter` 和 `MAT_DATE_FORMATS` 进行日期格式化。您可以在应用或组件级别提供自定义的适配器和格式。
 
-// 标准格式
-[dateFormat]="'yyyy-MM-dd HH:mm:ss'"
+推荐使用 `@angular/material-date-fns-adapter` 和 `date-fns`：
 
-// 仅显示日期
-[dateFormat]="'yyyy-MM-dd'"
+```typescript
+import { provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
+import { MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';
+import { zhCN } from 'date-fns/locale';
+
+export const MY_DATE_FORMATS = {
+  parse: {
+    dateInput: 'yyyy-MM-dd',
+  },
+  display: {
+    dateInput: 'yyyy-MM-dd',
+    monthYearLabel: 'MMM yyyy',
+    dateA11yLabel: 'PP',
+    monthYearA11yLabel: 'MMMM yyyy',
+  },
+};
 
-// 仅显示时间
-[dateFormat]="'HH:mm'"
+@Component({
+  // ...
+  providers: [
+    provideDateFnsAdapter(),
+    { provide: MAT_DATE_LOCALE, useValue: zhCN },
+    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
+  ]
+})
 ```
 
 ### 设置初始值
@@ -263,15 +289,6 @@ ngOnInit() {
 />
 ```
 
-### 禁用可选功能（星期和小时选择）
-
-```typescript
-<date-time-picker 
-  [(ngModel)]="selectedRange"
-  [optionalFeatures]="false"
-/>
-```
-
 ## Angular 版本兼容性
 
 | Angular 版本 | 支持情况 |
@@ -317,8 +334,8 @@ A: 组件使用 ISO 8601 格式，完整支持时区信息。
 
 ## 致谢
 
-本项目基于 [material-tailwind-range-date-picker](https://github.com/omidkh68/material-tailwind-range-date-picker) 二次开发重构，感谢原作者的杰出工作！
+本项目参考了 [material-tailwind-range-date-picker](https://github.com/omidkh68/material-tailwind-range-date-picker) 和 [Angular Material Datepicker](https://material.angular.dev/components/datepicker/overview) 的设计理念和实现方法，在此感谢这些优秀项目及其开发者！
 
 ## 许可证
 
-MIT License © 2026 [xylplm](https://github.com/xylplm)
+MIT License © 2026 [xylplm](https://github.com/xylplm)