diff --git a/projects/demo/src/pages/kit/time/examples/maskito-parse-stringify-time-demo.md b/projects/demo/src/pages/kit/time/examples/maskito-parse-stringify-time-demo.md new file mode 100644 index 000000000..e1548fe25 --- /dev/null +++ b/projects/demo/src/pages/kit/time/examples/maskito-parse-stringify-time-demo.md @@ -0,0 +1,10 @@ +```ts +import {maskitoTimeOptionsGenerator, maskitoParseTime, maskitoStringifyTime} from '@maskito/kit'; + +const options = maskitoTimeOptionsGenerator({mode: 'HH:MM:SS.MSS'}); + +maskitoParseTime('23:59:59.999', options); // 86399999 +maskitoParseTime('12:3', options); // 43380000 (parsed like '12:30:00.000') + +maskitoStringifyTime(86399999, options); // '23:59:59.999' +``` diff --git a/projects/demo/src/pages/kit/time/time-mask-doc.component.ts b/projects/demo/src/pages/kit/time/time-mask-doc.component.ts index 65a148b43..ad9a4f05f 100644 --- a/projects/demo/src/pages/kit/time/time-mask-doc.component.ts +++ b/projects/demo/src/pages/kit/time/time-mask-doc.component.ts @@ -7,7 +7,7 @@ import type {MaskitoTimeMode, MaskitoTimeSegments} from '@maskito/kit'; import {maskitoTimeOptionsGenerator} from '@maskito/kit'; import type {TuiDocExample} from '@taiga-ui/addon-doc'; import {TuiAddonDocModule} from '@taiga-ui/addon-doc'; -import {TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiNotificationModule, TuiTextfieldControllerModule} from '@taiga-ui/core'; import {TuiInputModule} from '@taiga-ui/kit'; import {TimeMaskDocExample1} from './examples/1-modes/component'; @@ -28,12 +28,17 @@ type GeneratorOptions = Required[ TimeMaskDocExample1, TimeMaskDocExample2, TimeMaskDocExample3, + TuiNotificationModule, ], templateUrl: './time-mask-doc.template.html', styleUrls: ['./time-mask-doc.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class TimeMaskDocComponent implements GeneratorOptions { + protected readonly maskitoParseStringifyTimeDemo = import( + './examples/maskito-parse-stringify-time-demo.md?raw' + ); + protected readonly modeExample1: TuiDocExample = { [DocExamplePrimaryTab.MaskitoOptions]: import('./examples/1-modes/mask.ts?raw'), }; diff --git a/projects/demo/src/pages/kit/time/time-mask-doc.template.html b/projects/demo/src/pages/kit/time/time-mask-doc.template.html index d74b36e0e..68b3019ea 100644 --- a/projects/demo/src/pages/kit/time/time-mask-doc.template.html +++ b/projects/demo/src/pages/kit/time/time-mask-doc.template.html @@ -7,6 +7,23 @@ maskitoTimeOptionsGenerator to create a mask for time input. + + Despite the name of the mask, element's raw value is still string. + +

+ Use + maskitoParseTime + to get milliseconds from masked string. +

+

+ Use + maskitoStringifyTime + to get the masked string from milliseconds. +

+ + +
+