@ngx-mce/datetime-picker 21.1.0 → 21.1.1

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.
Files changed (2) hide show
  1. package/README.md +54 -50
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,58 +1,61 @@
1
- # Angular Material DatetimePicker, Timepicker for @angular/material 7.x, 8.x, 9.x, 10.x, 11.x, 12.x, 13.x, 14.x, 15.x, 16.x, 18.x, 19.x, 20.x
1
+ # Angular Material DatetimePicker and Timepicker
2
+ ## For Angular Material 21.x
2
3
 
3
- [![Build Status](https://travis-ci.com/h2qutc/angular-material-components.svg?branch=master)](https://travis-ci.com/h2qutc/angular-material-components)
4
- [![License](https://img.shields.io/npm/l/angular-material-components.svg)](https://www.npmjs.com/package/angular-material-components)
4
+ [![License](https://img.shields.io/npm/l/angular-material-components.svg)](https://www.npmjs.com/package/@ngx-mce/datetime-picker)
5
5
  [![npm version](https://badge.fury.io/js/%40angular-material-components%2Fdatetime-picker.svg)](https://www.npmjs.com/package/@ngx-mce/datetime-picker)
6
6
  [![Github All Releases](https://img.shields.io/npm/dt/@ngx-mce/datetime-picker.svg)]()
7
7
 
8
8
  ## Description
9
9
 
10
- A DatetimePicker like @angular/material
11
- [Datepicker](https://material.angular.io/components/datepicker/overview) by adding support for
12
- choosing time.
10
+ These are Date and Time pickers for Angular Material projects. Specifically, this extends the @angular/material
11
+ [Datepicker](https://material.angular.io/components/datepicker/overview) to support choosing time.
13
12
 
14
13
  <a href="https://buymeacoffee.com/fbf.prog64" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
15
14
 
16
- ## DEMO
15
+ # Version control
17
16
 
18
- @see [LIVE DEMO AND DOCUMENTATION](https://h2qutc.github.io/angular-material-components/)
17
+ Choose the version corresponding to your Angular version:
19
18
 
20
- @see [DEMO stackblitz](https://stackblitz.com/edit/demo-ngx-mat-datetime-picker)
19
+ | Angular | @ngx-mce/datetime-picker |
20
+ | -------- | -------------------------|
21
+ | 21 | 21.x |
22
+ | 15 -- 20 | Please use [GNURub's version](https://github.com/GNURub/angular-material-components) |
23
+ | 7 -- 14 | Please use [h2qutc's version](https://github.com/h2qutc/angular-material-components) |
21
24
 
22
- ![Alt Text](demo_datetime_picker.png)
25
+ # Date and Time pickers in action
23
26
 
24
- Choose the version corresponding to your Angular version:
27
+ See demo:
28
+
29
+ * Over [StackBlitz](https://stackblitz.com/edit/demo-ngx-mat-datetime-picker).
30
+ * In the [documentation](https://fbf-prog64.github.io/angular-material-components/).
31
+
32
+ ![DateTimePicker in action](demo_datetime_picker.png)
25
33
 
26
- | Angular | @ngx-mce/datetime-picker |
27
- | ------- | ------------------------------- |
28
- | 20 | 20.x+ |
29
- | 19 | 19.x+ |
30
- | 18 | 18.x+ |
31
- | 16 | 16.x+ |
32
- | 15 | 15.x+ OR 9.x+ for legacy import |
33
- | 14 | 8.x+ |
34
- | 13 | 7.x+ |
35
- | 12 | 6.x+ |
36
- | 11 | 5.x+ |
37
- | 10 | 4.x+ |
38
- | 9 | 2.x+ |
39
- | 8 | 2.x+ |
40
- | 7 | 2.x+ |
41
-
42
- ## Getting started
34
+ # How to use
35
+
36
+ ## Install
43
37
 
44
38
  ```
45
39
  npm install --save @ngx-mce/datetime-picker
46
40
  ```
47
41
 
48
- ## Setup
42
+ ## Configure
43
+
44
+ Add the date provider of your choice to your app configuration, either in your application root or in your standalone component.
45
+
46
+ The following providers are available:
49
47
 
50
- Add the date provider to your app configuration.
48
+ * `provideNativeDateAdapter`, based on native JS.
49
+ * `provideMomentDateAdapter`, based on Moment.js.
50
+ * `provideLuxonDateAdapter`, based on Luxon.
51
+ * `provideDateFnsAdapter`, based on date.fns.
52
+ * You may also provide a custom implementation.
51
53
 
52
- [!IMPORTANT] to prevent the \_ERROR Error: NgxMatDatetimePicker: No provider found for DateAdapter.
53
- You must import one of the following providers at your application root or standalone component:
54
- provideNativeDateAdapter, provideMomentDateAdapter, provideLuxonDateAdapter, provideDateFnsAdapter,
55
- or provide a custom implementation.
54
+ This step is important to prevent the following error:
55
+
56
+ ```
57
+ Error: NgxMatDatetimePicker: No provider found for DateAdapter.
58
+ ```
56
59
 
57
60
  ```typescript
58
61
  import { provideNativeDateAdapter } from '@angular/material/core';
@@ -66,6 +69,8 @@ export const appConfig: ApplicationConfig = {
66
69
  };
67
70
  ```
68
71
 
72
+ ## Using the component
73
+
69
74
  On your component, you can use the datepicker as follows:
70
75
 
71
76
  ```typescript
@@ -109,12 +114,13 @@ import {
109
114
  export class TestComponent {}
110
115
  ```
111
116
 
112
- @see [src/app/demo-datetime/demo-datetime.module.ts](src/app/demo-datetime/demo-datetime.module.ts)
117
+ Check out the demo source code [here](src/app/demo-datetime/demo-datetime.module.ts).
118
+
119
+ ### Markup
113
120
 
114
- ## Using the component The same API as @angular/material Datepicker (@see [API
121
+ The template uses the same API as @angular/material Datepicker (see [API docs](https://material.angular.io/components/datepicker/api))
115
122
 
116
- docs](https://material.angular.io/components/datepicker/api)) ### Datetime Picker
117
- (ngx-mat-datetime-picker)
123
+ ### Datetime Picker (ngx-mat-datetime-picker)
118
124
 
119
125
  ```html
120
126
  <mat-form-field>
@@ -156,9 +162,9 @@ docs](https://material.angular.io/components/datepicker/api)) ### Datetime Picke
156
162
  <ngx-mat-timepicker [formControl]="formControl"></ngx-mat-timepicker>
157
163
  ```
158
164
 
159
- #### List of @Input of ngx-mat-timepicker
165
+ ## List of @Input of ngx-mat-timepicker
160
166
 
161
- _You can use all @Input of ngx-mat-timepicker for ngx-mat-datetime-picker_
167
+ _These properties are also available in ngx-mat-datetime-picker._
162
168
 
163
169
  | @Input | Type | Default value | Description |
164
170
  | ------------------ | ------------ | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -175,16 +181,14 @@ _You can use all @Input of ngx-mat-timepicker for ngx-mat-datetime-picker_
175
181
  | **hideTime** | boolean | false | If true, the time is hidden. |
176
182
  | **touchUi** | boolean | false | Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather than a popup and elements have more padding to allow for bigger touch targets. |
177
183
 
178
- ## Choosing a date implementation and date format settings
179
-
180
- [NativeDateAdapter](https://github.com/angular/components/blob/main/src/material/core/datetime/index.ts)
181
- [DateFnsAdapter](https://github.com/angular/components/blob/main/src/material-date-fns-adapter/adapter/index.ts)
182
- [LuxonDateAdapter](https://github.com/angular/components/blob/main/src/material-luxon-adapter/adapter/index.ts)
183
- [MomentDateAdapter](https://github.com/angular/components/blob/main/src/material-moment-adapter/adapter/index.ts)
184
+ ## Choosing the best date provider and format settings
184
185
 
185
- For example:
186
+ * [NativeDateAdapter](https://github.com/angular/components/blob/main/src/material/core/datetime/index.ts)
187
+ * [DateFnsAdapter](https://github.com/angular/components/blob/main/src/material-date-fns-adapter/adapter/index.ts)
188
+ * [LuxonDateAdapter](https://github.com/angular/components/blob/main/src/material-luxon-adapter/adapter/index.ts)
189
+ * [MomentDateAdapter](https://github.com/angular/components/blob/main/src/material-moment-adapter/adapter/index.ts)
186
190
 
187
- Creating a custom date adapter:
191
+ Examples of using a custom adapter are provided below.
188
192
 
189
193
  ```
190
194
  @Injectable()
@@ -207,7 +211,7 @@ const CUSTOM_DATE_FORMATS: MatDateFormats = {
207
211
  };
208
212
  ```
209
213
 
210
- Creating a custom date adapter module
214
+ Providing the custom adapter in the Module.
211
215
 
212
216
  ```
213
217
  export function provideNgxMatCustomDate() {
@@ -219,7 +223,7 @@ export function provideNgxMatCustomDate() {
219
223
 
220
224
  ```
221
225
 
222
- You can also customize the date format by providing your custom MAT_DATE_FORMATS in your module.
226
+ You can also customize the date format by providing your custom `MAT_DATE_FORMATS` in your module.
223
227
 
224
228
  ## Theming
225
229
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ngx-mce/datetime-picker",
3
- "version": "21.1.0",
3
+ "version": "21.1.1",
4
4
  "description": "Angular Material Datetime Picker",
5
5
  "author": "HO Hong Quan",
6
6
  "repository": {