Weblate: Improve date selection for reports [$32]

[nijel]

Is your feature request related to a problem? Please describe.

Current reporting period selection is not user-friendly:

Describe the solution you'd like

I'd like to see something like this:

[msanden]

Can I claim this issue?

[nijel]

Sure, you're welcome.

[rajat641]

Hi @nijel , Can I work on this. There is no update on this for a long time.

[nijel]

You're welcome! Yes, there are about two hundredths of issues without an update for a long time ;-)

[rajat641]

Hi @nijel ,
Today I explored on how to implement the above change and managed to find an already written JS component implementing the above feature. Here is the reference link http://www.daterangepicker.com/#config.
It looked somehow like this on my local machine-

Please ignore the styling details as it's just done for demonstration/clarification purposes to you.
It doesn't have a This Year and Next Year option(as given in the requirements image attached above) and I tried adding it but I did work out as its predefined.

I'm not sure If I can change styling or not as its already predefined. I haven't worked on UX before so please let me know if I'm following the right path or I have to write everything from scratch or maybe learn something else. I thought of using some Bootstrap/JQuery Plugin but I am not very confident about my approach.

[nijel]

Writing from scratch is certainly not needed, this one seems like a good choice (it has compatible license and it seems to be using Bootstrap, so hopefully it will not require much of additional styling).

We use yarn to manage the deps, see https://docs.weblate.org/en/latest/contributing/frontend.html for more info on that and other frontend development hints (I've just pushed some improvements to that, it will take few minutes to be fully up to date).