Skip to content

Commit adfdc5d

Browse files
mrholekmrholek
committed
docs: update documentation
1 parent 60e3868 commit adfdc5d

File tree

5 files changed

+863
-35
lines changed

5 files changed

+863
-35
lines changed

‎docs/assets/scss/docs.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,24 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
6161
@import "syntax";
6262
@import "anchor";
6363
// @import "algolia";
64+
65+
/* stylelint-disable */
66+
div[dir="rtl"] .input-group > :not(:last-child),
67+
div[dir="rtl"] .input-group > .dropdown-toggle:nth-last-child(n+3) {
68+
border-right: 0 !important;
69+
@include border-end-radius($input-border-radius !important);
70+
}
71+
72+
div[dir="rtl"] .input-group > :not(:first-child) {
73+
@include border-start-radius($input-border-radius !important);
74+
@include border-end-radius(0 !important);
75+
}
76+
77+
div[dir="rtl"] .picker .input-group .form-control:first-child {
78+
border-right : $input-border-width solid var(--#{$variable-prefix}input-border-color, $input-border-color) !important;
79+
}
80+
81+
div[dir="rtl"] .picker .input-group > * + *:not(:last-child) {
82+
@include border-start-radius(0 !important);
83+
}
84+
/* stylelint-enable */

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

Lines changed: 276 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,48 @@
11
---
22
layout: docs
33
title: Date Picker
4-
description: Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
4+
description: Create consistent cross-browser and cross-device time picker.
55
group: forms
66
toc: true
77
---
88

9+
## Installation
10+
11+
This component is part of the CoreUI LAB. If you want to use Date Picker component you have to install **next** version of the `@coreui/coreui-pro@next` package. The LAB is the place where we release components that are actively developed and will be included in future releases of `@coreui/coreui-pro`.
12+
13+
```sh
14+
npm install @coreui/coreui-pro@next
15+
```
16+
917
## Example
1018

1119
{{< example >}}
12-
<div class="row mb-4">
20+
<div class="row">
1321
<div class="col-lg-4">
1422
<div data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
1523
</div>
24+
<div class="col-lg-4">
25+
<div data-coreui-date="2023/03/15" data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
26+
</div>
1627
</div>
1728
{{< /example >}}
1829

1930
### With timepicker
2031

2132
{{< example >}}
22-
<div class="row mb-4">
23-
<div class="col-lg-7">
33+
<div class="row">
34+
<div class="col-lg-4">
2435
<div data-coreui-locale="en-US" data-coreui-timepicker="true" data-coreui-toggle="date-picker"></div>
2536
</div>
37+
<div class="col-lg-4">
38+
<div data-coreui-date="2023/03/15 02:22:13 PM" data-coreui-locale="en-US" data-coreui-timepicker="true" data-coreui-toggle="date-picker"></div>
39+
</div>
2640
</div>
2741
{{< /example >}}
2842

2943
## Sizing
3044

31-
Set heights using `size` property like `size="lg"` and `size="sm"`.
45+
Set heights using `data-coreui-size` attribute like `data-coreui-size="lg"` and `data-coreui-size="sm"`.
3246

3347
{{< example >}}
3448
<div class="row mb-4">
@@ -45,7 +59,7 @@ Set heights using `size` property like `size="lg"` and `size="sm"`.
4559

4660
## Disabled
4761

48-
Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
62+
Add the `data-coreui-disabled="true"` attribute on an input to give it a grayed out appearance and remove pointer events.
4963

5064
{{< example >}}
5165
<div class="row">
@@ -57,7 +71,7 @@ Add the `disabled` boolean attribute on an input to give it a grayed out appeara
5771

5872
## Readonly
5973

60-
Add the `inputReadOnly` boolean attribute to prevent modification of the input's value.
74+
Add the `data-coreui-input-read-only="true"` boolean attribute to prevent modification of the input's value.
6175

6276
{{< example >}}
6377
<div class="row">
@@ -160,3 +174,258 @@ RTL support is built-in and can be explicitly controlled through the `$enable-rt
160174
</div>
161175
{{< /example >}}
162176

177+
## Usage
178+
179+
### Via data attributes
180+
181+
Add `data-coreui-toggle="date-picker"` to a `div` element.
182+
183+
```html
184+
<div data-coreui-toggle="date-picker"></div>
185+
```
186+
187+
### Via JavaScript
188+
189+
Call the time picker via JavaScript:
190+
191+
```html
192+
<div class="date-picker"></div>
193+
```
194+
195+
```js
196+
var datePickerElementList = Array.prototype.slice.call(document.querySelectorAll('.date-picker'))
197+
var datePickerList = datePickerElementList.map(function (datePickerEl) {
198+
return new coreui.DatePicker(datePickerEl)
199+
})
200+
```
201+
202+
### Options
203+
204+
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-coreui-`, as in `data-coreui-cleaner=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-coreui-inputReadOnly="false"`, use `data-coreui-input-read-only="false"`.
205+
206+
<table class="table">
207+
<thead>
208+
<tr>
209+
<th style="width: 100px;">Name</th>
210+
<th style="width: 100px;">Type</th>
211+
<th style="width: 50px;">Default</th>
212+
<th>Description</th>
213+
</tr>
214+
</thead>
215+
<tbody>
216+
<tr>
217+
<td><code>calendarDate</code></td>
218+
<td>date | string | null</td>
219+
<td><code>null</code></td>
220+
<td>Default date of the component.</td>
221+
</tr>
222+
<tr>
223+
<td><code>cancelButtonText</code></td>
224+
<td>string</td>
225+
<td><code>'Cancel'</code></td>
226+
<td>Cancel button text.</td>
227+
</tr>
228+
<tr>
229+
<td><code>cleaner</code></td>
230+
<td>boolean</td>
231+
<td><code>true</code></td>
232+
<td>Enables selection cleaner element.</td>
233+
</tr>
234+
<tr>
235+
<td><code>date</code></td>
236+
<td>date | string | null</td>
237+
<td><code>null</code></td>
238+
<td>Initial selected date.</td>
239+
</tr>
240+
<tr>
241+
<td><code>disabled</code></td>
242+
<td>boolean</td>
243+
<td><code>false</code></td>
244+
<td>Toggle the disabled state for the component.</td>
245+
</tr>
246+
<tr>
247+
<td><code>disabledDates</code></td>
248+
<td>array | null</td>
249+
<td><code>null</code></td>
250+
<td>Specify the list of dates that cannot be selected.</td>
251+
</tr>
252+
<tr>
253+
<td><code>firstDayOfWeek</code></td>
254+
<td>number</td>
255+
<td><code>1</code></td>
256+
<td>
257+
<p>Sets the day of start week.</p>
258+
<ul>
259+
<li><code>0</code> - Sunday</li>
260+
<li><code>1</code> - Monday</li>
261+
<li><code>2</code> - Tuesday</li>
262+
<li><code>3</code> - Wednesday</li>
263+
<li><code>4</code> - Thursday</li>
264+
<li><code>5</code> - Friday</li>
265+
<li><code>6</code> - Saturday</li>
266+
</ul>
267+
</td>
268+
</tr>
269+
<tr>
270+
<td><code>inputReadOnly</code></td>
271+
<td>boolean</td>
272+
<td><code>false</code></td>
273+
<td>Toggle the readonly state for the component.</td>
274+
</tr>
275+
<tr>
276+
<td><code>footer</code></td>
277+
<td>boolean</td>
278+
<td><code>false</code></td>
279+
<td>Toggle visibility of footer element.</td>
280+
</tr>
281+
<tr>
282+
<td><code>locale</code></td>
283+
<td>string</td>
284+
<td><code>navigator.language</code></td>
285+
<td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td>
286+
</tr>
287+
<tr>
288+
<td><code>maxDate</code></td>
289+
<td>date | string | null</td>
290+
<td><code>null</code></td>
291+
<td>Max selectable date.</td>
292+
</tr>
293+
<tr>
294+
<td><code>minDate</code></td>
295+
<td>date | string | null</td>
296+
<td><code>null</code></td>
297+
<td>Min selectable date.</td>
298+
</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>
305+
<tr>
306+
<td><code>placeholder</code></td>
307+
<td>string</td>
308+
<td><code>'Select time'</code></td>
309+
<td>Specifies a short hint that is visible in the input.</td>
310+
</tr>
311+
<tr>
312+
<td><code>size</code></td>
313+
<td><code>'sm'</code> | <code>'lg'</code></td>
314+
<td><code>null</code></td>
315+
<td>Size the component small or large.</td>
316+
</tr>
317+
<tr>
318+
<td><code>timepicker</code></td>
319+
<td>boolean</td>
320+
<td><code>false</code></td>
321+
<td>Provide an additional time selection by adding select boxes to choose times.</td>
322+
</tr>
323+
<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>
338+
<td><code>2</code></td>
339+
<td>Set length of day name.</td>
340+
</tr>
341+
</tbody>
342+
</table>
343+
344+
### Methods
345+
346+
<table class="table">
347+
<thead>
348+
<tr>
349+
<th>Method</th>
350+
<th>Description</th>
351+
</tr>
352+
</thead>
353+
<tbody>
354+
<tr>
355+
<td><code>clear</code></td>
356+
<td>...</td>
357+
</tr>
358+
<tr>
359+
<td><code>reset</code></td>
360+
<td>...</td>
361+
</tr>
362+
<tr>
363+
<td><code>update</code></td>
364+
<td>
365+
Updates the position of an element's dropdown.
366+
</td>
367+
</tr>
368+
<tr>
369+
<td><code>dispose</code></td>
370+
<td>
371+
Destroys an element's dropdown. (Removes stored data on the DOM element)
372+
</td>
373+
</tr>
374+
<tr>
375+
<td>
376+
<code>getInstance</code>
377+
</td>
378+
<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>
380+
</td>
381+
</tr>
382+
<tr>
383+
<td>
384+
<code>getOrCreateInstance</code>
385+
</td>
386+
<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.
388+
You can use it like this: <code>coreui.DatePicker.getOrCreateInstance(element)</code>
389+
</td>
390+
</tr>
391+
</tbody>
392+
</table>
393+
394+
### Events
395+
396+
<table class="table">
397+
<thead>
398+
<tr>
399+
<th>Method</th>
400+
<th>Description</th>
401+
</tr>
402+
</thead>
403+
<tbody>
404+
<tr>
405+
<td>
406+
<code>dateChange.coreui.date-picker</code>
407+
</td>
408+
<td>
409+
Callback fired when the date changed.
410+
</td>
411+
</tr>
412+
</tbody>
413+
</table>
414+
415+
```js
416+
var myDatePicker = document.getElementById('myDatePicker')
417+
myDatePicker.addEventListener('dateChange.coreui.date-picker', function (date) {
418+
// do something...
419+
})
420+
```
421+
422+
## Customizing
423+
424+
### SASS
425+
426+
#### Variables
427+
428+
{{< scss-docs name="date-picker-variables" file="scss/_variables.scss" >}}
429+
430+
### CSS Vars
431+
{{< css-vars-docs file="scss/_date-picker.scss" >}}

0 commit comments

Comments
 (0)