Skip to content

Commit 9972d5c

Browse files
hcourdenthcourdent
authored
Date and Date & Time input docs (windmill-labs#576)
* Date and Date & Time input docs
1 parent 46615e0 commit 9972d5c

File tree

9 files changed

+131
-4
lines changed

9 files changed

+131
-4
lines changed

‎docs/apps/4_app_configuration_settings/1_app_component_library.mdx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,14 @@ This app component allows you to create a decision tree controlled by a flow-lik
234234

235235
![Date Input API](../../assets/apps/4_app_component_library/date-input.png.webp)
236236

237+
### [Time](./time_input.mdx)
238+
239+
![Time Input](../../assets/apps/4_app_component_library/time_input.png "Time Input")
240+
241+
### [Date & Time](./datetime_input.mdx)
242+
243+
![Date & Time Input](../../assets/apps/4_app_component_library/date_time_input.png "Date & Time Input")
244+
237245
### [File Input](./file_input.mdx)
238246

239247
![File Input API](../../assets/apps/4_app_component_library/file_input.png.webp)

‎docs/apps/4_app_configuration_settings/datetime_input.mdx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import DocCard from '@site/src/components/DocCard';
2+
3+
# Date & Time Input
4+
5+
The Date & Time Input component allows the user to fill in a date and time.
6+
7+
![Date & Time Input](../../assets/apps/4_app_component_library/date_time_input.png "Date & Time Input")
8+
9+
The following section details Date & Time Input component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
10+
11+
<div className="grid grid-cols-2 gap-6 mb-4">
12+
<DocCard
13+
color="orange"
14+
title="App Editor Documentation"
15+
description="The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code."
16+
href="/docs/apps/app_editor"
17+
/>
18+
<DocCard
19+
color="orange"
20+
title="Apps Quickstart"
21+
description="Learn how to build your first app in a matter of minutes."
22+
href="/docs/getting_started/apps_quickstart"
23+
/>
24+
</div>
25+
26+
## Controls
27+
28+
This component can be controlled by [frontend scripts](../3_app-runnable-panel.mdx#frontend-scripts) using these functions:
29+
30+
**setValue**
31+
32+
The [setValue](../3_app-runnable-panel.mdx#setvalue) function is meant to set or force the value of a component. This can be convenient in cases where connection is not the easiest pattern. Note that it's a bad idea to mix dynamic default value and setValue together.
33+
34+
`setValue(id: string, value: any)`
35+
36+
<div className="grid grid-cols-2 gap-6 mb-4">
37+
<DocCard
38+
color="orange"
39+
title="Runnable Editor"
40+
description="Learn how to create and configure runnables."
41+
href="/docs/apps/app-runnable-panel"
42+
/>
43+
</div>
44+
45+
## Date & Time Input configuration
46+
47+
| Name | Type | Connectable | Templatable | Default | Description |
48+
| ------------- | :----: | :---------: | :---------: | :-----: | ------------------------------------ |
49+
| Min Date Time | string | true | false | | The minimum date and time that can be selected. The format is the ISO 8601 format: "yyyy-MM-ddTHH:mm:ss:SSSZ", for example "2021-11-06T23:39:30.000Z", or toISOString() from a Date |
50+
| Max Date Time | string | true | false | | The maximum date and time that can be selected. The format is the ISO 8601 format: "yyyy-MM-ddTHH:mm:ss:SSSZ", for example "2021-11-06T23:39:30.000Z", or toISOString() from a Date |
51+
| Output Format | string | true | false | | The output format of the Date and time component. See [date-fns format](https://date-fns.org/) for more information. |
52+
| Default Value | string | true | false | dd.MM.yyyy HH:mm | The default value of the date and time input. |
53+
54+
## Outputs
55+
56+
| Name | Type | Description |
57+
| ------ | :----: | --------------------- |
58+
| result | string | The date & time input value. |
59+
| validity | boolean | Whether the date and time are valid. |

‎docs/apps/4_app_configuration_settings/form_input.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ Fields are called property, they can be added as eval or [connected to other com
3535

3636
## Controls
3737

38-
This component can be controlled by frontend scripts using these functions:
38+
This component can be controlled by [frontend scripts](../3_app-runnable-panel.mdx#frontend-scripts) using these functions:
3939

4040
**setValue**
4141

‎docs/apps/4_app_configuration_settings/modal_form.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ The following section details Modal Form component's specific settings. For more
3434

3535
## Controls
3636

37-
This component can be controlled by frontend scripts using these functions:
37+
This component can be controlled by [frontend scripts](../3_app-runnable-panel.mdx#frontend-scripts) using these functions:
3838

3939
**setValue**
4040

‎docs/apps/4_app_configuration_settings/submit_form.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ The following section details Submit Form component's specific settings. For mor
3939

4040
## Controls
4141

42-
This component can be controlled by frontend scripts using these functions:
42+
This component can be controlled by [frontend scripts](../3_app-runnable-panel.mdx#frontend-scripts) using these functions:
4343

4444
**setValue**
4545

‎docs/apps/4_app_configuration_settings/time_input.mdx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import DocCard from '@site/src/components/DocCard';
2+
3+
# Time Input
4+
5+
The Time Input component allows the user to fill in a time.
6+
7+
![Time Input](../../assets/apps/4_app_component_library/time_input.png "Time Input")
8+
9+
The following section details Time Input component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
10+
11+
<div className="grid grid-cols-2 gap-6 mb-4">
12+
<DocCard
13+
color="orange"
14+
title="App Editor Documentation"
15+
description="The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code."
16+
href="/docs/apps/app_editor"
17+
/>
18+
<DocCard
19+
color="orange"
20+
title="Apps Quickstart"
21+
description="Learn how to build your first app in a matter of minutes."
22+
href="/docs/getting_started/apps_quickstart"
23+
/>
24+
</div>
25+
26+
## Controls
27+
28+
This component can be controlled by [frontend scripts](../3_app-runnable-panel.mdx#frontend-scripts) using these functions:
29+
30+
**setValue**
31+
32+
The [setValue](../3_app-runnable-panel.mdx#setvalue) function is meant to set or force the value of a component. This can be convenient in cases where connection is not the easiest pattern. Note that it's a bad idea to mix dynamic default value and setValue together.
33+
34+
`setValue(id: string, value: any)`
35+
36+
<div className="grid grid-cols-2 gap-6 mb-4">
37+
<DocCard
38+
color="orange"
39+
title="Runnable Editor"
40+
description="Learn how to create and configure runnables."
41+
href="/docs/apps/app-runnable-panel"
42+
/>
43+
</div>
44+
45+
## Time Input configuration
46+
47+
| Name | Type | Connectable | Templatable | Default | Description |
48+
| ------------- | :----: | :---------: | :---------: | :-----: | ------------------------------------ |
49+
| Min Time | string | true | false | | The minimum time that can be selected. If the time provided is not valid, it will set the output "validity" to false. The format is: "HH:mm". |
50+
| Max Time | string | true | false | | The maximum time that can be selected. If the time provided is not valid, it will set the output "validity" to false. The format is: "HH:mm". |
51+
| Default Value | string | true | false | | The default value of the time input. |
52+
| 24h Format | boolean | true | false | true | Use 24h format. Will change the format of the output of the component: HH:mm to hh:mm am/pm |
53+
54+
## Outputs
55+
56+
| Name | Type | Description |
57+
| ------ | :----: | --------------------- |
58+
| result | string | The date input value. |
59+
| validity | boolean | Whether the time is valid. |

‎docs/assets/apps/4_app_component_library/date_time_input.png

25.1 KB
Loading

‎docs/assets/apps/4_app_component_library/time_input.png

106 KB
Loading

‎package-lock.json

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)