feat(docs): add use-cases for datepicker component (#4700)

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"

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

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

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

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

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

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

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

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

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

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

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

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

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