Skip to content

Commit 3f02d6e

Browse files
yevhenlisovenkoyevhenlisovenko
committed
Component "awes-io/form-builder" was updated to v1.5
1 parent d846c4d commit 3f02d6e

File tree

2 files changed

+45
-32
lines changed

2 files changed

+45
-32
lines changed

‎docs/components/form-builder/1.5/fb-date-range.md

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,14 @@ The component uses [Tiny Date Range Picker](https://github.com/chrisdavies/tiny-
4545
|---------------------|:------------------:|:-------------------:|---------------------------------------------------|
4646
| **name** | `String` | `undefined` | Field identifier in the data object |
4747
| **id** | `Number` | `undefined` | Sequence number within the <fb-multi-block> component |
48-
| **labelStart** | `String` | `'Start date'` | Text in the <label> element for 1st field |
49-
| **labelEnd** | `String` | `'End date'` | Text in the <label> element for 2nd field |
48+
| **label-start** | `String` | `'Start date'` | Text in the <label> element for 1st field |
49+
| **label-end** | `String` | `'End date'` | Text in the <label> element for 2nd field |
5050
| **min** | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Minimal selectable date |
5151
| **max** | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Maximal selectable date |
52-
| **yearRange** | `Number` | `4` | Max year offset back and forth from current day, if **min** or **max** is not provided |
53-
| **dayOffset** | `Number` | `1` | Set this to 0 for Sunday. 1 is for Monday |
54-
| **valueStart** | `String` | `undefined` | Selected start date |
55-
| **valueEnd** | `String` | `undefined` | Selected end date |
52+
| **year-range** | `Number` | `4` | Max year offset back and forth from current day, if **min** or **max** is not provided |
53+
| **day-offset** | `Number` | `1` | Set this to 0 for Sunday. 1 is for Monday |
54+
| **value-start** | `String` | `undefined` | Selected start date |
55+
| **value-end** | `String` | `undefined` | Selected end date |
5656
| **format** | `String` | 'MM/DD/YYYY' | Date format for input fields |
5757
| **disabled** | `Boolean` | `false` | Are the inputs disabled |
5858
| **lang** | `Object` | see [lang object](#date-lang-object) | Language strings for current instance. Will be merged with defaults |
@@ -65,16 +65,20 @@ The **value** property could only be a date in ISO String format
6565
## Usage examples
6666

6767
```html
68-
<!-- setting min and max dates -->
69-
<fb-date-range min="2019-05-09" max="2019-06-20" value-start="2019-05-15" value-end="2019-06-06"></fb-date-range>
68+
<form-builder url="http://httpbin.org/post" disabled-dialog>
69+
70+
<!-- setting min and max dates -->
71+
<fb-date-range name="range" min="2019-05-09" max="2019-06-20" value-start="2019-05-15" value-end="2019-06-06"></fb-date-range>
7072

71-
<!-- disabling inputs -->
72-
<fb-date-range min="2019-05-09" max="2019-06-20" disabled></fb-date-range>
73+
<!-- disabling inputs -->
74+
<fb-date-range name="range-disabled" min="2019-05-09" max="2019-06-20" disabled></fb-date-range>
75+
76+
</form-builder>
7377
```
7478
<div class="vue-example">
7579
<form-builder url="http://httpbin.org/post" disabled-dialog>
76-
<fb-date-range name="one" min="2019-05-09" max="2019-06-20" value-start="2019-05-15" value-end="2019-06-06"></fb-date-range>
77-
<fb-date-range name="two" min="2019-05-09" max="2019-06-20" disabled></fb-date-range>
80+
<fb-date-range name="range" min="2019-05-09" max="2019-06-20" value-start="2019-05-15" value-end="2019-06-06"></fb-date-range>
81+
<fb-date-range name="range-disabled" min="2019-05-09" max="2019-06-20" disabled></fb-date-range>
7882
</form-builder>
7983
</div>
8084

‎docs/components/form-builder/1.5/fb-date.md

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,10 @@ The component uses [Tiny Date Picker](https://github.com/chrisdavies/tiny-date-p
4848
| **label** | `String` | `''` | Text in the &lt;label&gt; element |
4949
| **min** | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Minimal selectable date |
5050
| **max** | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Maximal selectable date |
51-
| **yearRange** | `Number` | `4` | Max year offset back and forth from current day, if **min** or **max** is not provided |
52-
| **dayOffset** | `Number` | `1` | Set this to 0 for Sunday. 1 is for Monday |
51+
| **year-range** | `Number` | `4` | Max year offset back and forth from current day, if **min** or **max** is not provided |
52+
| **day-offset** | `Number` | `1` | Set this to 0 for Sunday. 1 is for Monday |
5353
| **value** | `String` | `undefined` | Selected date (only stringified Date object) |
54-
| **timeRange** | `Boolean`, `Object`| `true` | See [time range](#time-range-props) props |
54+
| **time-range** | `Boolean`, `Object`| `true` | See [time range](#time-range-props) props |
5555
| **format** | `String` | 'MM/DD/YYYY' or 'MM/DD/YYYY HH:mm' with time range | Date format for input field |
5656
| **disabled** | `Boolean`, `Array` | `false` | `Boolean` to disable whole field and `Array` of dates to disable specific date |
5757
| **lang** | `Object` | see [lang object](#date-lang-object) | Language strings for current instance. Will be merged with defaults |
@@ -81,40 +81,49 @@ To set time, it should be passed to the **value** prop of `fb-`
8181
Picking specific interval
8282

8383
```html
84-
<!-- setting min and max dates -->
85-
<fb-date label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20"></fb-date>
84+
<form-builder url="http://httpbin.org/post">
8685

87-
<!-- disabling specific dates -->
88-
<fb-date label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20" :disabled="['2019-05-22', '2019-05-23']"></fb-date>
86+
<!-- setting min and max dates -->
87+
<fb-date name="date-minmax" label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20"></fb-date>
88+
89+
<!-- disabling specific dates -->
90+
<fb-date name="date-disabled" label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20" :disabled="['2019-05-22', '2019-05-23']"></fb-date>
91+
92+
</form-builder>
8993
```
9094
<div class="vue-example">
9195
<form-builder url="http://httpbin.org/post" disabled-dialog>
92-
<fb-date label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20"></fb-date>
93-
<fb-date label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20" :disabled="['2019-05-22', '2019-05-23']"></fb-date>
96+
<fb-date name="date1" label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20"></fb-date>
97+
<fb-date name="date2" label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20" :disabled="['2019-05-22', '2019-05-23']"></fb-date>
9498
</form-builder>
9599
</div>
96100

97101
Configuring time range
98102

99103
```html
100-
<!-- not rendered entirely -->
101-
<fb-date label="No time" :time-range="false"></fb-date>
104+
<form-builder url="http://httpbin.org/post">
102105

103-
<!-- configuring time range -->
104-
<fb-date label="Configured time range" :time-range="{min: '09:00', max: '10:20', step: 10}"></fb-date>
106+
<!-- not rendered entirely -->
107+
<fb-date name="no-time" label="No time" :time-range="false"></fb-date>
105108

106-
<!-- setting specific time buttons to disabled state -->
107-
<fb-date label="Disabled time" :time-range="{ disabled: ['09:10', '10:00'] }"></fb-date>
109+
<!-- configuring time range -->
110+
<fb-date name="time-minmax" label="Configured time range" :time-range="{min: '09:00', max: '10:20', step: 10}"></fb-date>
108111

109-
<!-- setting time on current date (only stringified date is accepted) -->
110-
<fb-date label="Selected time" :value="new Date(new Date().setHours(9, 30)).toUTCString()" :time-range="{min: '08:00'}"></fb-date>
112+
<!-- setting specific time buttons to disabled state -->
113+
<fb-date name="time-disabled" label="Disabled time" :time-range="{ disabled: ['09:30', '10:00'] }"></fb-date>
114+
115+
<!-- setting time on current date (only stringified date is accepted) -->
116+
<fb-date name="time-selected" label="Selected time" :value="new Date(new Date().setHours(9, 30)).toUTCString()" :time-range="{min: '08:00'}"></fb-date>
117+
118+
</form-builder>
111119
```
112120

113121
<div class="vue-example">
114122
<form-builder url="http://httpbin.org/post" disabled-dialog>
115-
<fb-date label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20"></fb-date>
116-
<fb-date label="Configured time range" :time-range="{min: '09:00', max: '10:20', step: 10, value}"></fb-date>
117-
<fb-date label="Disabled time" :time-range="{ disabled: ['09:10', '10:00'] }"></fb-date>
123+
<fb-date name="no-time" label="No time" :time-range="false"></fb-date>
124+
<fb-date name="time-minmax" label="Configured time range" :time-range="{min: '09:00', max: '10:20', step: 10}"></fb-date>
125+
<fb-date name="time-disabled" label="Disabled time" :time-range="{ disabled: ['09:30', '10:00'] }"></fb-date>
126+
<fb-date name="time-selected" label="Selected time" :value="new Date(new Date().setHours(9, 30)).toUTCString()" :time-range="{min: '08:00'}"></fb-date>
118127
</form-builder>
119128
</div>
120129

0 commit comments

Comments
 (0)