@luoxiao123/angular-material-date-time-range-picker 21.0.1 → 21.1.2

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'"
 />
 ```
 
@@ -144,20 +160,6 @@ import { DatePickerComponent } from '@luoxiao123/angular-material-date-time-rang
 export class DateRangeModule {}
 ```
 
-## 使用指南
-
-### Standalone Components
-
-推荐用于现代 Angular 应用的方式。直接在组件 imports 中使用。
-
-### mat-form-field 集成
-
-组件完美适配 Angular Material 的 `mat-form-field`，可自动应用表单样式和错误提示。
-
-### 双向数据绑定
-
-支持 `[(ngModel)]` 和响应式表单 `[formControl]`。
-
 ## API 文档
 
 ### 输入属性
@@ -167,9 +169,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` | 是否启用星期选择和小时范围选择 |
+| `placeholder` | `string` | `''` | 输入框占位符 |
 | `future` | `boolean` | `false` | 是否允许选择未来日期 |
 
 ### 输出事件
@@ -184,50 +184,42 @@ export class DateRangeModule {}
 
 | 属性 | 类型 | 说明 |
 |------|------|------|
-| `start` | `string` | 开始日期时间 (ISO 8601) |
-| `end` | `string` | 结束日期时间 (ISO 8601) |
-
-#### TimeRange
-
-| 属性 | 类型 | 说明 |
-|------|------|------|
-| `label` | `string` | 显示标签 |
-| `start` | `string` | 开始时间表达式 |
-| `end` | `string` | 结束时间表达式 |
+| `start` | `string` | 格式化后的开始日期时间 (基于 MAT_DATE_FORMATS + HH:mm) |
+| `end` | `string` | 格式化后的结束日期时间 (基于 MAT_DATE_FORMATS + HH:mm) |
 
 ## 配置
 
-### 基础示例
-
-```typescript
-<date-time-picker 
-  [(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 +255,6 @@ ngOnInit() {
 />
 ```
 
-### 禁用可选功能（星期和小时选择）
-
-```typescript
-<date-time-picker 
-  [(ngModel)]="selectedRange"
-  [optionalFeatures]="false"
-/>
-```
-
 ## Angular 版本兼容性
 
 | Angular 版本 | 支持情况 |
@@ -299,7 +282,7 @@ A: 当前版本使用中文界面。欢迎提交 PR 添加多语言支持。
 A: 支持。组件使用标准的 Material Design 样式，可通过 CSS 变量和自定义 CSS 进行定制。
 
 ### Q: 如何处理时区问题？
-A: 组件使用 ISO 8601 格式，完整支持时区信息。
+A: 组件返回的日期时间字符串基于本地时间（Local Time），格式化结果取决于 `MAT_DATE_FORMATS` 配置。如果需要处理时区，建议在获取值后使用 `date-fns` 或 `moment.js` 等库进行转换。
 
 ## 贡献
 
@@ -317,8 +300,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)