feat(docs): adding timepicker range example (#390)

positive-js · Jan 22, 2020 · f90b82a · f90b82a
1 parent 04921ce
commit f90b82a
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 2 deletions.
diff --git 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/...ages/mosaic-examples/mosaic/timepicker/timepicker-overview/timepicker-overview-example.ts b/...ages/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
@@ -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
@@ -0,0 +1,34 @@
+<div class="example-timepicker-group">
+    <div class="example-timepicker-element">
+        <label for="Time"
+               class="flex-35 mc-form-label">Выберите время между min и max</label>
+        <mc-form-field >
+            <i mcPrefix mc-icon="mc-clock_16"></i>
+            <input mcTimepicker
+                   id="Time"
+                   [min-time]="getStartTime()"
+                   [max-time]="getEndTime()"
+                   [(ngModel)]="time">
+        </mc-form-field>
+    </div>
+
+    <div class="example-timepicker-element">
+        <label for="startTime"
+               class="flex-35 mc-form-label">min</label>
+        <mc-form-field >
+            <input mcTimepicker
+                   id="startTime"
+                   [(ngModel)]="startTime">
+        </mc-form-field>
+    </div>
+
+    <div class="example-timepicker-element">
+        <label for="endTime"
+               class="flex-35 mc-form-label">max</label>
+        <mc-form-field >
+            <input mcTimepicker
+                   id="endTime"
+                   [(ngModel)]="endTime">
+        </mc-form-field>
+    </div>
+</div>
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
@@ -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
@@ -1 +1,7 @@
 <!-- example(timepicker-overview) -->
+
+#### Timepicker min max range
+Параметры min max должны быть строками определенного формата: `16:00:00`,
+в данном примере тип Moment приводится к нужному формату соответствующей функцией: `moment().format('HH:mm:ss')`
+
+<!-- example(timepicker-range) -->