@luoxiao123/angular-material-date-time-range-picker 21.1.1 → 21.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -160,20 +160,6 @@ import { DatePickerComponent } from '@luoxiao123/angular-material-date-time-rang
|
|
|
160
160
|
export class DateRangeModule {}
|
|
161
161
|
```
|
|
162
162
|
|
|
163
|
-
## 使用指南
|
|
164
|
-
|
|
165
|
-
### Standalone Components
|
|
166
|
-
|
|
167
|
-
推荐用于现代 Angular 应用的方式。直接在组件 imports 中使用。
|
|
168
|
-
|
|
169
|
-
### mat-form-field 集成
|
|
170
|
-
|
|
171
|
-
组件完美适配 Angular Material 的 `mat-form-field`,可自动应用表单样式和错误提示。
|
|
172
|
-
|
|
173
|
-
### 双向数据绑定
|
|
174
|
-
|
|
175
|
-
支持 `[(ngModel)]` 和响应式表单 `[formControl]`。
|
|
176
|
-
|
|
177
163
|
## API 文档
|
|
178
164
|
|
|
179
165
|
### 输入属性
|
|
@@ -183,7 +169,7 @@ export class DateRangeModule {}
|
|
|
183
169
|
| `ngModel` / `formControl` | `DateTimePickerValue \| null` | - | 选中的日期时间范围(支持双向绑定) |
|
|
184
170
|
| `required` | `boolean` | `false` | 是否为必填项 |
|
|
185
171
|
| `disabled` | `boolean` | `false` | 是否禁用组件 |
|
|
186
|
-
| `
|
|
172
|
+
| `placeholder` | `string` | `''` | 输入框占位符 |
|
|
187
173
|
| `future` | `boolean` | `false` | 是否允许选择未来日期 |
|
|
188
174
|
|
|
189
175
|
### 输出事件
|
|
@@ -198,31 +184,11 @@ export class DateRangeModule {}
|
|
|
198
184
|
|
|
199
185
|
| 属性 | 类型 | 说明 |
|
|
200
186
|
|------|------|------|
|
|
201
|
-
| `start` | `string` |
|
|
202
|
-
| `end` | `string` |
|
|
203
|
-
|
|
204
|
-
#### TimeRange
|
|
205
|
-
|
|
206
|
-
| 属性 | 类型 | 说明 |
|
|
207
|
-
|------|------|------|
|
|
208
|
-
| `label` | `string` | 显示标签 |
|
|
209
|
-
| `start` | `string` | 开始时间表达式 |
|
|
210
|
-
| `end` | `string` | 结束时间表达式 |
|
|
187
|
+
| `start` | `string` | 格式化后的开始日期时间 (基于 MAT_DATE_FORMATS + HH:mm) |
|
|
188
|
+
| `end` | `string` | 格式化后的结束日期时间 (基于 MAT_DATE_FORMATS + HH:mm) |
|
|
211
189
|
|
|
212
190
|
## 配置
|
|
213
191
|
|
|
214
|
-
### 基础示例
|
|
215
|
-
|
|
216
|
-
```typescript
|
|
217
|
-
<date-time-picker
|
|
218
|
-
[(ngModel)]="selectedRange"
|
|
219
|
-
[required]="true"
|
|
220
|
-
[disabled]="isLoading"
|
|
221
|
-
[future]="false"
|
|
222
|
-
(selectionChange)="onRangeSelected($event)"
|
|
223
|
-
/>
|
|
224
|
-
```
|
|
225
|
-
|
|
226
192
|
### 自定义日期格式
|
|
227
193
|
|
|
228
194
|
组件使用 Angular Material 的 `DateAdapter` 和 `MAT_DATE_FORMATS` 进行日期格式化。您可以在应用或组件级别提供自定义的适配器和格式。
|
|
@@ -316,7 +282,7 @@ A: 当前版本使用中文界面。欢迎提交 PR 添加多语言支持。
|
|
|
316
282
|
A: 支持。组件使用标准的 Material Design 样式,可通过 CSS 变量和自定义 CSS 进行定制。
|
|
317
283
|
|
|
318
284
|
### Q: 如何处理时区问题?
|
|
319
|
-
A:
|
|
285
|
+
A: 组件返回的日期时间字符串基于本地时间(Local Time),格式化结果取决于 `MAT_DATE_FORMATS` 配置。如果需要处理时区,建议在获取值后使用 `date-fns` 或 `moment.js` 等库进行转换。
|
|
320
286
|
|
|
321
287
|
## 贡献
|
|
322
288
|
|