Topcoder Community App - Improve Datepicker (repost)

Welcome to the Topcoder challenge. You may implement this task and submit your solution until the deadline. Reviewers would score it and 2 people with higher scores (not less than minimal) would get the prizes. Learn "How to compete" and read the task below.

Context

Project Context

Topcoder Community App is the main Topcoder website that you see, for example, when you are searching for challenges https://www.topcoder.com/challenges.

Challenge Context

Currently, the calendar interface on the challenge listings page is not user friendly, see screenshot. We'd like to update the calendar UI so that it is easier for members to input dates without having to click through the calendar.

Expected Outcome

New UI for the calendar is implemented according to the new design. And supported entering date from the keyword.

Challenge Details

Technology Stack

• React

• SCSS

Code access

The work for this challenge has to be done in one repository:

- Community App repo https://github.com/topcoder-platform/community-app branch `feature/datepicker-update` commit `12adaecd72774539d013014b4cb3ce3f6deaa2f9` or later.

- For local setup, please follow the README with Node 8 or 10. CONTENTFUL environment variables are provided on the forum.

Individual requirements

On the challenge listing page we have a filter by date which is using a calendar widget see screenshot and link to the live page. 

• We would like to update the calendar UI according to the next new design:
  - Desktop handoff: https://marvelapp.com/prototype/f70187e/screen/73550299/handoff
  - Tablet handoff: https://marvelapp.com/prototype/ba511cg/screen/73550331/handoff
  - Mobile handoff: https://marvelapp.com/prototype/9440hbh/screen/73550357/handoff
  - Source file: https://drive.google.com/drive/folders/1kcUbIpo5i0LExa_kfSSuyt1io8JBAeSc?usp=sharing

• The existing behavior of the calendar should stay. In particular:
  - When we choose the first date, the calendar should move to the second date so we can choose the second date immediately.
  - After the second date is chosen calendar should be closed automatically.
  - We shouldn't be able to select the second date before the first date or the first date after the second date.
  - Calendar should be accessible using the keyword. We should be able to choose any date using keys <Tab>/<Shift>+<Tab>/<Enter>. Also can use Arrows ←, →, ↑, ↓, but not required - the important is to able to choose any date including month and year. See for example how it's implemented in the current calendar, see video.
  - Inside month and year dropdown you may use standard browser scrollbar, don't have to implement a custom one.
  - Calendar should be shown under the date field we currently choosing, see screenshots start and end.
  - Ignore the disabled field in the design. We should be able to enter only one date "start" or "end" and filter by one date.

• We should also be able to enter dates from the keyword directly to the inputs using the input mask, see screenshot.
  - Show input mask/placeholder, see screenshot.
  - It should automatically move the cursor during input, allow us to put the cursor in any place, and allow using keyboard arrows to navigate between digits, something like in this demo (don't use jQuery, this example is only for demo).
  - We should open the calendar when we click on the calendar icon only, when we click on the field we can enter the date from the keyboard.
  - If we enter an incorrect date, show an error like on the screenshot.

• You may use existing libraries or implement code from scratch. See which third-party code is allowed to use.

General requirements

• Everywhere in design replace the green color with Topcoder standard blue color.

• Desktop, tablet, and mobile screens should be supported.

• Follow the best practices established in the repository.

• Do not violate ESLint rules for JS code, nor StyleLint rules for SCSS.

• Properly use babel-plugin-react-css-modules and / or react-css-themr for styling.

• Use SCSS variables and mixins from the global stylesheets (/src/styles/_tc-styles.scss). Especially, when it relates to colors, fonts, etc;

• Do not break existing unit tests.

Scorecard Aid

• This challenge would be scored using the Basic Code Challenge 0.0.5 scorecard.

• The major requirement here are:
  - UI match the design
  - Input mask work similar to demo
  - Input mask and calendar are accessible using keyword

• Small issues in the implementations may be treated as minor issues.

If you have any questions or concerns, feel free to raise a question on the forum.

Final Submission Guidelines

Submit a zip file which would include:

• Git patch with changes you’ve made to the code in our repository.

Additionally, the winner would be required to raise a pull request to the repository after the challenge is completed.