UserScript to make changing dates in Moodle more ergonomic (less clicks and copy-paste)

Moodle_date_time_text_box.user.js

// ==UserScript==
// @name         Moodle date-time text box
// @namespace    https://profs.etsmtl.ca/cfuhrman/
// @version      0.1
// @description  Save many clicks by providing a text box to specify dates and times in Moodle dates, on the https://moodle.org/plugins/report_editdates -- uses JQuery datetimepicker to validate (or pick) times
// @author       Christopher Fuhrman
// @updateURL    https://gist.github.com/fuhrmanator/7e9bf5e03302c91593348061c1e81459/raw/89a686fea5456c1e7898be6ad4a2a823a4a98c9e/Moodle_date_time_text_box.user.js
// @downloadURL  https://gist.github.com/fuhrmanator/7e9bf5e03302c91593348061c1e81459/raw/89a686fea5456c1e7898be6ad4a2a823a4a98c9e/Moodle_date_time_text_box.user.js
// @match        https://*/report/editdates/index.php*
// @require      https://code.jquery.com/jquery-latest.js
// @require      https://code.jquery.com/ui/1.12.1/jquery-ui.min.js
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-ui-timepicker-addon.min.js
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle('.moodle_date_time_box {background-color : yellow; width: 140px; }');

// Load CSS dynamically, described at https://stackoverflow.com/a/25468928/1168342
$("head").append (
    '<link ' +
    'href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/blitzer/jquery-ui.min.css" ' +
    'rel="stylesheet" type="text/css">' +
    '<link ' +
    'href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-ui-timepicker-addon.min.css" ' +
    'rel="stylesheet" type="text/css">'
);


$(document).ready(function() {
    'use strict';

    // let's try putting a text box before each time selector...
    $('.fdate_time_selector').each(function() {
        var selectorDiv = this;  // remember it for onChanged
        var dateBox = document.createElement("input");
        dateBox.setAttribute("type", "Textbox");
        dateBox.setAttribute("class", "moodle_date_time_box");
        dateBox.setAttribute("value", getMoodleDate(this) + " " + getMoodleTime(this));
        $(dateBox).insertBefore(this);
        // when updates occur, reset the Moodle page controls
        $(dateBox).on("change", function () {
            // console.log($(this).val());
            var pickedDate = $(this).datetimepicker('getDate');
            setMoodleDate(selectorDiv, pickedDate);
        });
        // hook in the datetimepicker, with 5-min granularity for Moodle
        $(dateBox).datetimepicker({
            dateFormat: "yy-mm-dd",
            timeFormat: "HH:mm",
            showTime: false,
            showHour: false,
            showMinute: false,
            stepMinute: 5
        });
    });
});

// within the 'fdate_time_selector' class DIV
function setMoodleDate(e, date) {
    $("select[id$='_year']",e).val(date.getFullYear());
    $("select[id$='_month']",e).val(date.getMonth() + 1);
    $("select[id$='_day']",e).val(date.getDate());
    $("select[id$='_hour']",e).val(date.getHours());
    $("select[id$='_minute']",e).val(date.getMinutes());
}

function dateFromSelects(e) {
    var year = $("select[id$='_year'] :selected",e).val();
    var month = $("select[id$='_month'] :selected",e).val()-1;
    var day = $("select[id$='_day'] :selected",e).val();
    var hour = $("select[id$='_hour'] :selected",e).val();
    var minute = $("select[id$='_minute'] :selected",e).val();
    var date = new Date(year, month, day, hour, minute, 0, 0);
    return date;
}

function getMoodleDate(e) {
    var yearSelect = $("select[id$='_year'] :selected",e);
    var monthSelect = $("select[id$='_month'] :selected",e);
    var daySelect = $("select[id$='_day'] :selected",e);
    // "yy-mm-dd", pad zeroes if necessary
    var date = yearSelect.val() + "-" + ("0" + monthSelect.val()).slice(-2) + "-" + ("0" + daySelect.val()).slice(-2);
    return date;
}

function getMoodleTime(e) {
    var hourSelect = $("select[id$='_hour'] :selected",e);
    var minuteSelect = $("select[id$='_minute'] :selected",e);
    // "HH:mm", pad zeroes if necessary
    var time = ("0" + hourSelect.val()).slice(-2) + ":" + ("0" + minuteSelect.val()).slice(-2);
    return time;
}