Commit 8d796e7c authored by Liam's avatar Liam

Bug #1744191: Updated the datepicker to use the bootstrap one

Includes accessibility features
Includes ability to translate tooltips
Have picker div appear inside a <div> rather than <span> for valid
markup

behatnotneeded

Change-Id: I7e4dfb5026cfa579145ca4c932ad673690a8c55a
parent c3dd695b
Bootstrap Datetimepicker
========================
Website: https://eonasdan.github.io/bootstrap-datetimepicker/
Version: 4.17.47
The bootstrap datetimepicker makes it easy to select dates and times on input fields by using a popup selector. It runs using bootstrap and moment.js.
Changes:
- Added aria-labels
- Added function, press h, to switch between the date and time picker pages
Moment.js
=========
Website: http://momentjs.com/
Version: 2.20.1
Moment.js makes use of javascript to parse, validate, manipulate, and display dates and times in Mahara. It is used in conjunction with the bootstrap datetimepicker.
Changes: none
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -637,37 +637,31 @@ $string['years'] = 'years'; ...@@ -637,37 +637,31 @@ $string['years'] = 'years';
$string['year'] = 'year'; $string['year'] = 'year';
// Datepicker options // Datepicker options
$string['datepicker_clearText'] = 'Clear'; $string['datepicker_today'] = "Go to today";
$string['datepicker_clearStatus'] = ''; $string['datepicker_clear'] = "Clear selection";
$string['datepicker_closeText'] = 'Done'; $string['datepicker_close'] = "Close the picker";
$string['datepicker_closeStatus'] = 'Close without change'; $string['datepicker_selectMonth'] = "Select month";
$string['datepicker_prevText'] = 'Prev'; $string['datepicker_prevMonth'] = "Previous month";
$string['datepicker_prevStatus'] = 'Show the previous month'; $string['datepicker_nextMonth'] = "Next month";
$string['datepicker_nextText'] = 'Next'; $string['datepicker_selectYear'] = "Select year";
$string['datepicker_nextStatus'] = 'Show the next month'; $string['datepicker_prevYear'] = "Previous year";
$string['datepicker_currentText'] = 'Now'; $string['datepicker_nextYear'] = "Next year";
$string['datepicker_currentStatus'] = 'Show the current month'; $string['datepicker_selectDecade'] = "Select decade";
$string['datepicker_monthNames'] = "['January','February','March','April','May','June','July','August','September','October','November','December']"; $string['datepicker_prevDecade'] = "Previous decade";
$string['datepicker_monthNamesShort'] = "['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']"; $string['datepicker_nextDecade'] = "Next decade";
$string['datepicker_monthStatus'] = 'Show a different month'; $string['datepicker_prevCentury'] = "Previous century";
$string['datepicker_yearStatus'] = 'See another year'; $string['datepicker_nextCentury'] = "Next century";
$string['datepicker_weekHeader'] = 'Wk'; $string['datepicker_pickHour'] = "Pick hour";
$string['datepicker_weekStatus'] = ''; $string['datepicker_incrementHour'] = "Increment hour";
$string['datepicker_dayNames'] = "['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']"; $string['datepicker_decrementHour'] = "Decrement hour";
$string['datepicker_dayNamesShort'] = "['Sun','Mon','Tue','Wed','Thu','Fri','Sat']"; $string['datepicker_pickMinute'] = "Pick minute";
$string['datepicker_dayNamesMin'] = "['Su','Mo','Tu','We','Th','Fr','Sa']"; $string['datepicker_incrementMinute'] = "Increment minute";
$string['datepicker_dayStatus'] = 'Using DD as the first day of the week'; $string['datepicker_decrementMinute'] = "Decrement minute";
$string['datepicker_dateStatus'] = 'Select DD, MM d, yy'; $string['datepicker_pickSecond'] = "Pick second";
$string['datepicker_initStatus'] = 'Choose the date'; $string['datepicker_incrementSecond'] = "Increment second";
$string['datepicker_timeOnlyTitle'] = 'Select time'; $string['datepicker_decrementSecond'] = "Decrement second";
$string['datepicker_timeText'] = 'Time'; $string['datepicker_togglePeriod'] = "Toggle period";
$string['datepicker_hourText'] = 'Hour'; $string['datepicker_selectTime'] = "Select time";
$string['datepicker_minuteText'] = 'Minute';
$string['datepicker_secondText'] = 'Second';
$string['datepicker_millisecText'] = 'Millisecond';
$string['datepicker_timezoneText'] = 'Timezone';
$string['datepicker_amNames'] = "['AM', 'A']";
$string['datepicker_pmNames'] = "['PM', 'P']";
$string['timelapsestringhour'] = array( $string['timelapsestringhour'] = array(
0 => '%2$s hour %s min ago', 0 => '%2$s hour %s min ago',
......
...@@ -180,7 +180,7 @@ function pieform_element_viewacl(Pieform $form, $element) { ...@@ -180,7 +180,7 @@ function pieform_element_viewacl(Pieform $form, $element) {
$options = array('stepHour' => 1, $options = array('stepHour' => 1,
'stepMinute' => 5, 'stepMinute' => 5,
); );
$options = pieform_element_calendar_get_lang_strings($options, $LANGDIRECTION); $tooltips = pieform_element_calendar_tooltip_lang_strings();
$datepickeroptionstr = ''; $datepickeroptionstr = '';
foreach ($options as $key => $option) { foreach ($options as $key => $option) {
if (is_numeric($option)) { if (is_numeric($option)) {
...@@ -204,6 +204,7 @@ function pieform_element_viewacl(Pieform $form, $element) { ...@@ -204,6 +204,7 @@ function pieform_element_viewacl(Pieform $form, $element) {
} }
$smarty->assign('datepickeroptions', $datepickeroptionstr); $smarty->assign('datepickeroptions', $datepickeroptionstr);
$smarty->assign('datepickertooltips', json_encode($tooltips));
$smarty->assign('viewtype', $element['viewtype']); $smarty->assign('viewtype', $element['viewtype']);
$smarty->assign('potentialpresets', json_encode($allowedpresets)); $smarty->assign('potentialpresets', json_encode($allowedpresets));
$smarty->assign('loggedinindex', $loggedinindex); $smarty->assign('loggedinindex', $loggedinindex);
......
This diff is collapsed.
...@@ -44,6 +44,7 @@ $width-sm: 90%; ...@@ -44,6 +44,7 @@ $width-sm: 90%;
.modal-body { .modal-body {
@include border-bottom-radius(3px); @include border-bottom-radius(3px);
max-height: 90%; max-height: 90%;
height: 90%;
overflow: auto; overflow: auto;
&.flush { &.flush {
padding: 0; padding: 0;
......
/* Changes for datepicker - original css is part of jquery-ui */
.ui-datepicker {
font-size: 0.7em;
z-index: 6 !important;
.ui-datepicker-prev-year, .ui-datepicker-next-year {
height: 1.8em;
position: absolute;
top: 2px;
width: 1.8em;
}
.ui-datepicker-prev-year {
left: 2px;
}
.ui-datepicker-next-year {
right: 2px;
}
.ui-datepicker-prev-year span, .ui-datepicker-next-year span {
display: block;
left: 50%;
margin-left: -7px;
margin-top: -8px;
position: absolute;
top: 50%;
}
.ui-datepicker-prev-year-hover, .ui-datepicker-next-year-hover {
top: 1px;
}
.ui-datepicker-prev-year-hover span, .ui-datepicker-next-year-hover span {
margin-left: -8px;
}
.ui-datepicker-next-year span {
margin-left: -9px;
}
.ui-datepicker-next-year-hover span {
margin-left: -8px;
}
.ui-datepicker-prev span, .ui-datepicker-next span {
margin-left: -7px;
}
.ui-datepicker-prev-hover span, .ui-datepicker-next-hover span {
margin-left: -8px;
}
.ui-datepicker-prev {
left: 23px;
}
.ui-datepicker-next {
right: 23px;
span {
margin-left: -9px;
}
}
.ui-datepicker-next-hover span {
margin-left: -8px;
}
button.ui-priority-secondary {
opacity: 1;
font-weight: 700;
}
}
.ui-datepicker.in-modal {
z-index: 1041 !important;
}
/* Styles for the new year prev/next css */
/* Styles changes to get prev/next to work with year prev/next css */
.ui-icon-circle-triangle-wy {
background-position: -144px -192px;
}
.ui-icon-circle-triangle-ey {
background-position: -112px -192px;
}
/* Changes for timepicker */
.ui-timepicker-div {
.ui-widget-header {
margin-bottom: 8px;
}
dl {
text-align: left;
dt {
float: left;
clear: left;
padding: 0 0 0 5px;
}
dd {
margin: 0 10px 10px 40%;
}
}
td {
font-size: 90%;
}
}
.ui-tpicker-grid-label {
background: none;
border: none;
margin: 0;
padding: 0;
}
.ui-timepicker-rtl {
direction: rtl;
dl {
text-align: right;
padding: 0 5px 0 0;
dt {
float: right;
clear: right;
}
dd {
margin: 0 40% 10px 10px;
}
}
}
...@@ -185,6 +185,7 @@ textarea.resizable { ...@@ -185,6 +185,7 @@ textarea.resizable {
.hasDatepickerwrapper input[type="text"], .hasDatepickerwrapper input[type="text"],
.hasDatepickerwrapperacl input[type="text"] { .hasDatepickerwrapperacl input[type="text"] {
position: relative; position: relative;
padding-right: 28px;
} }
.hasDatepicker { .hasDatepicker {
padding-right: 20px; padding-right: 20px;
......
...@@ -74,6 +74,7 @@ ...@@ -74,6 +74,7 @@
@import "../components/tags"; @import "../components/tags";
@import "../components/user-icon"; @import "../components/user-icon";
@import "../components/framework"; // For the framework matrix @import "../components/framework"; // For the framework matrix
@import "../components/datepicker";
// Feature related sass. We avoid this where we can in favour of reusable components // Feature related sass. We avoid this where we can in favour of reusable components
......
...@@ -89,12 +89,12 @@ ...@@ -89,12 +89,12 @@
</td> </td>
<td class="text-center js-date short" data-name='from'> <td class="text-center js-date short" data-name='from'>
<div class="date-picker js-date-picker js-hide-empty {% if (o.presets.empty) { %}hidden{% } %}"> <div class="date-picker js-date-picker js-hide-empty {% if (o.presets.empty) { %}hidden{% } %}">
<span class="hasDatepickerwrapperacl"><input type="text" name="accesslist[{%=o.id%}][startdate]" class="form-control pull-left" data-setmin="true" setdatatarget="to" value="{%=o.presets.startdate%}" {% if (o.presets.locked) { %}disabled{% } %}></span> <div class="hasDatepickerwrapperacl"><input type="text" name="accesslist[{%=o.id%}][startdate]" class="form-control pull-left" data-setmin="true" setdatatarget="to" value="{%=o.presets.startdate%}" aria-label="Date from (Edit the field using the following format, year / month / day, hours colon minutes, a m or p m.)" {% if (o.presets.locked) { %}disabled{% } %}></div>
</div> </div>
</td> </td>
<td class="text-center js-date short" data-name='to'> <td class="text-center js-date short" data-name='to'>
<div class="date-picker js-date-picker js-hide-empty {% if (o.presets.empty) { %}hidden{% } %}"> <div class="date-picker js-date-picker js-hide-empty {% if (o.presets.empty) { %}hidden{% } %}">
<span class="hasDatepickerwrapperacl"><input type="text" name="accesslist[{%=o.id%}][stopdate]" class="form-control pull-left " data-setmax="true" setdatatarget="from" value="{%=o.presets.stopdate%}" {% if (o.presets.locked) { %}disabled{% } %}></span> <div class="hasDatepickerwrapperacl"><input type="text" name="accesslist[{%=o.id%}][stopdate]" class="form-control pull-left " data-setmax="true" setdatatarget="from" value="{%=o.presets.stopdate%}" aria-label="Date to (Edit the field using the following format, year / month / day, hours colon minutes, a m or p m.)" value="{%=o.presets.stopdate%}" {% if (o.presets.locked) { %}disabled{% } %}></div>
</div> </div>
</td> </td>
{% if (o.viewtype !== "profile") { %} {% if (o.viewtype !== "profile") { %}
...@@ -134,36 +134,21 @@ jQuery(function($) { ...@@ -134,36 +134,21 @@ jQuery(function($) {
}); });
function setDatePicker(target) { function setDatePicker(target) {
var loc = '{{strstr(current_language(), '.', true)}}'; // Get current langauge to use for locale
target.datetimepicker({ target.datetimepicker({
dateFormat: "{{str(tag='pieform_calendar_dateformat' section='langconfig')|pieform_element_calendar_convert_dateformat}}", useCurrent: false,
showOtherMonths: true, format: "{{str(tag='pieform_calendar_dateformat' section='langconfig')|pieform_element_calendar_convert_dateformat}} {{str(tag='pieform_calendar_timeformat' section='langconfig')|pieform_element_calendar_convert_timeformat}}",
selectOtherMonths: true, locale: loc,
showButtonPanel: true, showClear: true,
beforeShow: function(input, inst) { showTodayButton: true,
setTimeout(function() { tooltips: {{$datepickertooltips|safe}},
add_prev_next_year(inst); icons: {
}, 1); clear: "icon icon-trash",
today: "icon icon-crosshairs",
}, },
onChangeMonthYear: function(y, m, inst) { }).on('dp.hide', function(selectedDate) {
setTimeout(function() { if (selectedDate !== "") {
add_prev_next_year(inst); formchangemanager.setFormStateById('{{$formname}}', FORM_CHANGED);
}, 1);
},
onClose: function( selectedDate ) {
var setmin = $(this).attr('data-setmin'),
setmax = $(this).attr('data-setmax'),
setdatatarget = $(this).attr('data-setdatatarget'),
settarget = $(this).closest('td').siblings(['data-name="' + setdatatarget + '"']).find('input');
if (setmin !== undefined) {
settarget.datetimepicker( "option", "minDate", selectedDate);
}
if (setmax !== undefined) {
settarget.datetimepicker( "option", "maxDate", selectedDate);
}
if ((setmin !== undefined || setmax !== undefined ) && selectedDate !== "") {
formchangemanager.setFormStateById('{{$formname}}', FORM_CHANGED);
}
} }
}); });
} }
...@@ -330,7 +315,7 @@ jQuery(function($) { ...@@ -330,7 +315,7 @@ jQuery(function($) {
function attachEventListeners(id) { function attachEventListeners(id) {
var newrow = $('#accesslistitems').find('[data-id="' + id + '"]'); var newrow = $('#accesslistitems').find('[data-id="' + id + '"]');
attachShareTypeEvent(newrow); attachShareTypeEvent(newrow);
setDatePicker($(newrow).find('.js-date-picker > span > input')); setDatePicker($(newrow).find('.js-date-picker > div > input'));
attachSelect2Search($(newrow).find('.js-select2-search')); attachSelect2Search($(newrow).find('.js-select2-search'));
attachCommentEvents($(newrow)); attachCommentEvents($(newrow));
onChange($(newrow)); onChange($(newrow));
...@@ -563,7 +548,7 @@ jQuery(function($) { ...@@ -563,7 +548,7 @@ jQuery(function($) {
shareoptions = shareWithOptions(rows[i]); shareoptions = shareWithOptions(rows[i]);
renderAccessList(shareoptions); renderAccessList(shareoptions);
setDatePicker($( ".js-date-picker > span > input" )); setDatePicker($( ".js-date-picker > div > input" ));
}); });
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment