From cd8b6dfa84c5c99ccaf68e29307dba19df447b39 Mon Sep 17 00:00:00 2001 From: Ludmila Nesvitiy Date: Fri, 16 Nov 2018 02:06:17 +0200 Subject: [PATCH] feat(docs): add use-cases for datepicker component (#4700) --- .../datepicker.examples.basic.use-case.md | 73 +++++++++++++++++++ ...epicker.examples.config-method.use-case.md | 23 ++++++ .../datepicker.examples.config-properties.md | 20 +++++ ...er.examples.custom-date-format.use-case.md | 22 ++++++ .../datepicker.examples.custom-trigger.md | 26 +++++++ .../datepicker.examples.disabled.use-case.md | 33 +++++++++ .../datepicker.examples.forms.use-case.md | 20 +++++ ...picker.examples.hide-on-scroll.use-case.md | 21 ++++++ ...epicker.examples.initial-state.use-case.md | 24 ++++++ .../datepicker.examples.locales.use-case.md | 23 ++++++ ...picker.examples.manual-trigger.use-case.md | 23 ++++++ .../datepicker.examples.min-max.use-case.md | 23 ++++++ .../datepicker.examples.outside-click.md | 22 ++++++ .../datepicker.examples.placement.use-case.md | 25 +++++++ ...picker.examples.reactive-forms.use-case.md | 23 ++++++ .../datepicker.examples.themes.use-case.md | 24 ++++++ .../datepicker.examples.trigger-by-isopen.md | 21 ++++++ ...er.examples.value-change-event.use-case.md | 21 ++++++ ...ker.examples.visibility-events.use-case.md | 20 +++++ docs/spec/index.md | 42 +++++++++++ 20 files changed, 529 insertions(+) create mode 100644 docs/spec/datepicker/datepicker.examples.basic.use-case.md create mode 100644 docs/spec/datepicker/datepicker.examples.config-method.use-case.md create mode 100644 docs/spec/datepicker/datepicker.examples.config-properties.md create mode 100644 docs/spec/datepicker/datepicker.examples.custom-date-format.use-case.md create mode 100644 docs/spec/datepicker/datepicker.examples.custom-trigger.md create mode 100644 docs/spec/datepicker/datepicker.examples.disabled.use-case.md create mode 100644 docs/spec/datepicker/datepicker.examples.forms.use-case.md create mode 100644 docs/spec/datepicker/datepicker.examples.hide-on-scroll.use-case.md create mode 100644 docs/spec/datepicker/datepicker.examples.initial-state.use-case.md create mode 100644 docs/spec/datepicker/datepicker.examples.locales.use-case.md create mode 100644 docs/spec/datepicker/datepicker.examples.manual-trigger.use-case.md create mode 100644 docs/spec/datepicker/datepicker.examples.min-max.use-case.md create mode 100644 docs/spec/datepicker/datepicker.examples.outside-click.md create mode 100644 docs/spec/datepicker/datepicker.examples.placement.use-case.md create mode 100644 docs/spec/datepicker/datepicker.examples.reactive-forms.use-case.md create mode 100644 docs/spec/datepicker/datepicker.examples.themes.use-case.md create mode 100644 docs/spec/datepicker/datepicker.examples.trigger-by-isopen.md create mode 100644 docs/spec/datepicker/datepicker.examples.value-change-event.use-case.md create mode 100644 docs/spec/datepicker/datepicker.examples.visibility-events.use-case.md diff --git a/docs/spec/datepicker/datepicker.examples.basic.use-case.md b/docs/spec/datepicker/datepicker.examples.basic.use-case.md new file mode 100644 index 0000000000..598b732292 --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.basic.use-case.md @@ -0,0 +1,73 @@ +5.1: Datepicker basic example +============================= +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user basic Datepicker and Daterangepicker functionality + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Basic sub-menu +3. User see 2 inputs: Datepicker and Daterangepicker + +###### Datepicker +4. When user clicks on "Datepicker" input, bs-datepicker-container opened and no one date selected +5. User see Datepicker container with 2 arrows: "‹" and "›" +6. When user clicks on "‹" - previous month shown +7. When user clicks on "›" - next month shown +8. By default, Datepicker show current year and current month in head block +9. When user clicks on month, then full table with 12 months shown with year in head block +10. When user clicks on year, then table with 16 years shown with year interval in head block +11. When user clicks on any date - then this date appeared in the input in format "mm/dd/yyyy" +12. When user clicks on "Datepicker" input again, bs-datepicker-container opened and chosen date selected +13. When user clears input and add there date in format "mm.dd.yyyy", click "Enter" - date converted to "mm/dd/yyyy" + +###### Daterangepicker +14. When user clicks on "Daterangepicker" input, bs-dateragdepicker-container opened and bs-datepicker-container closed +15. By default, user see 2 bs-days-calendar-view blocks +16. User see Daterangepicker container with 2 arrows: "‹" and "›" +17. When user clicks on "‹" - shown interval, which started from previous month +18. When user clicks on "›" - shown interval, which started from next month +19. By default, Daterangepicker show interval from current month, year and next month, year in head block +20. When user clicks on month, then 2 tables with 12 months in each shown with years(current and next) in head block +21. When user clicks on year, then 2 tables with 16 years in each shown with year interval in head block +22. When user clicks on any date - then this date selected +23. When user click on the later date, then this interval appeared in the input in format "mm/dd/yyyy" - "mm/dd/yyyy" +24. When user clicks on "Daterangepicker" input again, bs-dateragdepicker-container opened and chosen date interval selected +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" + +Variations: +----------- +2*. User scroll to Basic sub-menu + +Extentions: +----------- +###### Datepicker +9a. When user clicks on "‹" button - previous year in head block shown +9b. When user clicks on "›" button - next year in head block shown +9c. When user clicks on any month - then this month shown in head block and table with dates shown + +10a. When user clicks on "‹" button - interval with previous 16 years shown +10b. When user clicks on "›" button - interval with next 16 years shown +10c. When user clicks on any year - then this year shown in head block and table with 12 months shown +10d. When user clicks on any month - then this month and year shown in head block and table with dates shown + +13a. When user clears input and add there date in bad format, click "Enter" - "Invalid date" shown +13b. When user clears input and add there date in format "mmddyyyy", click "Enter" - date converted to "mm/dd/yyyy" + +###### Daterangepicker +14a. If "Datepicker" closed, when user clicks on "Daterangepicker" input, bs-dateragdepicker-container opened + +20a. When user clicks on "‹" button - interval, which started from previous year in head block shown +20b. When user clicks on "›" button - interval, which started from next year in head block shown +20c. When user clicks on any month - then tables with dates shown and in head block shown interval, which start from chosen month + +21a. When user clicks on "‹" button - interval with previous 16 years shown in each table +21b. When user clicks on "›" button - interval with next 16 years shown in each table +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 +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 + +25a. When user clears input and add there date interval in bad format, click "Enter" - nothing happens +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" diff --git a/docs/spec/datepicker/datepicker.examples.config-method.use-case.md b/docs/spec/datepicker/datepicker.examples.config-method.use-case.md new file mode 100644 index 0000000000..4e67c1a4e0 --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.config-method.use-case.md @@ -0,0 +1,23 @@ +5.13: Datepicker Config method example +====================================== +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user how to manage options of Datepicker + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Config method sub-menu +3. User see Datepicker input and clickable button "Set min date" +4. When user clicks on Datepicker input, bs-datepicker-container opens +5. User able to click on any date, even any date from May 2018 +6. When user clicks on 15 may 2018 - then this date appear in the input +7. When user clicks on "Set min date" button, then bs-datepicker-container opens and user should see June 2018 calendar +8. When user try to click on any date before 13 of June 2018, nothing happens +9. When user try to click on any date after 13 of June 2018 - then this date chosen and appear in the input + +Variations: +----------- +2*. User scroll to Config method sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.config-properties.md b/docs/spec/datepicker/datepicker.examples.config-properties.md new file mode 100644 index 0000000000..3c77c0c4c2 --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.config-properties.md @@ -0,0 +1,20 @@ +5.16: Datepicker Config properties example +========================================== +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user example how to configure datepicker with bsConfig + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Config properties sub-menu +3. User see Datepicker input +4. Template src should contain bsConfig parameter with dateInputFormat: "DD-MM-YYYY" and containerClass: "theme-red" +5. When user clicks on Datepicker input, bs-datepicker-container opens in style "theme-red" +6. When user chose any date, then bs-datepicker-container disappeared and date is shown in the input in format "DD-MM-YYYY" + +Variations: +----------- +2*. User scroll to Config properties sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.custom-date-format.use-case.md b/docs/spec/datepicker/datepicker.examples.custom-date-format.use-case.md new file mode 100644 index 0000000000..06e85ce811 --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.custom-date-format.use-case.md @@ -0,0 +1,22 @@ +5.3: Datepicker Custom date format example +========================================== +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user Datepicker with custom format of date + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Custom date format sub-menu +3. User see 3 inputs for Datepicker +4. User see 3 clickable buttons of "Date Picker" //TODO component should not set minDate and maxDate, this is in another demo +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" +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" +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" +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" + +Variations: +----------- +2*. User scroll to Custom date format sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.custom-trigger.md b/docs/spec/datepicker/datepicker.examples.custom-trigger.md new file mode 100644 index 0000000000..616e2eed50 --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.custom-trigger.md @@ -0,0 +1,26 @@ +5.19: Datepicker Custom triggers example +======================================== +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user example how to use different triggers in datepicker + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Custom triggers sub-menu +3. User see 1 Datepicker input and 2 DateRangepicker inputs +4. When user move mouse to the first Datepicker input, then bs-datepicker-container opens +5. When user chose any date, then this date appear in the first input field in format "mm/dd/yyyy" +6. When user click in the first DateRangepicker input, it's activated and bs-daterangepicker-container not shown +7. When user press any key, then bs-daterangepicker-container shown and user can chose any interval +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" +9. When user click in the second DateRangepicker input, it's activated and bs-daterangepicker-container not shown +10. When user press any key, then bs-daterangepicker-container still not shown +11. When user click twice on input, then bs-daterangepicker-container shown and user can chose any interval +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" + +Variations: +----------- +2*. User scroll to Custom triggers sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.disabled.use-case.md b/docs/spec/datepicker/datepicker.examples.disabled.use-case.md new file mode 100644 index 0000000000..b314fb7149 --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.disabled.use-case.md @@ -0,0 +1,33 @@ +5.8: Datepicker Disabled example +================================ +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user how to disable content in Datepicker and Daterangepicker + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Disabled sub-menu +3. User see 2 inputs: Datepicker and Daterangepicker and button "Toggle disabling" + +###### Datepicker +4. When user clicks on Datepicker input, then bs-datepicker-container opened and user can chose any date +5. When user clicks on any date, then this date chosen and shown in the input field in format "mm/dd/yyyy" +6. When user clicks on "Toggle disabling" and then clicks on Datepicker input, then user unable to chose any date +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 +8. When user clicks on "Toggle disabling" again and then clicks on Datepicker input, then user able to chose another date +9. When user clicks on any date, then this date chosen and shown in the input field in format "mm/dd/yyyy" + +###### Daterangepicker +10. When user clicks on Daterangepicker input, then bs-daterangepicker-container opened and user can chose any date +11. When user chose any interval, then this interval chosen and shown in the input field in format "mm/dd/yyyy" - "mm/dd/yyyy" +12. When user clicks on "Toggle disabling" and then clicks on Daterangepicker input, then user unable to chose any date +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 +14. When user clicks on "Toggle disabling" again and then clicks on Daterangepicker input, then user able to chose another interval +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" + +Variations: +----------- +2*. User scroll to Disabled sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.forms.use-case.md b/docs/spec/datepicker/datepicker.examples.forms.use-case.md new file mode 100644 index 0000000000..664b8c5d3f --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.forms.use-case.md @@ -0,0 +1,20 @@ +5.9: Datepicker Forms example +============================= +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user how to use Datepicker and Daterangepicker in forms + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Forms sub-menu +3. User see 2 inputs: Datepicker and Daterangepicker and preview block, empty by default +4. When user chose any date from Datepicker, then in preview block date is shown in default JS format (full text string format) +5. When user chose any interval from Daterangepicker, then in preview block interval is shown in default JS format (full text string format) + + +Variations: +----------- +2*. User scroll to Forms sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.hide-on-scroll.use-case.md b/docs/spec/datepicker/datepicker.examples.hide-on-scroll.use-case.md new file mode 100644 index 0000000000..6b8c946b66 --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.hide-on-scroll.use-case.md @@ -0,0 +1,21 @@ +5.4: Datepicker Hide on scroll example +====================================== +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user how to hide Datepicker on scroll + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Hide on scroll sub-menu +3. User see Datepicker input and "Date Picker" button +4. When user clicks on "Date Picker" button, bs-datepicker-container opened without any selected date +5. When user start to scroll, bs-datepicker-container dissapeared +6. When user clicks on "Date Picker" button again, select any date, then this date appear in the input field +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 + +Variations: +----------- +2*. User scroll to Hide on scroll sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.initial-state.use-case.md b/docs/spec/datepicker/datepicker.examples.initial-state.use-case.md new file mode 100644 index 0000000000..f81f8616fa --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.initial-state.use-case.md @@ -0,0 +1,24 @@ +5.2: Datepicker Initial state example +===================================== +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user Datepicker and Daterangepicker with initial state + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Initial state sub-menu +3. User see 2 inputs: Datepicker and Daterangepicker +4. User see 2 clickable buttons: "Date Picker" and "Date Range Picker" +5. By default, value in Datepicker input is current day +6. By default, value in Daterangepicker input is interval from current day to current + 7 days +7. When user clicks on "Date Picker" button, bs-datepicker-container opened and current date selected +8. When user clicks on other date, that date selected and shown in input +9. When user clicks on "Date Range Picker" button, bs-dateragdepicker-container opened and appropriate interval selected +10. When user chose another interval, that interval selected and shown in input + +Variations: +----------- +2*. User scroll to Initial state sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.locales.use-case.md b/docs/spec/datepicker/datepicker.examples.locales.use-case.md new file mode 100644 index 0000000000..b3224fb49d --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.locales.use-case.md @@ -0,0 +1,23 @@ +5.6: Datepicker Locales example +=============================== +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user how to use different locales in Datepicker and Daterangepicker + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Locales sub-menu +3. User see 2 select fileds (with "en" by default), Datepicker and Daterangepicker and appropriate buttons +4. When user clicks on "Date Picker" button, bs-datepicker-container opened with all info in English (month, days) +5. When user chose other locale "N" for "Datepicker", bs-datepicker-container shown with all info in appropriate language +6. When user clicks on "Date Range Picker" button, bs-daterangepicker-container opened with all info in English (month, days) +7. When user chose other locale "N" for "Daterangepicker", bs-daterangepicker-container shown with all info in appropriate language +8. When user back to "en" - then all selects changed to "en" + + +Variations: +----------- +2*. User scroll to Locales sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.manual-trigger.use-case.md b/docs/spec/datepicker/datepicker.examples.manual-trigger.use-case.md new file mode 100644 index 0000000000..b7564562f0 --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.manual-trigger.use-case.md @@ -0,0 +1,23 @@ +5.11: Datepicker Manual triggering example +========================================== +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user how to trigger Datepicker manually + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Manual triggering sub-menu +3. User see Datepicker input and 3 clickable buttons: "Open", "Close", "Toggle" +4. When user clicks "Open", bs-datepicker-container opened +5. When user chose any date, then bs-datepicker-container disappeared and date shown in the input in format "mm/dd/yyyy" +6. When user clicks "Open" again, bs-datepicker-container opened and date is selected +7. When user clicks "Close", then bs-datepicker-container disappeared and date shown in the input in format "mm/dd/yyyy" +8. When user clicks "Toggle", then bs-datepicker-container opened and date is selected +9. When user clicks "Toggle" again, then bs-datepicker-container disappeared and date shown in the input in format "mm/dd/yyyy" + +Variations: +----------- +2*. User scroll to Manual triggering sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.min-max.use-case.md b/docs/spec/datepicker/datepicker.examples.min-max.use-case.md new file mode 100644 index 0000000000..15b6e54dea --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.min-max.use-case.md @@ -0,0 +1,23 @@ +5.7: Datepicker Min-max example +=============================== +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user how to use min and max date in Datepicker and Daterangepicker + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Min-max sub-menu +3. User see 2 inputs: Datepicker and Daterangepicker +4. When user clicks on Datepicker input, then bs-datepicker-container opened and user can chose any date from interval (yesterday - current day in the next week) +5. When user clicks on any other date, not from this interval, nothing happens +6. When user clicks on date from this interval, this date chosen and shown in the input field in format "mm/dd/yyyy" +7. When user clicks on Daterangepicker input, then bs-daterangepicker-container opened and user can chose any interval from interval (yesterday - current day in the next week) +8. When user clicks on any other date, not from this interval, nothing happens +9. When user clicks on the first date from this interval and second date also from this interval, then this interval chosen and shown in the input field in format "mm/dd/yyyy" - "mm/dd/yyyy" + +Variations: +----------- +2*. User scroll to Min-max sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.outside-click.md b/docs/spec/datepicker/datepicker.examples.outside-click.md new file mode 100644 index 0000000000..20331ecb84 --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.outside-click.md @@ -0,0 +1,22 @@ +5.17: Datepicker Outside click example +========================================== +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user example how to implement datepicker which closes by outside click + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Outside click sub-menu +3. User see 2 Datepicker inputs +4. When user clicks on the 1st Datepicker input, bs-datepicker-container opens +5. When user clicks outside this Datepicker, then bs-datepicker-container disappeared +6. When user clicks on the 2d Datepicker input, bs-datepicker-container opens +7. When user clicks outside this Datepicker, then bs-datepicker-container stay open +8. When user select any date from this Datepicker, then bs-datepicker-container disappeared and date is shown in format "mm/dd/yyyy" + +Variations: +----------- +2*. User scroll to Outside click sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.placement.use-case.md b/docs/spec/datepicker/datepicker.examples.placement.use-case.md new file mode 100644 index 0000000000..fc34a5a87e --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.placement.use-case.md @@ -0,0 +1,25 @@ +5.12: Datepicker Placement example +================================== +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user how to change placement of Datepicker + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Placement sub-menu +3. User see 4 Datepicker inputs (each have description about placement: right, top, bottom, left) +4. When user clicks on first input, bs-datepicker-container opens on the right side and centered according to this input +5. When user clicks on first input again, bs-datepicker-container disappeared +6. When user clicks on second input, bs-datepicker-container opens at the top of input and centered according to this input +7. When user clicks on second input again, bs-datepicker-container disappeared +8. When user clicks on third input, bs-datepicker-container opens at the bottom of input and centered according to this input +9. When user clicks on third input again, bs-datepicker-container disappeared +10. When user clicks on fourth input, bs-datepicker-container opens on the left side and centered according to this input +11. When user clicks on fourth input again, bs-datepicker-container disappeared + +Variations: +----------- +2*. User scroll to Placement sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.reactive-forms.use-case.md b/docs/spec/datepicker/datepicker.examples.reactive-forms.use-case.md new file mode 100644 index 0000000000..66b9ba7b80 --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.reactive-forms.use-case.md @@ -0,0 +1,23 @@ +5.10: Datepicker Reactive forms example +======================================= +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user how to use Datepicker and Daterangepicker in reactive forms + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Reactive forms sub-menu +3. User see 2 inputs: Datepicker and Daterangepicker +4. By default, user see preview block with object, which values is null +5. When user chose any date from Datepicker, then in preview block date value shown in ISO Dates (Date-Time) format +6. This value should be string type +7. When user chose any date from Daterangepicker, then in preview block range value shown in ISO Dates (Date-Time) format +8. This value should be an array of strings, length should be 2 +9. Component src should be written with using FormGroup and FormBuilder + +Variations: +----------- +2*. User scroll to Reactive forms sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.themes.use-case.md b/docs/spec/datepicker/datepicker.examples.themes.use-case.md new file mode 100644 index 0000000000..dd7e3e4bbc --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.themes.use-case.md @@ -0,0 +1,24 @@ +5.5: Datepicker Themes example +============================== +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user different themes and styles for Datepicker + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Themes sub-menu +3. User see select filed (with "green" by default), Datepicker input and button "Open" +4. When user clicks on "Open" button, bs-datepicker theme-green opened with appropriate styles +5. When user chose "default", bs-datepicker theme-default shown with appropriate styles +6. When user chose "blue", bs-datepicker theme-blue shown with appropriate styles +7. When user chose "dark-blue", bs-datepicker theme-dark-blue shown with appropriate styles +8. When user chose "red", bs-datepicker theme-red shown with appropriate styles +9. When user chose "orange", bs-datepicker theme-orange shown with appropriate styles + + +Variations: +----------- +2*. User scroll to Themes sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.trigger-by-isopen.md b/docs/spec/datepicker/datepicker.examples.trigger-by-isopen.md new file mode 100644 index 0000000000..ad9c72637c --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.trigger-by-isopen.md @@ -0,0 +1,21 @@ +5.18: Datepicker Trigger by isOpen property example +=================================================== +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user example how to trigger datepicker by changing isOpen property + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Trigger by isOpen property sub-menu +3. User see Datepicker input and clickable button "Toggle" +4. When user clicks on "Toggle", then bs-datepicker-container opens +5. When user select any date from this Datepicker, then bs-datepicker-container disappeared and date is shown in format "mm/dd/yyyy" +6. When user clicks on "Toggle" again, then bs-datepicker-container opens again +7. When user clicks on "Toggle" again, then bs-datepicker-container disappear + +Variations: +----------- +2*. User scroll to Trigger by isOpen property sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.value-change-event.use-case.md b/docs/spec/datepicker/datepicker.examples.value-change-event.use-case.md new file mode 100644 index 0000000000..03362c739e --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.value-change-event.use-case.md @@ -0,0 +1,21 @@ +5.15: Datepicker Value change event example +========================================== +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user example how to subscribe to datepicker value change event + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Value change event sub-menu +3. User see Datepicker input +4. When user clicks on Datepicker input, bs-datepicker-container opens and user can chose any Date +5. When user chose any date, then bs-datepicker-container disappeared, this date is shown in the input in format "mm/dd/yyyy" and card with info "Changed date is Mmm dd, yyyy" shown +6. When user clicks on Datepicker input again and chose another Date, then this new date is shown in the input in format "mm/dd/yyyy" and card with info "Changed date is Mmm dd, yyyy" shown +7. When user clears input, then card with info disappeared + +Variations: +----------- +2*. User scroll to Value change event sub-menu diff --git a/docs/spec/datepicker/datepicker.examples.visibility-events.use-case.md b/docs/spec/datepicker/datepicker.examples.visibility-events.use-case.md new file mode 100644 index 0000000000..49f73d528d --- /dev/null +++ b/docs/spec/datepicker/datepicker.examples.visibility-events.use-case.md @@ -0,0 +1,20 @@ +5.14: Datepicker Visibility Events example +========================================== +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user example how to subscribe to datepicker visibility events + +Main success scenario: +---------------------- +1. User opens Datepicker demo page +2. User clicks on Visibility Events sub-menu +3. User see Datepicker input +4. When user clicks on Datepicker input, bs-datepicker-container opens and user see card with "Event onShown is fired" +5. When user chose any date, then bs-datepicker-container disappeared and "Event onHidden is fired" shown +6. When user clicks on input again, then "Event onShown is fired" shown and "Event onHidden is fired" hidden + +Variations: +----------- +2*. User scroll to Visibility Events sub-menu diff --git a/docs/spec/index.md b/docs/spec/index.md index 2004a2dbb9..f8fb742158 100644 --- a/docs/spec/index.md +++ b/docs/spec/index.md @@ -47,6 +47,7 @@ [Examples. Configuring defaults](alerts/alerts.examples.conf-defaults.use-case.md) + ## Buttons [Buttons examples. Basic](buttons/buttons.examples.basic.use-case.md) @@ -90,6 +91,7 @@ [Carousel. Accessibility](carousel/carousel.examples.accessibility.use-case.md) + ## Collapse [Collapse. Basic](collapse/collapse.examples.basic.use-case.md) @@ -100,8 +102,48 @@ [Collapse. Accessibility](collapse/collapse.examples.accessibility.use-case.md) + ## Datepicker +[Datepicker. Basic](datepicker/datepicker.examples.basic.use-case.md) + +[Datepicker. Initial state](datepicker/datepicker.examples.initial-state.use-case.md) + +[Datepicker. Custom date format](datepicker/datepicker.examples.custom-date-format.use-case.md) + +[Datepicker. Hide on scroll](datepicker/datepicker.examples.hide-on-scroll.use-case.md) + +[Datepicker. Themes](datepicker/datepicker.examples.themes.use-case.md) + +[Datepicker. Locales](datepicker/datepicker.examples.locales.use-case.md) + +[Datepicker. Min-max](datepicker/datepicker.examples.min-max.use-case.md) + +[Datepicker. Disabled](datepicker/datepicker.examples.disabled.use-case.md) + +[Datepicker. Forms](datepicker/datepicker.examples.forms.use-case.md) + +[Datepicker. Reactive forms](datepicker/datepicker.examples.reactive-forms.use-case.md) + +[Datepicker. Manual triggering](datepicker/datepicker.examples.manual-trigger.use-case.md) + +[Datepicker. Placement](datepicker/datepicker.examples.placement.use-case.md) + +[Datepicker. Config method](datepicker/datepicker.examples.config-method.use-case.md) + +[Datepicker. Visibility Events](datepicker/datepicker.examples.visibility-events.use-case.md) + +[Datepicker. Value change event](datepicker/datepicker.examples.value-change-event.use-case.md) + +[Datepicker. Config properties](datepicker/datepicker.examples.config-properties.md) + +[Datepicker. Outside click](datepicker/datepicker.examples.outside-click.md) + +[Datepicker. Trigger by isOpen property](datepicker/datepicker.examples.trigger-by-isopen.md) + +[Datepicker. Custom triggers](datepicker/datepicker.examples.custom-trigger.md) + + ## Dropdowns [Dropdowns. Basic](dropdowns/dropdowns.examples.basic.use-case.md)