Uploaded image for project: 'SonarQube'
  1. SonarQube
  2. SONAR-9338

Make all date pickers consistent





      Today we have many different styles for the date picker:

      • In the Background Tasks page
      • In the Rules page
      • In the Issues page
      • In the Issues tab of a project
      • In Administration > Projects > Background tasks

      Moreover this component has some flaws

      • The predefined time ranges take a lot of space in the facets and are not very noticeable
      • When opening the selector, then navigating to another page, the calendar picker remains visible, floating in the middle of nowhere.


      The date picker in its default state looks like a single input field with a calendar icon.

      Selecting a time range

      Clicking on the input field opens the widget. For custom ranges, the start date is preselected as you open the widget.

      Clicking on one of the numbers of the calendar will select it as the start date. End date will be automatically selected. "Apply" button remains disabled until a valid range is defined. Numbers prior to the selected start date will turn grey and be impossible to select as an End date.

      Clicking on another number will then select the End date. "Apply" button is made available.

      After applying, the input field is filled with the selected dates.

      If the user has selected one of the predefined ranges on the right, it will immediately close the widget and fill the input field with the corresponding dates. Clicking on the input field again will show the widget with the predefined range highlighted.

      Selecting a single date

      The widget is much simpler, no predefined ranges and no "Apply" button. As soon as the user clicks on a number of the calendar, the widget closes and the input field is filled with the corresponding date.

      See Date pickers section ( https://xtranet.sonarsource.com/display/PLAT/b.+Components#b.Components-Datepickers ) in our design guidelines


        1. Date-picker-01.png
          141 kB
          Laura Wacrenier
        2. Date-picker-02.png
          238 kB
          Laura Wacrenier
        3. Date-picker-03.png
          203 kB
          Laura Wacrenier
        4. Date-picker-04.png
          146 kB
          Laura Wacrenier
        5. Date-picker-05.png
          146 kB
          Laura Wacrenier
        6. Date-picker-06.png
          150 kB
          Laura Wacrenier
        7. Date-picker-07.png
          142 kB
          Laura Wacrenier
        8. Date-picker-08.png
          146 kB
          Laura Wacrenier
        9. Date-picker-09.png
          205 kB
          Laura Wacrenier
        10. Screen Shot 2017-05-29 at 11.57.51.png
          21 kB
          Laura Wacrenier
        11. Screen Shot 2017-05-29 at 11.57.58.png
          18 kB
          Laura Wacrenier
        12. Screen Shot 2017-05-29 at 11.58.36.png
          12 kB
          Laura Wacrenier
        13. Screen Shot 2017-05-29 at 11.59.03.png
          10 kB
          Laura Wacrenier
        14. Screen Shot 2017-05-29 at 12.03.42.png
          46 kB
          Laura Wacrenier
        15. Screen Shot 2018-04-04 at 09.18.21.png
          28 kB
          Laura Wacrenier
        16. Screen Shot 2018-04-04 at 09.18.31.png
          28 kB
          Laura Wacrenier



            stas.vilchik Stas Vilchik (Inactive)
            laura.wacrenier Laura Wacrenier
            0 Vote for this issue
            3 Start watching this issue