Skip to content

Commit ca5eac8

Browse files
mrholekmrholek
committed
feat(Calendar, DatePicker, DateRangePicker, TimePicker): initial release
1 parent 182c8e8 commit ca5eac8

17 files changed

+2795
-1
lines changed

‎docs/assets/js/application.js

Lines changed: 105 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,6 @@
129129
var myMultiSelect = document.getElementById('multiSelect')
130130

131131
if (myMultiSelect) {
132-
// eslint-disable-next-line no-unused-vars
133132
var cuiMultiSelect = new coreui.MultiSelect(myMultiSelect, {
134133
name: 'multiSelect',
135134
options: [
@@ -172,6 +171,111 @@
172171
],
173172
search: true
174173
})
174+
cuiMultiSelect.update({
175+
options: [
176+
{
177+
value: 0,
178+
text: 'Angular2'
179+
},
180+
{
181+
value: 1,
182+
text: 'Bootstrap2',
183+
selected: true
184+
},
185+
{
186+
value: 2,
187+
text: 'React.js',
188+
selected: true
189+
},
190+
{
191+
value: 3,
192+
text: 'Vue.js'
193+
},
194+
{
195+
label: 'backend',
196+
options: [
197+
{
198+
value: 4,
199+
text: 'Django'
200+
},
201+
{
202+
value: 5,
203+
text: 'Laravel'
204+
},
205+
{
206+
value: 6,
207+
text: 'Node.js',
208+
selected: true
209+
}
210+
]
211+
}
212+
]
213+
})
214+
}
215+
216+
if (document.getElementById('myDateRangePickerDisabledDates')) {
217+
var optionsDateRangePickerDisabledDates = {
218+
locale: 'en-US',
219+
calendarDate: new Date(2022, 2, 1),
220+
disabledDates: [
221+
[new Date(2022, 2, 4), new Date(2022, 2, 7)],
222+
new Date(2022, 2, 16),
223+
new Date(2022, 3, 16),
224+
[new Date(2022, 4, 2), new Date(2022, 4, 8)]
225+
],
226+
maxDate: new Date(2022, 5, 0),
227+
minDate: new Date(2022, 1, 1)
228+
}
229+
// eslint-disable-next-line no-unused-vars
230+
var myDateRangePickerDisabledDates = new coreui.DateRangePicker(document.getElementById('myDateRangePickerDisabledDates'), optionsDateRangePickerDisabledDates)
231+
}
232+
233+
if (document.getElementById('myDatePickerDisabledDates')) {
234+
var optionsDatePickerDisabledDates = {
235+
locale: 'en-US',
236+
calendarDate: new Date(2022, 2, 1),
237+
disabledDates: [
238+
[new Date(2022, 2, 4), new Date(2022, 2, 7)],
239+
new Date(2022, 2, 16),
240+
new Date(2022, 3, 16),
241+
[new Date(2022, 4, 2), new Date(2022, 4, 8)]
242+
],
243+
maxDate: new Date(2022, 5, 0),
244+
minDate: new Date(2022, 1, 1)
245+
}
246+
// eslint-disable-next-line no-unused-vars
247+
var myDatePickerDisabledDates = new coreui.DatePicker(document.getElementById('myDatePickerDisabledDates'), optionsDatePickerDisabledDates)
248+
}
249+
250+
if (document.getElementById('myDateRangePickerCustomRanges')) {
251+
var optionsCustomRanges = {
252+
locale: 'en-US',
253+
ranges: {
254+
Today: [new Date(), new Date()],
255+
Yesterday: [
256+
new Date(new Date().setDate(new Date().getDate() - 1)),
257+
new Date(new Date().setDate(new Date().getDate() - 1))
258+
],
259+
'Last 7 Days': [
260+
new Date(new Date().setDate(new Date().getDate() - 6)),
261+
new Date(new Date())
262+
],
263+
'Last 30 Days': [
264+
new Date(new Date().setDate(new Date().getDate() - 29)),
265+
new Date(new Date())
266+
],
267+
'This Month': [
268+
new Date(new Date().setDate(1)),
269+
new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
270+
],
271+
'Last Month': [
272+
new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
273+
new Date(new Date().getFullYear(), new Date().getMonth(), 0)
274+
]
275+
}
276+
}
277+
// eslint-disable-next-line no-unused-vars
278+
var myDateRangePickerCustomRanges = new coreui.DateRangePicker(document.getElementById('myDateRangePickerCustomRanges'), optionsCustomRanges)
175279
}
176280

177281
// Insert copy to clipboard button before .highlight

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

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
---
2+
layout: docs
3+
title: Date Picker
4+
description: Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
5+
group: forms
6+
toc: true
7+
---
8+
9+
## Example
10+
11+
{{< example >}}
12+
<div class="row mb-4">
13+
<div class="col-lg-4">
14+
<div data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
15+
</div>
16+
</div>
17+
{{< /example >}}
18+
19+
### With timepicker
20+
21+
{{< example >}}
22+
<div class="row mb-4">
23+
<div class="col-lg-7">
24+
<div data-coreui-locale="en-US" data-coreui-timepicker="true" data-coreui-toggle="date-picker"></div>
25+
</div>
26+
</div>
27+
{{< /example >}}
28+
29+
## Sizing
30+
31+
Set heights using `size` property like `size="lg"` and `size="sm"`.
32+
33+
{{< example >}}
34+
<div class="row mb-4">
35+
<div class="col-lg-4">
36+
<div data-coreui-locale="en-US" data-coreui-size="lg" data-coreui-toggle="date-picker"></div>
37+
</div>
38+
</div>
39+
<div class="row">
40+
<div class="col-lg-4">
41+
<div data-coreui-locale="en-US" data-coreui-size="sm" data-coreui-toggle="date-picker"></div>
42+
</div>
43+
</div>
44+
{{< /example >}}
45+
46+
## Disabled
47+
48+
Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
49+
50+
{{< example >}}
51+
<div class="row">
52+
<div class="col-lg-4">
53+
<div data-coreui-disabled="true" data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
54+
</div>
55+
</div>
56+
{{< /example >}}
57+
58+
## Readonly
59+
60+
Add the `inputReadOnly` boolean attribute to prevent modification of the input's value.
61+
62+
{{< example >}}
63+
<div class="row">
64+
<div class="col-lg-4">
65+
<div data-coreui-input-read-only="true" data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
66+
</div>
67+
</div>
68+
{{< /example >}}
69+
70+
## Disabled dates
71+
72+
{{< example >}}
73+
<div class="row">
74+
<div class="col-lg-4">
75+
<div id="myDatePickerDisabledDates"></div>
76+
</div>
77+
</div>
78+
{{< /example >}}
79+
80+
```js
81+
var options = {
82+
locale: 'en-US',
83+
calendarDate: new Date(2022, 2, 1),
84+
disabledDates: [
85+
[new Date(2022, 2, 4), new Date(2022, 2, 7)],
86+
new Date(2022, 2, 16),
87+
new Date(2022, 3, 16),
88+
[new Date(2022, 4, 2), new Date(2022, 4, 8)]
89+
],
90+
maxDate: new Date(2022, 5, 0),
91+
minDate: new Date(2022, 1, 1)
92+
}
93+
94+
var myDatePickerDisabledDates = new coreui.DatePicker(document.getElementById('myDatePickerDisabledDates'), options)
95+
```
96+
97+
## Non-english locale
98+
99+
### Auto
100+
101+
{{< example >}}
102+
<div class="row">
103+
<div class="col-lg-4">
104+
<div data-coreui-toggle="date-picker"></div>
105+
</div>
106+
</div>
107+
{{< /example >}}
108+
109+
### Chinese
110+
111+
{{< example >}}
112+
<div class="row">
113+
<div class="col-lg-4">
114+
<div data-coreui-locale="zh-CN" data-coreui-placeholder="入住日期" data-coreui-toggle="date-picker"></div>
115+
</div>
116+
</div>
117+
{{< /example >}}
118+
119+
### Japanese
120+
121+
{{< example >}}
122+
<div class="row">
123+
<div class="col-lg-4">
124+
<div data-coreui-locale="ja" data-coreui-placeholder="日付を選択" data-coreui-toggle="date-picker"></div>
125+
</div>
126+
</div>
127+
{{< /example >}}
128+
129+
### Korean
130+
131+
{{< example >}}
132+
<div class="row">
133+
<div class="col-lg-4">
134+
<div data-coreui-locale="ko" data-coreui-placeholder="날짜 선택" data-coreui-toggle="date-picker"></div>
135+
</div>
136+
</div>
137+
{{< /example >}}
138+
139+
## Right to left support
140+
141+
RTL support is built-in and can be explicitly controlled through the `$enable-rtl` variables in scss.
142+
143+
### Hebrew
144+
145+
{{< example >}}
146+
<div class="row">
147+
<div class="col-lg-4">
148+
<div data-coreui-locale="he-IL" data-coreui-placeholder="בחר תאריך" data-coreui-toggle="date-picker" dir="rtl"></div>
149+
</div>
150+
</div>
151+
{{< /example >}}
152+
153+
### Persian
154+
155+
{{< example >}}
156+
<div class="row">
157+
<div class="col-lg-4">
158+
<div data-coreui-locale="fa-IR" data-coreui-placeholder="تاریخ شروع" data-coreui-toggle="date-picker" dir="rtl"></div>
159+
</div>
160+
</div>
161+
{{< /example >}}
162+

0 commit comments

Comments
 (0)