Skip to content

Latest commit

 

History

History
75 lines (62 loc) · 5.42 KB

datepicker.examples.basic.use-case.md

File metadata and controls

75 lines (62 loc) · 5.42 KB
Raw

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
  1. When user clicks on "Datepicker" input, bs-datepicker-container opened and no one date selected
  2. User see Datepicker container with 2 arrows in the bs-datepicker-head block: left "<" and right ">"
  3. By default, Datepicker show current year and current month in head block
  4. When the user clicks on the left arrow "<" - then the previous month name with current year shown in the bs-datepicker-head block and the previous month's calendar shown in the bs-datepicker-body block
  5. When user clicks on the right arrow ">" after that twice - then the next month name with current year number shown in the the bs-datepicker-head block, and next month's calendar shown in the bs-datepicker-body block
  6. When the user clicks on the month name in the bs-datepicker-head block, the current year number is displayed in the bs-datepicker-head block, and the full table with 12 months is displayed in the bs-datepicker-body block
  7. When the user clicks a year in the bs-datepicker-head block, a 16-year interval appears in the bs-datepicker-head block, and the bs-datepicker-body displays the complete table with that 16 year period
  8. When user clicks on any year, next clicks on any month name and next click on the any date in the bs-datepicker-body - then selected date appears in the input in the format "mm/dd/yyyy"
  9. When user clicks on "Datepicker" input again, bs-datepicker-container opened and chosen date selected in the month calendar
  10. When user clears input and add there date in format "mm.dd.yyyy", click "Enter" - date converted to "mm/dd/yyyy"
  11. When user clears input and add there date in format "mm-dd-yyyy", click "Enter" - date converted to "mm/dd/yyyy"
  12. When user clicks on "Datepicker" input again, bs-datepicker-container opened and chosen date selected
Daterangepicker
  1. Daterangepicker bs-datepicker-container opens with animation and with no one date selected, and Datepicker bs-datepicker-container closes
  2. By default, user see 2 bs-days-calendar-view blocks in the bs-datepicker-container
  3. User see Daterangepicker container with 2 arrows: "‹" and "›"
  4. When user clicks on "‹" - shown interval, which started from previous month
  5. When user clicks on "›" - shown interval, which started from next month
  6. By default, Daterangepicker show interval from current month, year and next month, year in head block
  7. When user clicks on month, then 2 tables with 12 months in each shown with years(current and next) in head block
  8. When user clicks on year, then 2 tables with 16 years in each shown with year interval in head block
  9. When user clicks on any date - then this date selected
  10. When user click on the later date, then this interval appeared in the input in format "mm/dd/yyyy" - "mm/dd/yyyy"
  11. When user clicks on "Daterangepicker" input again, bs-dateragdepicker-container opened and chosen date interval selected
  12. 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 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

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"