Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: add custom formatting to datetime picker (#918)
* add custom formatting to datetime picker * Change time delimiters
- Loading branch information
1 parent
8c66f73
commit 8425549
Showing
7 changed files
with
115 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
...s/datetime-picker/examples/datetime-format-example/datetime-format-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <fd-datetime-picker [(ngModel)]="this.date"></fd-datetime-picker> | ||
| <br /> <br /> | ||
| Selected: {{date ? date.toLocaleString() : 'null'}} |
37 changes: 37 additions & 0 deletions
37
...ocs/datetime-picker/examples/datetime-format-example/datetime-format-example.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { Component, Injectable } from '@angular/core'; | ||
| import { DateTimeFormatParser } from '../../../../../../../library/src/lib/datetime-picker/format/datetime-parser'; | ||
|
|
||
| @Injectable() | ||
| export class DateTimeFormatExample extends DateTimeFormatParser { | ||
|
|
||
| public parse(value: string): Date { | ||
| value = value.replace(/[\/hms ]/g, '-'); | ||
| const values: number[] = value.split('-').map(Number); | ||
| return new Date(Number(values[1] - 1), values[0], values[2], values[3], values[4], values[5]); | ||
| } | ||
|
|
||
| public format(date: Date): string { | ||
| const getAtLeastTwoDigits = function(num: number): string { return num < 10 ? '0' + num : String(num) }; | ||
| return date.getFullYear() + '-' + | ||
| getAtLeastTwoDigits(date.getMonth() + 1) + '-' + | ||
| date.getDate() + ' ' + | ||
| getAtLeastTwoDigits(date.getHours()) + 'h' + | ||
| getAtLeastTwoDigits(date.getMinutes()) + 'm' + | ||
| getAtLeastTwoDigits(date.getSeconds()) + 's' | ||
| } | ||
| } | ||
|
|
||
|
|
||
| @Component({ | ||
| selector: 'fd-datetime-format-example', | ||
| templateUrl: './datetime-format-example.component.html', | ||
| providers: [ | ||
| { | ||
| provide: DateTimeFormatParser, | ||
| useClass: DateTimeFormatExample | ||
| } | ||
| ] | ||
| }) | ||
| export class DatetimeFormatExampleComponent { | ||
| date = new Date(); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { Injectable } from '@angular/core'; | ||
|
|
||
| export function DATE_TIME_FORMAT_FACTORY() { | ||
| return new DateTimeFormatParserDefault(); | ||
| } | ||
|
|
||
| /** | ||
| * Abstract class which defines the behaviour of the datetime format and parser. | ||
| */ | ||
| @Injectable({ | ||
| providedIn: 'root', | ||
| useFactory: DATE_TIME_FORMAT_FACTORY | ||
| }) | ||
| export abstract class DateTimeFormatParser { | ||
|
|
||
| /** | ||
| * Should take in a string value and return a date object. | ||
| * @param value String to concert to a date object. | ||
| */ | ||
| abstract parse(value: string): Date; | ||
|
|
||
| /** | ||
| * Should take in a date object and return a string representation. | ||
| * @param date String to concert to a date object. | ||
| */ | ||
| abstract format(date: Date): string; | ||
| } | ||
|
|
||
| /** | ||
| * Default implementation of the DateFormatParser service. | ||
| */ | ||
| @Injectable() | ||
| export class DateTimeFormatParserDefault extends DateTimeFormatParser { | ||
|
|
||
| /** | ||
| * Takes in a string representation of a date and returns a Date object. | ||
| * @param value String to convert to a date. | ||
| */ | ||
| public parse(value: string): Date { | ||
| return new Date(value); | ||
| } | ||
|
|
||
| /** | ||
| * Takes in a date object and returns the string representation. | ||
| * @param date Date object to convert to a string. | ||
| */ | ||
| public format(date: Date): string { | ||
| return date.toLocaleString(); | ||
| } | ||
| } |