Overview date picker input changes
Quoting from slack convo with @oliversauter yesterday:
we could put a small calendar icon in the corner of both fields that open a date picker. If people enter the field itself, the date picker would not open. They would have to click the calendar icon in order to open the date picker.
Current behaviour for reference:
- date-picker opens on input focus
- date-picker closes on input blur, enter keydown, or date-picker selection
@poltak @oliversauter I would like to fix this up. In what section is this feature be implemented, could u please give some more detail on this?
Hey @Paarmita. Thanks for the interest in this. The current implementation of the date pickers should be all in src/overview/components/DateRangeSelection module and makes use of react-datepicker package. Let me know if you have any questions.
@poltak So in order to open calendar on click can I use react-input-calendar package?
@Paarmita It's already being used and working well - probably wouldn't need to interact with it much (just for reference as you go through the existing code). The main task would be changing the behaviour inside that DateRangeSelection class to work as specified in the OP.
@poltak I understand the behaviour and started working on it. There is a calendar icon already fixed before the after input field. Could u please specify what type of icon or which icon to use?. And for separation of both after and before input fields, there is a tiny triangle icon between them. We can use that icon in place of calender icon to open the date-picker. For separation we will have to use another icon.
Hey @poltak , Can you provide the current status of the issue, including how much progress has been made and which section of the codebase the issue persists in? I would like to work on it.