Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-26649

Date picker formslib element usability improvements

XMLWordPrintable

    • MOODLE_20_STABLE, MOODLE_22_STABLE, MOODLE_25_STABLE
    • MOODLE_25_STABLE
    • MDL-26649_master
    • Hide

      This must be tested on all supported browsers.

      Enable JS

      1. Create a new quiz on your site.
      2. On the editing page click to expand the 'Timing' section.
      3. Hover over the calendar icon next to 'Open the quiz' and 'Close the quiz' and ensure the image is not clickable and that the mouse icon does not change to a hand (this is the default behaviour (in Firefox anyway) when hovering over an input type image (even if it is disabled), this may confuse users who think they can interact with it even though the enable checkbox is not checked).
      4. Enable the 'Open the quiz' element by clicking on the 'Enable' checkbox.
      5. Click on the calendar icon and ensure the calendar pop-up displays and you can choose a date.
      6. Select a date and ensure the select box values populate with this date and the calendar closes.
      7. Click on the calendar icon again to display the pop-up and then click on it again to ensure it closes.
      8. Click on the calendar icon again to display the pop-up and then click anywhere else on the screen (besides the select boxes) to ensure it closes.
      9. Select a day, month and year using the select boxes, then click on the calendar icon and ensure the pop-up is set to this date.
      10. Change the date in the select boxes while the calendar pop-up is open and ensure the date changes.
      11. Uncheck the 'Enable' checkbox and repeat step 3.
      12. Create a new course.
      13. On the editing page for the 'Course start date' field repeat steps 3-11 as it is a dateselector element, not a datetimeselector.
      14. Create a new database activity and ensure you do not get the JS error 'TypeError: this.calendarimage is null' preventing the rest of JS on the form from loading.
      15. Try and break the calendar on Firefox with the firebug console open to spot any JS warnings/errors.

      Disable JS

      1. Create a new quiz on your site.
      2. On the editing page ensure there is no calendar icon next to the 'Open the quiz' and 'Close the quiz' fields.
      3. Create a new course.
      4. On the editing page ensure there is no calendar icon next to the 'Course start date' field.
      Show
      This must be tested on all supported browsers. Enable JS Create a new quiz on your site. On the editing page click to expand the 'Timing' section. Hover over the calendar icon next to 'Open the quiz' and 'Close the quiz' and ensure the image is not clickable and that the mouse icon does not change to a hand (this is the default behaviour (in Firefox anyway) when hovering over an input type image (even if it is disabled), this may confuse users who think they can interact with it even though the enable checkbox is not checked). Enable the 'Open the quiz' element by clicking on the 'Enable' checkbox. Click on the calendar icon and ensure the calendar pop-up displays and you can choose a date. Select a date and ensure the select box values populate with this date and the calendar closes. Click on the calendar icon again to display the pop-up and then click on it again to ensure it closes. Click on the calendar icon again to display the pop-up and then click anywhere else on the screen (besides the select boxes) to ensure it closes. Select a day, month and year using the select boxes, then click on the calendar icon and ensure the pop-up is set to this date. Change the date in the select boxes while the calendar pop-up is open and ensure the date changes. Uncheck the 'Enable' checkbox and repeat step 3. Create a new course. On the editing page for the 'Course start date' field repeat steps 3-11 as it is a dateselector element, not a datetimeselector. Create a new database activity and ensure you do not get the JS error 'TypeError: this.calendarimage is null' preventing the rest of JS on the form from loading. Try and break the calendar on Firefox with the firebug console open to spot any JS warnings/errors. Disable JS Create a new quiz on your site. On the editing page ensure there is no calendar icon next to the 'Open the quiz' and 'Close the quiz' fields. Create a new course. On the editing page ensure there is no calendar icon next to the 'Course start date' field.

      This was caused by the code in MDL-16592. The date picker used to be basic, but usable and fast to operate. Now it is hard to operate and looks broken. Our technical testing staff reported it as a bug as follows:

      <<
      For each of the date fields for the above labels i.e. 'allow editing from' and 'prevent editing from' the drop-down and the calender get displayed at the same time. This looks untidy and only one of the 2 options is necessary to make the selection and there is no need to have them both displayed at the same time.
      >>

      My suggestion would be:

      1) As the easiest fix to leave it in a professional, working state with reasonable UI, we could just remove the popup.

      2) Alternatively I suggest adding a separate button/icon (only added in JavaScript) which appears just to the right of the dropdowns, and opens the popup. So it doesn't interfere with you using the dropdowns at all. When clicking that button, the popup appears and the dropdown is disabled until you close the popup (which updates the dropdown dates).

      If anybody wants us to implement #1 we certainly can. I think we might have time to implement #2 as well. Alternatively of course we're happy to leave this to somebody else This isn't on our critical list, we can leave it sucking if we have to. But it does suck really hard, I'm surprised nobody else has complained.

      On which note - I did try to use Jira search to find if anyone had already reported this, I searched several times but didn't spot it? Very odd? Probably this is a duplicate and I just couldn't find it?

        1. calendar.png
          calendar.png
          46 kB
        2. dateselector.zip
          4 kB

            markn Mark Nelson
            quen Sam Marshall
            Ankit Agarwal Ankit Agarwal
            Damyon Wiese Damyon Wiese
            Adrian Greeve Adrian Greeve
            Votes:
            20 Vote for this issue
            Watchers:
            16 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.