Skip to content

Commit 6d12485

Browse files
author
Grzegorz Bujański
committed
2 parents 697bb66 + 6c5ccec commit 6d12485

File tree

393 files changed

+63182
-7063
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

393 files changed

+63182
-7063
lines changed

‎en/angular/web/docs/forms/time-picker-2/a-ss.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<li class="nav-item"><a class="nav-link active" href="#a-introduction">Introduction</a></li>
2+
<li class="nav-item"><a class="nav-link" href="#a-modules">Modules used</a></li>
3+
<li class="nav-item"><a class="nav-link" href="#a-components">Components</a></li>
4+
<li class="nav-item"><a class="nav-link" href="#a-inputs">Inputs</a></li>
5+
<li class="nav-item"><a class="nav-link" href="#a-outputs">Outputs</a></li>
6+
<li class="nav-item"><a class="nav-link" href="#a-methods">Methods</a></li>

‎en/angular/web/docs/forms/time-picker-2/a.html

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
<!--Section: Introduction-->
2+
<section id="a-introduction">
3+
<h2 class="section-heading">Angular Time Picker - API</h2>
4+
5+
<p>In this section you will find informations about required modules and available inputs, outputs, methods and
6+
events of time picker component.</p>
7+
</section>
8+
<!--/Section: Introduction-->
9+
10+
<hr class="my-5">
11+
12+
<!--Section: Modules-->
13+
<section id="a-modules">
14+
<h2 class="section-heading">Modules used</h2>
15+
16+
<p>In order to speed up your application, you can choose to import only the modules you actually need, instead of
17+
importing
18+
the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific
19+
module,
20+
is bad practice, and can cause application errors.
21+
</p>
22+
23+
<h5 class="mb-4">API Reference for MDB Angular Time Picker:</h5>
24+
<pre><code class="language-javascript">// For MDB Angular Pro
25+
import { TimepickerModule, WavesModule } from 'ng-uikit-pro-standard'</code></pre>
26+
<div class="row">
27+
<div class="col-md-6">
28+
<a class="btn btn-primary waves-light mx-2" href="https://mdbootstrap.com/docs/angular/getting-started/importing-modules/" alt="Check how you should import MDB Angular modules">Import
29+
example</a>
30+
<a class="btn btn-primary waves-light mx-2" href="https://mdbootstrap.com/docs/angular/getting-started/modules/" alt="Check how you should import MDB Angular modules">Modules
31+
list</a>
32+
</div>
33+
</div>
34+
</section>
35+
<!--/Section: Modules-->
36+
37+
<hr class="my-5">
38+
39+
<!--Section: Components-->
40+
<section id="a-components">
41+
<h2 class="section-heading">Components</h2>
42+
43+
<h5 class="mt-4 mb-2"><strong>MdbTimePicker</strong></h5>
44+
45+
<!-- Description -->
46+
<p>Selector: <code>mdb-time-picker</code></p>
47+
<p>Type: <code>ClockPickerComponent</code></p>
48+
</section>
49+
<!--/Section: Components-->
50+
51+
<hr class="my-5">
52+
53+
<!--Section: Inputs-->
54+
<section id="a-inputs">
55+
<h2 class="section-heading">
56+
Inputs
57+
</h2>
58+
59+
<table class="table table-bordered table-striped table-responsive-md">
60+
<thead>
61+
<tr>
62+
<th>Name</th>
63+
<th>Type</th>
64+
<th>Default</th>
65+
<th>Description</th>
66+
<th>Example</th>
67+
</tr>
68+
</thead>
69+
<tbody>
70+
<tr>
71+
<td><code style="word-break: normal"><i>autoClose</i></code></td>
72+
<td>boolean</td>
73+
<td>false</td>
74+
<td>Auto close modal if you set time</td>
75+
<td><code>[autoClose]="true"</code></td>
76+
</tr>
77+
<tr>
78+
<td><code style="word-break: normal"><i>clearButton</i></code></td>
79+
<td>string</td>
80+
<td>'Clear'</td>
81+
<td>Custom text that will be used as label for 'Clear' button</td>
82+
<td><code>[clearButton]="'Reset'"</code></td>
83+
</tr>
84+
<tr>
85+
<td><code style="word-break: normal"><i>closeButton</i></code></td>
86+
<td>string</td>
87+
<td>'Close'</td>
88+
<td>Custom text that will be used as label for 'Clear' button</td>
89+
<td><code>[closeButton]="'Hide'"</code></td>
90+
</tr>
91+
<tr>
92+
<td><code style="word-break: normal"><i>max</i></code></td>
93+
<td>string</td>
94+
<td></td>
95+
<td>Sets the maximum available time</td>
96+
<td><code>[max]="'01:23PM'"</code></td>
97+
</tr>
98+
<tr>
99+
<td><code style="word-break: normal"><i>min</i></code></td>
100+
<td>string</td>
101+
<td></td>
102+
<td>Sets the minimum available time</td>
103+
<td><code>[min]="false"</code></td>
104+
</tr>
105+
<tr>
106+
<td><code style="word-break: normal"><i>okButton</i></code></td>
107+
<td>string</td>
108+
<td>'ok'</td>
109+
<td>Custom text that will be used as label for 'OK' button</td>
110+
<td><code>[okButton]="'Done'"</code></td>
111+
</tr>
112+
113+
<tr>
114+
<td><code style="word-break: normal"><i>rounding</i></code></td>
115+
<td>number</td>
116+
<td>1</td>
117+
<td>Changes step of minute digital for 1, 5, 10, 15, 20</td>
118+
<td><code>[rounding]="5"</code></td>
119+
</tr>
120+
121+
<tr>
122+
<td><code style="word-break: normal"><i>twelveHour</i></code></td>
123+
<td>boolean</td>
124+
<td>true</td>
125+
<td>Changes format of clock</td>
126+
<td><code>[twelveHour]="false"</code></td>
127+
</tr>
128+
</tbody>
129+
</table>
130+
</section>
131+
<!--/Section: Inputs-->
132+
133+
<hr class="my-5">
134+
135+
<!--Section: Outputs-->
136+
<section id="a-outputs">
137+
<h2 class="section-heading">
138+
Outputs
139+
</h2>
140+
141+
<table class="table table-bordered table-striped table-responsive-md">
142+
<thead>
143+
<tr>
144+
<th>Name</th>
145+
<th>Type</th>
146+
<th>Description</th>
147+
<th>Example</th>
148+
</tr>
149+
</thead>
150+
<tbody>
151+
152+
<tr>
153+
<td><code style="word-break: normal"><i>timeChange</i></code></td>
154+
<td>EventEmitter&lt;object&gt;</td>
155+
<td>Event emitted when time value change</td>
156+
<td><code>(timeChanged)="onTimeChange($event)"</code></td>
157+
</tr>
158+
159+
<tr>
160+
<td><code style="word-break: normal"><i>cancel</i></code></td>
161+
<td>EventEmitter&lt;object&gt;</td>
162+
<td>Event emitted when modal will close</td>
163+
<td><code>(cancel)="onModalClose($event)"</code></td>
164+
</tr>
165+
166+
<tr>
167+
<td><code style="word-break: normal"><i>done</i></code></td>
168+
<td>EventEmitter&lt;object&gt;</td>
169+
<td>Event emitted when user sets time</td>
170+
<td><code>(done)="onTimeDone($event)"</code></td>
171+
</tr>
172+
173+
<tr>
174+
<td><code style="word-break: normal"><i>show</i></code></td>
175+
<td>EventEmitter&lt;object&gt;</td>
176+
<td>Event emitted when user open modal</td>
177+
<td><code>(show)="onModalShow($event)"</code></td>
178+
</tr>
179+
180+
</tbody>
181+
</table>
182+
</section>
183+
<!--/Section: Outputs-->
184+
185+
<hr class="my-5">

‎en/angular/web/docs/forms/time-picker-2/js.html

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<script>
2+
$( document ).ready(function() {
3+
$('.date-time').dateTimePicker();
4+
});
5+
</script>
6+
7+
<!-- Structured data: Breadcrumbs -->
8+
<script type="application/ld+json">
9+
{
10+
"@context": "http://schema.org",
11+
"@type": "BreadcrumbList",
12+
"itemListElement": [{
13+
"@type": "ListItem",
14+
"position": 1,
15+
"item": {
16+
"@id": "https://mdbootstrap.com/",
17+
"name": "MDBootstrap",
18+
"image": "https://mdbootstrap.com/img/Marketing/mdb-press-pack/mdb-main.jpg"
19+
}
20+
}, {
21+
"@type": "ListItem",
22+
"position": 2,
23+
"item": {
24+
"@id": "https://mdbootstrap.com/docs/angular/",
25+
"name": "Angular",
26+
"image": "https://mdbootstrap.com/wp-content/uploads/2018/04/angular6-about.png"
27+
}
28+
}, {
29+
"@type": "ListItem",
30+
"position": 3,
31+
"item": {
32+
"@id": "https://mdbootstrap.com/docs/angular/forms/",
33+
"name": "Forms",
34+
"image": "https://mdbootstrap.com/wp-content/uploads/2015/08/forms.jpg"
35+
}
36+
}, {
37+
"@type": "ListItem",
38+
"position": 4,
39+
"item": {
40+
"@id": "https://mdbootstrap.com/docs/angular/forms/time-picker/",
41+
"name": "Time Picker",
42+
"image": "https://mdbootstrap.com/wp-content/uploads/2018/01/time-picker-fb.jpg"
43+
}
44+
}]
45+
}
46+
47+
</script>
48+
49+
<!-- Structured data: Article -->
50+
<script type="application/ld+json">
51+
{
52+
"@context": "http://schema.org",
53+
"@type": "NewsArticle",
54+
"mainEntityOfPage": {
55+
"@type": "WebPage",
56+
"@id": "https://mdbootstrap.com/docs/angular/forms/time-picker/"
57+
},
58+
"headline": "Angular Time Picker - Bootstrap 4 & Material Design. Examples & tutorial.",
59+
"image": [
60+
"https://mdbootstrap.com/wp-content/uploads/2018/01/time-picker-fb.jpg"
61+
],
62+
"datePublished": "2018-06-25T08:00:00+08:00",
63+
"dateModified": "2018-06-25T09:20:00+08:00",
64+
"author": {
65+
"@type": "Organization",
66+
"name": "MDBootstrap"
67+
},
68+
"publisher": {
69+
"@type": "Organization",
70+
"name": "MDBootstrap",
71+
"logo": {
72+
"@type": "ImageObject",
73+
"url": "https://mdbootstrap.com/img/Marketing/other/logo/logo-mdb-angular-small.png"
74+
}
75+
},
76+
"description": "Angular Bootstrap time picker is a component which allow users to choose a time from the form."
77+
}
78+
79+
</script>

‎en/angular/web/docs/forms/time-picker-2/o-ss.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<li class="nav-item"><a data-offset="100" class="nav-link active" href="#introduction">Introduction</a></li>
2+
<li class="nav-item"><a data-offset="100" class="nav-link" href="#basic-examples">Basic examples</a></li>
3+
<li class="nav-item"><a data-offset="100" class="nav-link" href="#validation">Required Validation</a></li>
4+
<li class="nav-item"><a data-offset="100" class="nav-link" href="#default">Default Time Picker</a></li>

0 commit comments

Comments
 (0)