diff --git a/packages/mosaic-examples/mosaic/timepicker/module.ts b/packages/mosaic-examples/mosaic/timepicker/module.ts index 0f913e0e5..688f410da 100644 --- a/packages/mosaic-examples/mosaic/timepicker/module.ts +++ b/packages/mosaic-examples/mosaic/timepicker/module.ts @@ -10,10 +10,12 @@ import { McSelectModule } from '@ptsecurity/mosaic/select'; import { McTimepickerModule } from '@ptsecurity/mosaic/timepicker'; import { TimepickerOverviewExample } from './timepicker-overview/timepicker-overview-example'; +import { TimepickerRangeExample } from './timepicker-range/timepicker-range-example'; const EXAMPLES = [ - TimepickerOverviewExample + TimepickerOverviewExample, + TimepickerRangeExample ]; diff --git a/packages/mosaic-examples/mosaic/timepicker/timepicker-overview/timepicker-overview-example.ts b/packages/mosaic-examples/mosaic/timepicker/timepicker-overview/timepicker-overview-example.ts index 8d9d5f333..89aeb79d4 100644 --- a/packages/mosaic-examples/mosaic/timepicker/timepicker-overview/timepicker-overview-example.ts +++ b/packages/mosaic-examples/mosaic/timepicker/timepicker-overview/timepicker-overview-example.ts @@ -8,7 +8,7 @@ import { default as _rollupMoment } from 'moment'; // tslint:disable-next-line const moment = _rollupMoment || momentImported; /** - * @title Badges + * @title Timepicker overview */ @Component({ selector: 'timepicker-overview-example', diff --git a/packages/mosaic-examples/mosaic/timepicker/timepicker-range/timepicker-range-example.css b/packages/mosaic-examples/mosaic/timepicker/timepicker-range/timepicker-range-example.css new file mode 100644 index 000000000..9eb9d5c94 --- /dev/null +++ b/packages/mosaic-examples/mosaic/timepicker/timepicker-range/timepicker-range-example.css @@ -0,0 +1,10 @@ +.example-timepicker-group { + display: inline-flex; + flex-direction: column; +} + +.example-timepicker-element { + display: flex; + align-items: center; + margin-bottom: 10px; +} diff --git a/packages/mosaic-examples/mosaic/timepicker/timepicker-range/timepicker-range-example.html b/packages/mosaic-examples/mosaic/timepicker/timepicker-range/timepicker-range-example.html new file mode 100644 index 000000000..a8fb240f0 --- /dev/null +++ b/packages/mosaic-examples/mosaic/timepicker/timepicker-range/timepicker-range-example.html @@ -0,0 +1,34 @@ +
+
+ + + + + +
+ +
+ + + + +
+ +
+ + + + +
+
diff --git a/packages/mosaic-examples/mosaic/timepicker/timepicker-range/timepicker-range-example.ts b/packages/mosaic-examples/mosaic/timepicker/timepicker-range/timepicker-range-example.ts new file mode 100644 index 000000000..7a430f834 --- /dev/null +++ b/packages/mosaic-examples/mosaic/timepicker/timepicker-range/timepicker-range-example.ts @@ -0,0 +1,33 @@ +import { Component } from '@angular/core'; +import * as momentImported from 'moment'; +// @ts-ignore +// tslint:disable-next-line:no-duplicate-imports +import { default as _rollupMoment } from 'moment'; + + +// tslint:disable-next-line +const moment = _rollupMoment || momentImported; +/** + * @title Timepicker range + */ +@Component({ + selector: 'timepicker-range-example', + templateUrl: 'timepicker-range-example.html', + styleUrls: ['timepicker-range-example.css'] +}) +export class TimepickerRangeExample { + moment = moment; + format = 'HH:mm:ss'; + + startTime = this.moment().startOf('day'); + endTime = this.moment(); + time = this.moment().startOf('hour'); + + getStartTime() { + return this.startTime ? this.startTime.format(this.format) : ''; + } + + getEndTime() { + return this.endTime ? this.endTime.format(this.format) : ''; + } +} diff --git a/packages/mosaic/timepicker/timepicker.md b/packages/mosaic/timepicker/timepicker.md index 160986aaa..dfbf5d74f 100644 --- a/packages/mosaic/timepicker/timepicker.md +++ b/packages/mosaic/timepicker/timepicker.md @@ -1 +1,7 @@ + +#### Timepicker min max range +Параметры min max должны быть строками определенного формата: `16:00:00`, +в данном примере тип Moment приводится к нужному формату соответствующей функцией: `moment().format('HH:mm:ss')` + +