Skip to content

Commit e1a9bd5

Browse files
ludmilanesvitiyvalorkin
ludmilanesvitiy
authored and
valorkin
committed
feat(docs): add use-cases for datepicker component (#4700)
1 parent 87e3751 commit e1a9bd5

20 files changed

+529
-0
lines changed

‎docs/spec/datepicker/datepicker.examples.basic.use-case.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
5.1: Datepicker basic example
2+
=============================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user basic Datepicker and Daterangepicker functionality
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Datepicker demo page
12+
2. User clicks on Basic sub-menu
13+
3. User see 2 inputs: Datepicker and Daterangepicker
14+
15+
###### Datepicker
16+
4. When user clicks on "Datepicker" input, bs-datepicker-container opened and no one date selected
17+
5. User see Datepicker container with 2 arrows: "‹" and "›"
18+
6. When user clicks on "‹" - previous month shown
19+
7. When user clicks on "›" - next month shown
20+
8. By default, Datepicker show current year and current month in head block
21+
9. When user clicks on month, then full table with 12 months shown with year in head block
22+
10. When user clicks on year, then table with 16 years shown with year interval in head block
23+
11. When user clicks on any date - then this date appeared in the input in format "mm/dd/yyyy"
24+
12. When user clicks on "Datepicker" input again, bs-datepicker-container opened and chosen date selected
25+
13. When user clears input and add there date in format "mm.dd.yyyy", click "Enter" - date converted to "mm/dd/yyyy"
26+
27+
###### Daterangepicker
28+
14. When user clicks on "Daterangepicker" input, bs-dateragdepicker-container opened and bs-datepicker-container closed
29+
15. By default, user see 2 bs-days-calendar-view blocks
30+
16. User see Daterangepicker container with 2 arrows: "‹" and "›"
31+
17. When user clicks on "‹" - shown interval, which started from previous month
32+
18. When user clicks on "›" - shown interval, which started from next month
33+
19. By default, Daterangepicker show interval from current month, year and next month, year in head block
34+
20. When user clicks on month, then 2 tables with 12 months in each shown with years(current and next) in head block
35+
21. When user clicks on year, then 2 tables with 16 years in each shown with year interval in head block
36+
22. When user clicks on any date - then this date selected
37+
23. When user click on the later date, then this interval appeared in the input in format "mm/dd/yyyy" - "mm/dd/yyyy"
38+
24. When user clicks on "Daterangepicker" input again, bs-dateragdepicker-container opened and chosen date interval selected
39+
25. When user clears input and add there date interval in format "mm.dd.yyyy" - "mm.dd.yyyy", click "Enter" - interval converted to "mm/dd/yyyy" - "mm/dd/yyyy"
40+
41+
Variations:
42+
-----------
43+
2*. User scroll to Basic sub-menu
44+
45+
Extentions:
46+
-----------
47+
###### Datepicker
48+
9a. When user clicks on "‹" button - previous year in head block shown
49+
9b. When user clicks on "›" button - next year in head block shown
50+
9c. When user clicks on any month - then this month shown in head block and table with dates shown
51+
52+
10a. When user clicks on "‹" button - interval with previous 16 years shown
53+
10b. When user clicks on "›" button - interval with next 16 years shown
54+
10c. When user clicks on any year - then this year shown in head block and table with 12 months shown
55+
10d. When user clicks on any month - then this month and year shown in head block and table with dates shown
56+
57+
13a. When user clears input and add there date in bad format, click "Enter" - "Invalid date" shown
58+
13b. When user clears input and add there date in format "mmddyyyy", click "Enter" - date converted to "mm/dd/yyyy"
59+
60+
###### Daterangepicker
61+
14a. If "Datepicker" closed, when user clicks on "Daterangepicker" input, bs-dateragdepicker-container opened
62+
63+
20a. When user clicks on "‹" button - interval, which started from previous year in head block shown
64+
20b. When user clicks on "›" button - interval, which started from next year in head block shown
65+
20c. When user clicks on any month - then tables with dates shown and in head block shown interval, which start from chosen month
66+
67+
21a. When user clicks on "‹" button - interval with previous 16 years shown in each table
68+
21b. When user clicks on "›" button - interval with next 16 years shown in each table
69+
21c. When user clicks on any year from the left table - then this year shown in head block and tables with 12 months in each shown //TODO should work with right table also
70+
21d. When user clicks on any month from the left table - then this month and year shown in head block and tables with dates in each shown //TODO should work with right table also
71+
72+
25a. When user clears input and add there date interval in bad format, click "Enter" - nothing happens
73+
25b. When user clears input and add there date interval in format "mmddyyyy" - "mmddyyyy", click "Enter" - date converted to "mm/dd/yyyy" - "mm/dd/yyyy"

‎docs/spec/datepicker/datepicker.examples.config-method.use-case.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
5.13: Datepicker Config method example
2+
======================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user how to manage options of Datepicker
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Datepicker demo page
12+
2. User clicks on Config method sub-menu
13+
3. User see Datepicker input and clickable button "Set min date"
14+
4. When user clicks on Datepicker input, bs-datepicker-container opens
15+
5. User able to click on any date, even any date from May 2018
16+
6. When user clicks on 15 may 2018 - then this date appear in the input
17+
7. When user clicks on "Set min date" button, then bs-datepicker-container opens and user should see June 2018 calendar
18+
8. When user try to click on any date before 13 of June 2018, nothing happens
19+
9. When user try to click on any date after 13 of June 2018 - then this date chosen and appear in the input
20+
21+
Variations:
22+
-----------
23+
2*. User scroll to Config method sub-menu

‎docs/spec/datepicker/datepicker.examples.config-properties.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
5.16: Datepicker Config properties example
2+
==========================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example how to configure datepicker with bsConfig
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Datepicker demo page
12+
2. User clicks on Config properties sub-menu
13+
3. User see Datepicker input
14+
4. Template src should contain bsConfig parameter with dateInputFormat: "DD-MM-YYYY" and containerClass: "theme-red"
15+
5. When user clicks on Datepicker input, bs-datepicker-container opens in style "theme-red"
16+
6. When user chose any date, then bs-datepicker-container disappeared and date is shown in the input in format "DD-MM-YYYY"
17+
18+
Variations:
19+
-----------
20+
2*. User scroll to Config properties sub-menu

‎docs/spec/datepicker/datepicker.examples.custom-date-format.use-case.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
5.3: Datepicker Custom date format example
2+
==========================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user Datepicker with custom format of date
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Datepicker demo page
12+
2. User clicks on Custom date format sub-menu
13+
3. User see 3 inputs for Datepicker
14+
4. User see 3 clickable buttons of "Date Picker" //TODO component should not set minDate and maxDate, this is in another demo
15+
5. By default, value in inputs is current day in different formats: "YYYY-MM-DD", "MM/DD/YYYY", "MMMM Do YYYY,h:mm:ss a"
16+
6. When user click on the first "Date Picker" button and chose any other date - that date chosen and appear in the input with format "YYYY-MM-DD"
17+
7. When user click on the second "Date Picker" button and chose any other date - that date chosen and appear in the input with format "MM/DD/YYYY"
18+
8. When user click on the third "Date Picker" button and chose any other date - that date chosen and appear in the input with format "MMMM Do YYYY,h:mm:ss a"
19+
20+
Variations:
21+
-----------
22+
2*. User scroll to Custom date format sub-menu

‎docs/spec/datepicker/datepicker.examples.custom-trigger.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
5.19: Datepicker Custom triggers example
2+
========================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example how to use different triggers in datepicker
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Datepicker demo page
12+
2. User clicks on Custom triggers sub-menu
13+
3. User see 1 Datepicker input and 2 DateRangepicker inputs
14+
4. When user move mouse to the first Datepicker input, then bs-datepicker-container opens
15+
5. When user chose any date, then this date appear in the first input field in format "mm/dd/yyyy"
16+
6. When user click in the first DateRangepicker input, it's activated and bs-daterangepicker-container not shown
17+
7. When user press any key, then bs-daterangepicker-container shown and user can chose any interval
18+
8. When user chose interval, then bs-daterangepicker-container disappeared and this interval shown in appropriate input in format "mm/dd/yyyy" - "mm/dd/yyyy"
19+
9. When user click in the second DateRangepicker input, it's activated and bs-daterangepicker-container not shown
20+
10. When user press any key, then bs-daterangepicker-container still not shown
21+
11. When user click twice on input, then bs-daterangepicker-container shown and user can chose any interval
22+
12. When user chose interval, then bs-daterangepicker-container disappeared and this interval shown in appropriate input in format "mm/dd/yyyy" - "mm/dd/yyyy"
23+
24+
Variations:
25+
-----------
26+
2*. User scroll to Custom triggers sub-menu

‎docs/spec/datepicker/datepicker.examples.disabled.use-case.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
5.8: Datepicker Disabled example
2+
================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user how to disable content in Datepicker and Daterangepicker
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Datepicker demo page
12+
2. User clicks on Disabled sub-menu
13+
3. User see 2 inputs: Datepicker and Daterangepicker and button "Toggle disabling"
14+
15+
###### Datepicker
16+
4. When user clicks on Datepicker input, then bs-datepicker-container opened and user can chose any date
17+
5. When user clicks on any date, then this date chosen and shown in the input field in format "mm/dd/yyyy"
18+
6. When user clicks on "Toggle disabling" and then clicks on Datepicker input, then user unable to chose any date
19+
7. When user clicks on any date, month or year - nothing happens //TODO in current implementation user can click on Month and Year, it's not necessary
20+
8. When user clicks on "Toggle disabling" again and then clicks on Datepicker input, then user able to chose another date
21+
9. When user clicks on any date, then this date chosen and shown in the input field in format "mm/dd/yyyy"
22+
23+
###### Daterangepicker
24+
10. When user clicks on Daterangepicker input, then bs-daterangepicker-container opened and user can chose any date
25+
11. When user chose any interval, then this interval chosen and shown in the input field in format "mm/dd/yyyy" - "mm/dd/yyyy"
26+
12. When user clicks on "Toggle disabling" and then clicks on Daterangepicker input, then user unable to chose any date
27+
13. When user clicks on any date, month or year - nothing happens //TODO in current implementation user can click on Month and Year, it's not necessary
28+
14. When user clicks on "Toggle disabling" again and then clicks on Daterangepicker input, then user able to chose another interval
29+
15. When user chose any other interval, then this interval chosen and shown in the input field in format "mm/dd/yyyy" - "mm/dd/yyyy"
30+
31+
Variations:
32+
-----------
33+
2*. User scroll to Disabled sub-menu

‎docs/spec/datepicker/datepicker.examples.forms.use-case.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
5.9: Datepicker Forms example
2+
=============================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user how to use Datepicker and Daterangepicker in forms
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Datepicker demo page
12+
2. User clicks on Forms sub-menu
13+
3. User see 2 inputs: Datepicker and Daterangepicker and preview block, empty by default
14+
4. When user chose any date from Datepicker, then in preview block date is shown in default JS format (full text string format)
15+
5. When user chose any interval from Daterangepicker, then in preview block interval is shown in default JS format (full text string format)
16+
17+
18+
Variations:
19+
-----------
20+
2*. User scroll to Forms sub-menu

‎docs/spec/datepicker/datepicker.examples.hide-on-scroll.use-case.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
5.4: Datepicker Hide on scroll example
2+
======================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user how to hide Datepicker on scroll
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Datepicker demo page
12+
2. User clicks on Hide on scroll sub-menu
13+
3. User see Datepicker input and "Date Picker" button
14+
4. When user clicks on "Date Picker" button, bs-datepicker-container opened without any selected date
15+
5. When user start to scroll, bs-datepicker-container dissapeared
16+
6. When user clicks on "Date Picker" button again, select any date, then this date appear in the input field
17+
7. When user clicks on "Date Picker" button again and start to scroll, then bs-datepicker-container dissapeared and date stay as from previous step
18+
19+
Variations:
20+
-----------
21+
2*. User scroll to Hide on scroll sub-menu

‎docs/spec/datepicker/datepicker.examples.initial-state.use-case.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
5.2: Datepicker Initial state example
2+
=====================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user Datepicker and Daterangepicker with initial state
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Datepicker demo page
12+
2. User clicks on Initial state sub-menu
13+
3. User see 2 inputs: Datepicker and Daterangepicker
14+
4. User see 2 clickable buttons: "Date Picker" and "Date Range Picker"
15+
5. By default, value in Datepicker input is current day
16+
6. By default, value in Daterangepicker input is interval from current day to current + 7 days
17+
7. When user clicks on "Date Picker" button, bs-datepicker-container opened and current date selected
18+
8. When user clicks on other date, that date selected and shown in input
19+
9. When user clicks on "Date Range Picker" button, bs-dateragdepicker-container opened and appropriate interval selected
20+
10. When user chose another interval, that interval selected and shown in input
21+
22+
Variations:
23+
-----------
24+
2*. User scroll to Initial state sub-menu

‎docs/spec/datepicker/datepicker.examples.locales.use-case.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
5.6: Datepicker Locales example
2+
===============================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user how to use different locales in Datepicker and Daterangepicker
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Datepicker demo page
12+
2. User clicks on Locales sub-menu
13+
3. User see 2 select fileds (with "en" by default), Datepicker and Daterangepicker and appropriate buttons
14+
4. When user clicks on "Date Picker" button, bs-datepicker-container opened with all info in English (month, days)
15+
5. When user chose other locale "N" for "Datepicker", bs-datepicker-container shown with all info in appropriate language
16+
6. When user clicks on "Date Range Picker" button, bs-daterangepicker-container opened with all info in English (month, days)
17+
7. When user chose other locale "N" for "Daterangepicker", bs-daterangepicker-container shown with all info in appropriate language
18+
8. When user back to "en" - then all selects changed to "en"
19+
20+
21+
Variations:
22+
-----------
23+
2*. User scroll to Locales sub-menu

0 commit comments

Comments
 (0)