Skip to content

Commit fa18b9e

Browse files
committed
docs(DlDateTimePickerComponent): Add information about DlDateAdapter
Also fixed up comments in QuarterCenturyYearModelProvider
1 parent d077663 commit fa18b9e

File tree

1 file changed

+45
-29
lines changed

1 file changed

+45
-29
lines changed

src/lib/dl-date-time-picker/dl-date-time-picker.component.md

+45-29
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,20 @@ The following keyboard shortcuts are supported in in all views:
1515
| `PAGE_DOWN` | Go to the same cell in the next time period |
1616
| `ENTER` or `SPACE` | Select current cell |
1717

18-
## Model Providers
18+
## Date Adapter
1919

20-
Model providers are used to create the `Model` for each of the `views` in the date/time picker.
20+
A `DateAdapter` is used to adapt the data type in the model to the `number` data type
21+
used internally by the date/time picker.
22+
23+
If you need a different data type than what is currently supported, you can extend
24+
`DlDateAdapter<D>` to provide the data type you need then override the `DlDateAdapter`
25+
provider in `app.module.ts` to use your new class.
26+
27+
`providers: [{provide: DlDateAdapter, useClass: MyCustomDateAdapter}],`
28+
29+
## Model Provider
30+
31+
`ModelProvider`s are used to create the `Model` for each of the `views` in the date/time picker.
2132
If your project has special requirements for one or more of the `views`, you may override
2233
one or more of the model providers to meet your needs.
2334

@@ -96,7 +107,7 @@ display `25 years` by doing the following:
96107
*
97108
* The `year` model represents a quarter-century (25 years) as five rows with five columns.
98109
*
99-
* The decade always starts on a year ending with zero.
110+
* The quarter-century always starts on a year ending with zero or 5.
100111
*
101112
* Each cell represents midnight January 1 of the indicated year.
102113
*
@@ -170,9 +181,9 @@ display `25 years` by doing the following:
170181
* The `active` year will be the January 1 `five (5) years after` the specified milliseconds.
171182
* This moves the `active` date one row `down` in the current `year` view.
172183
*
173-
* Moving `down` can result in the `active` year being part of a different decade than
174-
* the specified `fromMilliseconds`, in this case the decade represented by the model
175-
* will change to show the correct decade.
184+
* Moving `down` can result in the `active` year being part of a different quarter-century than
185+
* the specified `fromMilliseconds`, in this case the quarter-century represented by the model
186+
* will change to show the correct quarter-century.
176187
*
177188
* @param fromMilliseconds
178189
* the moment in time from which the next `year` model `down` will be constructed.
@@ -191,9 +202,9 @@ display `25 years` by doing the following:
191202
* The `active` year will be the January 1 `five (5) years before` the specified milliseconds.
192203
* This moves the `active` date one row `up` in the current `year` view.
193204
*
194-
* Moving `up` can result in the `active` year being part of a different decade than
195-
* the specified `fromMilliseconds`, in this case the decade represented by the model
196-
* will change to show the correct decade.
205+
* Moving `up` can result in the `active` year being part of a different quarter-century than
206+
* the specified `fromMilliseconds`, in this case the quarter-century represented by the model
207+
* will change to show the correct quarter-century.
197208
*
198209
* @param fromMilliseconds
199210
* the moment in time from which the previous `year` model `up` will be constructed.
@@ -212,9 +223,9 @@ display `25 years` by doing the following:
212223
* The `active` year will be the January 1 `one (1) year before` the specified milliseconds.
213224
* This moves the `active` date one year `left` in the current `year` view.
214225
*
215-
* Moving `left` can result in the `active` year being part of a different decade than
216-
* the specified `fromMilliseconds`, in this case the decade represented by the model
217-
* will change to show the correct decade.
226+
* Moving `left` can result in the `active` year being part of a different quarter-century than
227+
* the specified `fromMilliseconds`, in this case the quarter-century represented by the model
228+
* will change to show the correct quarter-century.
218229
*
219230
* @param fromMilliseconds
220231
* the moment in time from which the `year` model to the `left` will be constructed.
@@ -233,9 +244,9 @@ display `25 years` by doing the following:
233244
* The `active` year will be the January 1 `one (1) year after` the specified milliseconds.
234245
* This moves the `active` date one year `right` in the current `year` view.
235246
*
236-
* Moving `right` can result in the `active` year being part of a different decade than
237-
* the specified `fromMilliseconds`, in this case the decade represented by the model
238-
* will change to show the correct decade.
247+
* Moving `right` can result in the `active` year being part of a different quarter-century than
248+
* the specified `fromMilliseconds`, in this case the quarter-century represented by the model
249+
* will change to show the correct quarter-century.
239250
*
240251
* @param fromMilliseconds
241252
* the moment in time from which the `year` model to the `right` will be constructed.
@@ -249,52 +260,52 @@ display `25 years` by doing the following:
249260
}
250261

251262
/**
252-
* Move the active `year` one decade `down` from the specified moment in time.
263+
* Move the active `year` one quarter-century `down` from the specified moment in time.
253264
*
254265
* The `active` year will be the January 1 `ten (10) years after` the specified milliseconds.
255266
* This moves the `active` date one `page` `down` from the current `year` view.
256267
*
257-
* Paging `down` will result in the `active` year being part of a different decade than
258-
* the specified `fromMilliseconds`. As a result, the decade represented by the model
259-
* will change to show the correct decade.
268+
* Paging `down` will result in the `active` year being part of a different quarter-century than
269+
* the specified `fromMilliseconds`. As a result, the quarter-century represented by the model
270+
* will change to show the correct quarter-century.
260271
*
261272
* @param fromMilliseconds
262273
* the moment in time from which the next `year` model page `down` will be constructed.
263274
* @param selectedMilliseconds
264275
* the current value of the date/time picker.
265276
* @returns
266-
* model containing an `active` `year` one decade `down` from the specified moment in time.
277+
* model containing an `active` `year` one quarter-century `down` from the specified moment in time.
267278
*/
268279
pageDown(fromMilliseconds: number, selectedMilliseconds: number): DlDateTimePickerModel {
269280
return this.getModel(moment(fromMilliseconds).add(25, 'year').valueOf(), selectedMilliseconds);
270281
}
271282

272283
/**
273-
* Move the active `year` one decade `up` from the specified moment in time.
284+
* Move the active `year` one quarter-century `up` from the specified moment in time.
274285
*
275286
* The `active` year will be the January 1 `ten (10) years before` the specified milliseconds.
276287
* This moves the `active` date one `page-up` from the current `year` view.
277288
*
278-
* Paging `up` will result in the `active` year being part of a different decade than
279-
* the specified `fromMilliseconds`. As a result, the decade represented by the model
280-
* will change to show the correct decade.
289+
* Paging `up` will result in the `active` year being part of a different quarter-century than
290+
* the specified `fromMilliseconds`. As a result, the quarter-century represented by the model
291+
* will change to show the correct quarter-century.
281292
*
282293
* @param fromMilliseconds
283294
* the moment in time from which the next `year` model page `up` will be constructed.
284295
* @param selectedMilliseconds
285296
* the current value of the date/time picker.
286297
* @returns
287-
* model containing an `active` `year` one decade `up` from the specified moment in time.
298+
* model containing an `active` `year` one quarter-century `up` from the specified moment in time.
288299
*/
289300
pageUp(fromMilliseconds: number, selectedMilliseconds: number): DlDateTimePickerModel {
290301
return this.getModel(moment(fromMilliseconds).subtract(25, 'year').valueOf(), selectedMilliseconds);
291302
}
292303

293304
/**
294-
* Move the `active` `year` to the `last` year in the decade.
305+
* Move the `active` `year` to the `last` year in the quarter-century.
295306
*
296307
* The view or time range will not change unless the `fromMilliseconds` value
297-
* is in a different decade than the displayed decade.
308+
* is in a different quarter-century than the displayed quarter-century.
298309
*
299310
* @param fromMilliseconds
300311
* the moment in time from which the `last` active `year` will be calculated.
@@ -314,10 +325,10 @@ display `25 years` by doing the following:
314325
}
315326

316327
/**
317-
* Move the `active` `year` to the `first` year in the decade.
328+
* Move the `active` `year` to the `first` year in the quarter-century.
318329
*
319330
* The view or time range will not change unless the `fromMilliseconds` value
320-
* is in a different decade than the displayed decade.
331+
* is in a different quarter-century than the displayed quarter-century.
321332
*
322333
* @param fromMilliseconds
323334
* the moment in time from which the `first` active `year` will be calculated.
@@ -348,3 +359,8 @@ display `25 years` by doing the following:
348359
This will result in `QuarterCenturyYearModelProvider` being used in every instance of the date/time
349360
picker in your application.
350361

362+
This approach can be extended to any of the `ModelProvider`'s for a view.
363+
364+
For example, imagine you need a time picker that only displays certain hours of the day. You can implement
365+
an `HourModelProvider` that has the exact functionality you need without having the write the entire
366+
component yourself.

0 commit comments

Comments
 (0)