Skip to content

Commit 8155911

Browse files
mrholekmrholek
committed
docs: update content
1 parent ab06039 commit 8155911

File tree

4 files changed

+181
-94
lines changed

4 files changed

+181
-94
lines changed

‎docs/content/forms/date-picker.md

Lines changed: 60 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,19 @@ npm install @coreui/coreui-pro@next
2727
</div>
2828
{{< /example >}}
2929

30+
### With footer
31+
32+
{{< example >}}
33+
<div class="row">
34+
<div class="col-lg-4">
35+
<div data-coreui-footer="true" data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
36+
</div>
37+
<div class="col-lg-4">
38+
<div data-coreui-date="2023/03/15" data-coreui-footer="true" data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
39+
</div>
40+
</div>
41+
{{< /example >}}
42+
3043
### With timepicker
3144

3245
{{< example >}}
@@ -46,7 +59,7 @@ Set heights using `data-coreui-size` attribute like `data-coreui-size="lg"` and
4659

4760
{{< example >}}
4861
<div class="row mb-4">
49-
<div class="col-lg-4">
62+
<div class="col-lg-5">
5063
<div data-coreui-locale="en-US" data-coreui-size="lg" data-coreui-toggle="date-picker"></div>
5164
</div>
5265
</div>
@@ -220,10 +233,16 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
220233
<td>Default date of the component.</td>
221234
</tr>
222235
<tr>
223-
<td><code>cancelButtonText</code></td>
236+
<td><code>cancelButtonLabel</code></td>
224237
<td>string</td>
225238
<td><code>'Cancel'</code></td>
226-
<td>Cancel button text.</td>
239+
<td>Cancel button inner HTML</td>
240+
</tr>
241+
<tr>
242+
<td><code>cancelButtonClasses</code></td>
243+
<td>array | string</td>
244+
<td><code>['btn', 'btn-sm', 'btn-ghost-primary']</code></td>
245+
<td>CSS class names that will be added to the cancel button</td>
227246
</tr>
228247
<tr>
229248
<td><code>cleaner</code></td>
@@ -237,6 +256,24 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
237256
<td><code>null</code></td>
238257
<td>Initial selected date.</td>
239258
</tr>
259+
<tr>
260+
<td><code>confirmButtonLabel</code></td>
261+
<td>string</td>
262+
<td><code>'OK'</code></td>
263+
<td>Confirm button inner HTML</td>
264+
</tr>
265+
<tr>
266+
<td><code>confirmButtonClasses</code></td>
267+
<td>array | string</td>
268+
<td><code>['btn', 'btn-sm', 'btn-primary']</code></td>
269+
<td>CSS class names that will be added to the confirm button</td>
270+
</tr>
271+
<tr>
272+
<td><code>date</code></td>
273+
<td>date | string | null</td>
274+
<td><code>null</code></td>
275+
<td>Default value of the component</td>
276+
</tr>
240277
<tr>
241278
<td><code>disabled</code></td>
242279
<td>boolean</td>
@@ -267,21 +304,27 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
267304
</td>
268305
</tr>
269306
<tr>
270-
<td><code>inputReadOnly</code></td>
307+
<td><code>footer</code></td>
271308
<td>boolean</td>
272309
<td><code>false</code></td>
273-
<td>Toggle the readonly state for the component.</td>
310+
<td>Toggle visibility of footer element.</td>
274311
</tr>
275312
<tr>
276-
<td><code>footer</code></td>
313+
<td><code>indicator</code></td>
314+
<td>boolean</td>
315+
<td><code>true</code></td>
316+
<td>Toggle visibility or set the content of the input indicator.</td>
317+
</tr>
318+
<tr>
319+
<td><code>inputReadOnly</code></td>
277320
<td>boolean</td>
278321
<td><code>false</code></td>
279-
<td>Toggle visibility of footer element.</td>
322+
<td>Toggle the readonly state for the component.</td>
280323
</tr>
281324
<tr>
282325
<td><code>locale</code></td>
283326
<td>string</td>
284-
<td><code>navigator.language</code></td>
327+
<td><code>'default'</code></td>
285328
<td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td>
286329
</tr>
287330
<tr>
@@ -296,12 +339,6 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
296339
<td><code>null</code></td>
297340
<td>Min selectable date.</td>
298341
</tr>
299-
<tr>
300-
<td><code>okButtonText</code></td>
301-
<td>string</td>
302-
<td><code>'OK'</code></td>
303-
<td>Ok button text.</td>
304-
</tr>
305342
<tr>
306343
<td><code>placeholder</code></td>
307344
<td>string</td>
@@ -321,22 +358,10 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
321358
<td>Provide an additional time selection by adding select boxes to choose times.</td>
322359
</tr>
323360
<tr>
324-
<td><code>value</code></td>
325-
<td>date | string | null</td>
326-
<td><code>null</code></td>
327-
<td>Default value of the component</td>
328-
</tr>
329-
<tr>
330-
<td><code>variant</code></td>
331-
<td><code>'inline'</code> | <code>'roll'</code></td>
332-
<td><code>'roll'</code></td>
333-
<td>TODO: add description</td>
334-
</tr>
335-
<tr>
336-
<td><code>weekdayLength</code></td>
337-
<td>number</td>
361+
<td><code>weekdayFormat</code></td>
362+
<td>number | string</td>
338363
<td><code>2</code></td>
339-
<td>Set length of day name.</td>
364+
<td>Set length or format of day name.</td>
340365
</tr>
341366
</tbody>
342367
</table>
@@ -353,38 +378,38 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
353378
<tbody>
354379
<tr>
355380
<td><code>clear</code></td>
356-
<td>...</td>
381+
<td>Clear selection of the date picker.</td>
357382
</tr>
358383
<tr>
359384
<td><code>reset</code></td>
360-
<td>...</td>
385+
<td>Reset selection of the date picker to the initial value.</td>
361386
</tr>
362387
<tr>
363388
<td><code>update</code></td>
364389
<td>
365-
Updates the position of an element's dropdown.
390+
Updates the configuration of the date picker.
366391
</td>
367392
</tr>
368393
<tr>
369394
<td><code>dispose</code></td>
370395
<td>
371-
Destroys an element's dropdown. (Removes stored data on the DOM element)
396+
Destroys a component. (Removes stored data on the DOM element)
372397
</td>
373398
</tr>
374399
<tr>
375400
<td>
376401
<code>getInstance</code>
377402
</td>
378403
<td>
379-
Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: <code>coreui.DatePicker.getInstance(element)</code>
404+
Static method which allows you to get the date picker instance associated to a DOM element, you can use it like this: <code>coreui.DatePicker.getInstance(element)</code>
380405
</td>
381406
</tr>
382407
<tr>
383408
<td>
384409
<code>getOrCreateInstance</code>
385410
</td>
386411
<td>
387-
Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialized.
412+
Static method which returns a date picker instance associated to a DOM element or create a new one in case it wasn't initialized.
388413
You can use it like this: <code>coreui.DatePicker.getOrCreateInstance(element)</code>
389414
</td>
390415
</tr>

0 commit comments

Comments
 (0)