Skip to content

Commit 2a8b091

Browse files
ibirreribirrer
committed
feat: new six-date component
1 parent 98c4058 commit 2a8b091

Some content is hidden

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

62 files changed

+17063
-12066
lines changed

‎.idea/codeStyles/Project.xml

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/components/component.tags.mts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export const components = ["six-alert","six-avatar","six-badge","six-button","six-card","six-checkbox","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"];
1+
export const components = ["six-alert","six-avatar","six-badge","six-button","six-card","six-checkbox","six-date","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"];

‎docs/components/six-date.md

+262
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
# Date
2+
3+
4+
The Date component allows users to enter a date manually or select one from a calendar popup.
5+
6+
7+
## Basic Usage
8+
9+
A standard date with a label.
10+
11+
<docs-demo-six-date-0></docs-demo-six-date-0>
12+
13+
```html
14+
<six-date label="Select a date"></six-date>
15+
```
16+
17+
18+
19+
## Setting a Value
20+
21+
Use the `value` attribute to set the date date's value.
22+
23+
<docs-demo-six-date-1></docs-demo-six-date-1>
24+
25+
```html
26+
<six-date label="Date with initial value" value="2025-01-15"></six-date>
27+
```
28+
29+
30+
31+
## Date Constraints
32+
33+
You can set minimum and maximum allowable dates using the `min` and `max` attributes.
34+
35+
<docs-demo-six-date-2></docs-demo-six-date-2>
36+
37+
```html
38+
<six-date label="Date with constraints" min="2025-01-01" max="2025-12-31" value="2025-01-15"></six-date>
39+
```
40+
41+
42+
Use the `allowedDates` property to specify which dates can be selected. Provide a function that receives an date string and returns a boolean indicating if the date is allowed.
43+
44+
<docs-demo-six-date-3></docs-demo-six-date-3>
45+
46+
```html
47+
<six-date id="allowed-dates-example" label="Only weekends allowed"></six-date>
48+
49+
<script type="module">
50+
const weekendOnlyDate = document.getElementById('allowed-dates-example');
51+
weekendOnlyDate.allowedDates = (isoDate) => {
52+
const day = new Date(isoDate).getDay();
53+
return day === 0 || day === 6; // Only allow Saturday (6) and Sunday (0)
54+
};
55+
</script>
56+
```
57+
58+
59+
60+
## Placeholder
61+
62+
Use the `placeholder` attribute to override the default placeholder.
63+
64+
<docs-demo-six-date-4></docs-demo-six-date-4>
65+
66+
```html
67+
<section>
68+
<six-date placeholder="Enter a date"></six-date>
69+
</section>
70+
```
71+
72+
73+
74+
## Clearable
75+
76+
Add the `clearable` attribute to show a clear button when the date it has a value.
77+
78+
<docs-demo-six-date-5></docs-demo-six-date-5>
79+
80+
```html
81+
<six-date label="Clearable date" clearable value="2025-01-15"></six-date>
82+
```
83+
84+
85+
86+
## Disabled
87+
88+
Add the `disabled` attribute to disable the date component.
89+
90+
<docs-demo-six-date-6></docs-demo-six-date-6>
91+
92+
```html
93+
<six-date label="Disabled date" disabled value="2025-01-15"></six-date>
94+
```
95+
96+
97+
98+
## Required
99+
100+
Add the `required` attribute to make it a required field.
101+
102+
<docs-demo-six-date-7></docs-demo-six-date-7>
103+
104+
```html
105+
<six-date label="Required date" required></six-date>
106+
```
107+
108+
109+
<docs-demo-six-date-8></docs-demo-six-date-8>
110+
111+
```html
112+
<six-date label="Name" help-text="Help text"></six-date>
113+
```
114+
115+
116+
117+
## Handling Events
118+
119+
Listen for the `change` event to detect when the user selects a date.
120+
121+
<docs-demo-six-date-9></docs-demo-six-date-9>
122+
123+
```html
124+
<div id="event-example-label">No Date selected yet!</div>
125+
<six-date id="event-example-picker" label="Select a date"></six-date>
126+
127+
<script type="module">
128+
const datepicker = document.getElementById('event-example-picker');
129+
const selectedDate = document.getElementById('event-example-label');
130+
131+
datepicker.addEventListener('change', (event) => {
132+
selectedDate.innerHTML = `Selected: ${event.target.value}`;
133+
});
134+
</script>
135+
```
136+
137+
138+
139+
## Custom Date Format
140+
141+
You can customize the date format using the `date-format` attribute. By default, the component uses the format `dd.MM.yyyy`.
142+
143+
Example with `d.M.yyyy` format (single-digit day and month):
144+
145+
<docs-demo-six-date-10></docs-demo-six-date-10>
146+
147+
```html
148+
<six-date label="Date with d.M.yyyy format" date-format="d.M.yyyy"></six-date>
149+
```
150+
151+
152+
153+
## Error Text and Help Text
154+
155+
The `help-text` `error-text`, `error-text-count`, and `invalid` properties and slots work the same as for the `six-input` component. For more details, refer to the [six-input documentation](six-input#help-text).
156+
157+
<docs-demo-six-date-11></docs-demo-six-date-11>
158+
159+
```html
160+
<six-date label="Date with help text" help-text="Select your preferred date"></six-date>
161+
<six-date label="Date with error text" error-text="The date entered is invalid" invalid></six-date>
162+
<six-date label="Invalid date example"
163+
error-text="You can only enter dates starting from 01/01/2025"
164+
min="2025-01-01"
165+
max="2025-12-31"
166+
invalid
167+
></six-date>
168+
<six-date label="Help text slot example">
169+
<div slot="help-text">This help text is rendered via the <strong>slot</strong>.</div>
170+
</six-date>
171+
<six-date label="Error text slot example" invalid>
172+
<div slot="error-text">This error text is rendered via the <strong>slot</strong>.</div>
173+
</six-date>
174+
```
175+
176+
177+
178+
<!-- Auto Generated Below -->
179+
180+
181+
## Properties
182+
183+
| Property | Attribute | Description | Type | Default |
184+
| ---------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------- |
185+
| `allowedDates` | -- | Callback to determine which dates in the picker should be selectable. | `` (date: `${number}${number}${number}${number}-${number}${number}-${number}${number}`) => boolean `` | `() => true` |
186+
| `clearable` | `clearable` | Set to true to add a clear button when the input is populated. | `boolean` | `false` |
187+
| `dateFormat` | `date-format` | Define the dateFormat. Defaults to "dd.MM.yyyy". Available patterns: - Year: "yyyy" (e.g., "2021") - Month: "MM" (e.g., "01" for January, "12" for December) - Day: "dd" (e.g., "08" for the 8th day of the month) | `string` | `'dd.MM.yyyy'` |
188+
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke. | `number` | `DEFAULT_DEBOUNCE_FAST` |
189+
| `disabled` | `disabled` | If `true` the component is disabled. | `boolean` | `false` |
190+
| `errorText` | `error-text` | The error message shown, if `invalid` is set to true. | `string \| string[]` | `''` |
191+
| `errorTextCount` | `error-text-count` | The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 | `number \| undefined` | `undefined` |
192+
| `helpText` | `help-text` | The input's help text. Alternatively, you can use the help-text slot. | `string` | `''` |
193+
| `invalid` | `invalid` | If this property is set to true and an error message is provided by `errorText`, the error message is displayed. | `boolean` | `false` |
194+
| `label` | `label` | The label text. | `string` | `''` |
195+
| `language` | `language` | The language used to render the weekdays and months. | `"de" \| "en" \| "es" \| "fr" \| "it"` | `'en'` |
196+
| `max` | `max` | The maximum date allowed.Value must be an iso-date string. | `` `${number}${number}${number}${number}-${number}${number}-${number}${number}` \| undefined `` | `undefined` |
197+
| `min` | `min` | The minimum date allowed. Value must be an iso-date string. | `` `${number}${number}${number}${number}-${number}${number}-${number}${number}` \| undefined `` | `undefined` |
198+
| `name` | `name` | The input's name attribute. | `string` | `''` |
199+
| `placeholder` | `placeholder` | The placeholder defines what text to be shown on the input element | `string \| undefined` | `undefined` |
200+
| `readonly` | `readonly` | If `true` the user can only select a date via the component in the popup, but not directly edit the input field. | `boolean` | `false` |
201+
| `required` | `required` | Set to true to show an asterisk beneath the label. | `boolean` | `false` |
202+
| `size` | `size` | Dates size. | `"large" \| "medium" \| "small"` | `'medium'` |
203+
| `value` | `value` | The value of the form field, which accepts a date object. | `` "" \| `${number}${number}${number}${number}-${number}${number}-${number}${number}` `` | `''` |
204+
205+
206+
## Events
207+
208+
| Event | Description | Type |
209+
| ----------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------- |
210+
| `sixBlur` | Emitted when the control loses focus. | `CustomEvent<any>` |
211+
| `sixChange` | Emitted when the control's value changes. | `CustomEvent<"" \| `${number}${number}${number}${number}-${number}${number}-${number}${number}`>` |
212+
213+
214+
## Methods
215+
216+
### `setFocus(options?: FocusOptions) => Promise<void>`
217+
218+
Sets focus on the input.
219+
220+
#### Parameters
221+
222+
| Name | Type | Description |
223+
| --------- | --------------------------- | ----------- |
224+
| `options` | `FocusOptions \| undefined` | |
225+
226+
#### Returns
227+
228+
Type: `Promise<void>`
229+
230+
231+
232+
233+
## Slots
234+
235+
| Slot | Description |
236+
| -------------- | ----------------------------------------------------------------------------------------------- |
237+
| `"error-text"` | Error text that is shown for validation errors. Alternatively, you can use the error-text prop. |
238+
239+
240+
## Dependencies
241+
242+
### Depends on
243+
244+
- [six-input](six-input.html)
245+
- [six-icon](six-icon.html)
246+
- [six-icon-button](six-icon-button.html)
247+
248+
### Graph
249+
```mermaid
250+
graph TD;
251+
six-date --> six-input
252+
six-date --> six-icon
253+
six-date --> six-icon-button
254+
six-input --> six-icon
255+
six-input --> six-error
256+
six-icon-button --> six-icon
257+
style six-date fill:#f9f,stroke:#333,stroke-width:4px
258+
```
259+
260+
----------------------------------------------
261+
262+
Copyright © 2021-present SIX-Group

‎docs/components/six-icon-button.md

+2
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,7 @@ Often icon buttons are combined with badges to signal new entries. For this simp
194194
### Used by
195195

196196
- [six-alert](six-alert.html)
197+
- [six-date](six-date.html)
197198
- [six-dialog](six-dialog.html)
198199
- [six-drawer](six-drawer.html)
199200
- [six-select](six-select.html)
@@ -211,6 +212,7 @@ Often icon buttons are combined with badges to signal new entries. For this simp
211212
graph TD;
212213
six-icon-button --> six-icon
213214
six-alert --> six-icon-button
215+
six-date --> six-icon-button
214216
six-dialog --> six-icon-button
215217
six-drawer --> six-icon-button
216218
six-select --> six-icon-button

‎docs/components/six-icon.md

+2
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,7 @@ Enter an icon label and press enter to display an icon:
271271
### Used by
272272

273273
- [six-avatar](six-avatar.html)
274+
- [six-date](six-date.html)
274275
- [six-datepicker](six-datepicker.html)
275276
- [six-details](six-details.html)
276277
- [six-dropdown](six-dropdown.html)
@@ -291,6 +292,7 @@ Enter an icon label and press enter to display an icon:
291292
```mermaid
292293
graph TD;
293294
six-avatar --> six-icon
295+
six-date --> six-icon
294296
six-datepicker --> six-icon
295297
six-details --> six-icon
296298
six-dropdown --> six-icon

‎docs/components/six-input.md

+2
Original file line numberDiff line numberDiff line change
@@ -477,6 +477,7 @@ Type: `Promise<void | undefined>`
477477

478478
### Used by
479479

480+
- [six-date](six-date.html)
480481
- [six-datepicker](six-datepicker.html)
481482
- [six-dropdown](six-dropdown.html)
482483
- [six-search-field](six-search-field.html)
@@ -493,6 +494,7 @@ Type: `Promise<void | undefined>`
493494
graph TD;
494495
six-input --> six-icon
495496
six-input --> six-error
497+
six-date --> six-input
496498
six-datepicker --> six-input
497499
six-dropdown --> six-input
498500
six-search-field --> six-input

‎docs/examples/docs-demo-six-date-0.vue

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<div>
3+
4+
<six-date label="Select a date"></six-date>
5+
6+
</div>
7+
</template>
8+
<style>
9+
10+
</style>
11+
<script>
12+
export default {
13+
name: 'docs-demo-six-date-0',
14+
mounted() { }
15+
}
16+
</script>

‎docs/examples/docs-demo-six-date-1.vue

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<div>
3+
4+
<six-date label="Date with initial value" value="2025-01-15"></six-date>
5+
6+
</div>
7+
</template>
8+
<style>
9+
10+
</style>
11+
<script>
12+
export default {
13+
name: 'docs-demo-six-date-1',
14+
mounted() { }
15+
}
16+
</script>

‎docs/examples/docs-demo-six-date-10.vue

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<div>
3+
4+
<six-date label="Date with d.M.yyyy format" date-format="d.M.yyyy"></six-date>
5+
6+
</div>
7+
</template>
8+
<style>
9+
10+
</style>
11+
<script>
12+
export default {
13+
name: 'docs-demo-six-date-10',
14+
mounted() { }
15+
}
16+
</script>

0 commit comments

Comments
 (0)