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

Revamp date picker using Flatpickr

    XMLWordPrintable

    Details

    • Type: New Feature
    • Status: Reopened
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.3.2
    • Fix Version/s: None
    • Component/s: Forms Library
    • Labels:
    • Testing Instructions:
      Hide

      Testing Instructions

      There are several places throughout the site where date_time_selectors are used. Here are a few examples:

      • Navigate to /calendar, click new event.
      • Navigate to a course, click "edit settings". "Hide from" and "Hide until" are date/time selectors.
      • Navigate to /course/recent.php?id=...
      • Navigate to a course, click users->participants. Click the gear on a user's row under enrolment methods. /enrol/editenrolment.php.
      • Navigate to a course. Create or view a quiz. Go to "edit settings" under quiz administration to the left. The date-time pickers are under "Timing".
      • Navigate to a course. Create or view a forum. Go to "edit settings" under forum administration to the left. The date-time pickers are under "Ratings".
      • Navigate to a course. Add a scheduler module to the course. The date time selector shows up with you view->new single slot form, view->update single slot form, and view->new repeated slots form.
      • Add a scorm package module to a course site. Under the availability setting, there are two date/time selectors.
      Show
      Testing Instructions There are several places throughout the site where date_time_selectors are used. Here are a few examples: Navigate to /calendar, click new event. Navigate to a course, click "edit settings". "Hide from" and "Hide until" are date/time selectors. Navigate to /course/recent.php?id=... Navigate to a course, click users->participants. Click the gear on a user's row under enrolment methods. /enrol/editenrolment.php. Navigate to a course. Create or view a quiz. Go to "edit settings" under quiz administration to the left. The date-time pickers are under "Timing". Navigate to a course. Create or view a forum. Go to "edit settings" under forum administration to the left. The date-time pickers are under "Ratings". Navigate to a course. Add a scheduler module to the course. The date time selector shows up with you view->new single slot form, view->update single slot form, and view->new repeated slots form. Add a scorm package module to a course site. Under the availability setting, there are two date/time selectors.
    • Affected Branches:
      MOODLE_33_STABLE
    • Pull Master Branch:
      MDL-60134-revamp-date-picker-flatpickr

      Description

      The date and datetime pickers in Moodle are dated and in need of a revamp.

      We are providing a patch to update the date and datetime pickers to use Flatpickr: https://chmln.github.io/flatpickr/

      Our patch adds Flatpickr as a replacement for the Moodle date and datetime pickers and falls back to the current date and datetime pickers for non-Gregorian calendars.

      Benefits include:

      • Clean, easy to use interface for picking date/time rather than having to choose from long dropdowns.
      • Support for different languages and date formats for different locales.
      • Displays time in nice am/pm times for languages that prefer am/pm times
      • Small js/css library compared to JQuery or YUI calendars.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                rex Rex Lorenzo
                Reporter:
                rex Rex Lorenzo
                Peer reviewer:
                Adrian Greeve
                Participants:
                Component watchers:
                Jake Dallimore, Jun Pataleta
              • Votes:
                1 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                • Created:
                  Updated: