Skip to content

Instantly share code, notes, and snippets.

@fuhrmanator

fuhrmanator/Moodle_date_time_text_box.user.js

Last active December 24, 2017 21:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fuhrmanator/7e9bf5e03302c91593348061c1e81459 to your computer and use it in GitHub Desktop.
Save fuhrmanator/7e9bf5e03302c91593348061c1e81459 to your computer and use it in GitHub Desktop.
Download ZIP
UserScript to make changing dates in Moodle more ergonomic (less clicks and copy-paste)
Raw
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/jquery-ui-timepicker-addon@1.6.3/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/jquery-ui-timepicker-addon@1.6.3/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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment