|
1255 | 1255 | required |
1256 | 1256 | :options="assignToGroups" |
1257 | 1257 | :class="{ 'is-invalid': form.errors.has(`groups_${index}`) }" |
1258 | | - @change="updateAssignTos(assignTo)" |
| 1258 | + @change="form.errors.clear(`groups_${index}`);updateAssignTos(assignTo)" |
1259 | 1259 | /> |
1260 | 1260 | <has-error :form="form" :field="`groups_${index}`"/> |
1261 | 1261 | </b-col> |
|
1294 | 1294 | required |
1295 | 1295 | tabindex="0" |
1296 | 1296 | :min="min" |
| 1297 | + class="datepicker" |
1297 | 1298 | :class="{ 'is-invalid': form.errors.has(`available_from_date_${index}`) }" |
1298 | 1299 | /> |
1299 | 1300 | <has-error :form="form" :field="`available_from_date_${index}`"/> |
1300 | 1301 | </b-col> |
1301 | 1302 | <b-col> |
1302 | | - <b-form-timepicker :id="`available_from_time_${index}`" |
1303 | | - v-model="assignTo.available_from_time" |
1304 | | - tabindex="0" |
1305 | | - locale="en" |
1306 | | - :class="{ 'is-invalid': form.errors.has(`available_from_time_${index}`) }" |
| 1303 | + <b-input-group class="time-input-group"> |
| 1304 | + <b-form-input :id="`available_from_time_${index}`" |
| 1305 | + v-model="assignTo.available_from_time" |
| 1306 | + :class="{ 'is-invalid': form.errors.has(`available_from_time_${index}`) }" |
| 1307 | + class="time-input" |
| 1308 | + @input="form.errors.clear(`available_from_time_${index}`)" |
| 1309 | + @shown="form.errors.clear(`available_from_time_${index}`)" |
1307 | 1310 | /> |
| 1311 | + <b-input-group-append> |
| 1312 | + <span class="input-group-text"><b-icon-clock/></span> |
| 1313 | + </b-input-group-append> |
1308 | 1314 | <has-error :form="form" :field="`available_from_time_${index}`"/> |
| 1315 | + </b-input-group> |
1309 | 1316 | </b-col> |
1310 | 1317 | </b-form-row> |
1311 | 1318 | </b-form-group> |
|
1327 | 1334 | tabindex="0" |
1328 | 1335 | :min="min" |
1329 | 1336 | :class="{ 'is-invalid': form.errors.has(`due_${index}`) }" |
| 1337 | + class="datepicker" |
1330 | 1338 | @shown="form.errors.clear(`due_${index}`)" |
1331 | 1339 | /> |
1332 | 1340 | <has-error :form="form" :field="`due_${index}`"/> |
1333 | 1341 | </b-col> |
1334 | 1342 | <b-col> |
1335 | | - <b-form-timepicker :id="`due_time_${index}`" |
1336 | | - v-model="assignTo.due_time" |
1337 | | - tabindex="0" |
1338 | | - locale="en" |
1339 | | - required |
1340 | | - :class="{ 'is-invalid': form.errors.has(`due_time_${index}`) }" |
1341 | | - @shown="form.errors.clear(`due_time_${index}`)" |
| 1343 | + <b-input-group class="time-input-group"> |
| 1344 | + <b-form-input :id="`due_time_${index}`" |
| 1345 | + v-model="assignTo.due_time" |
| 1346 | + required |
| 1347 | + :class="{ 'is-invalid': form.errors.has(`due_time_${index}`) }" |
| 1348 | + class="time-input" |
| 1349 | + @input="form.errors.clear(`due_time_${index}`)" |
| 1350 | + @shown="form.errors.clear(`due_time_${index}`)" |
1342 | 1351 | /> |
1343 | | - <has-error :form="form" :field="`due_time_${index}`"/> |
| 1352 | + <b-input-group-append> |
| 1353 | + <span class="input-group-text"><b-icon-clock/></span> |
| 1354 | + </b-input-group-append> |
| 1355 | + <has-error :form="form" :field="`due_time_${index}`"/> |
| 1356 | + </b-input-group> |
1344 | 1357 | </b-col> |
1345 | 1358 | </b-form-row> |
1346 | 1359 | </b-form-group> |
|
1373 | 1386 | tabindex="0" |
1374 | 1387 | :min="min" |
1375 | 1388 | :class="{ 'is-invalid': form.errors.has(`final_submission_deadline_${index}`) }" |
| 1389 | + class="datepicker" |
1376 | 1390 | :disabled="Boolean(solutionsReleased) && assessmentType !== 'real time'" |
1377 | 1391 | @shown="form.errors.clear(`final_submission_deadline_${index}`)" |
1378 | 1392 | /> |
1379 | 1393 | <has-error :form="form" :field="`final_submission_deadline_${index}`"/> |
1380 | 1394 | </b-col> |
1381 | 1395 | <b-col> |
1382 | | - <b-form-timepicker :id="`final_submission_deadline_time_${index}`" |
1383 | | - v-model="assignTo.final_submission_deadline_time" |
1384 | | - tabindex="0" |
1385 | | - locale="en" |
1386 | | - required |
1387 | | - :class="{ 'is-invalid': form.errors.has(`final_submission_deadline_time_${index}`) }" |
1388 | | - :disabled="Boolean(solutionsReleased) && assessmentType !== 'real time'" |
1389 | | - @shown="form.errors.clear(`final_submission_deadline_time_${index}`)" |
| 1396 | + <b-input-group class="time-input-group"> |
| 1397 | + <b-form-input :id="`final_submission_deadline_time_${index}`" |
| 1398 | + v-model="assignTo.final_submission_deadline_time" |
| 1399 | + required |
| 1400 | + :class="{ 'is-invalid': form.errors.has(`final_submission_deadline_time_${index}`) }" |
| 1401 | + class="time-input" |
| 1402 | + :disabled="Boolean(solutionsReleased) && assessmentType !== 'real time'" |
| 1403 | + @input="form.errors.clear(`final_submission_deadline_time_${index}`)" |
| 1404 | + @shown="form.errors.clear(`final_submission_deadline_time_${index}`)" |
1390 | 1405 | /> |
1391 | | - <has-error :form="form" :field="`final_submission_deadline_time_${index}`"/> |
| 1406 | + <b-input-group-append> |
| 1407 | + <span class="input-group-text"><b-icon-clock/></span> |
| 1408 | + </b-input-group-append> |
| 1409 | + <has-error :form="form" :field="`final_submission_deadline_time_${index}`"/> |
| 1410 | + </b-input-group> |
1392 | 1411 | </b-col> |
1393 | 1412 | </b-form-row> |
1394 | 1413 | </b-form-group> |
@@ -1595,11 +1614,8 @@ export default { |
1595 | 1614 | fixDatePickerAccessibilitysForAssignTos () { |
1596 | 1615 | for (let i = 0; i < this.form.assign_tos.length; i++) { |
1597 | 1616 | fixDatePicker(`available_from_${i}`, `selected_available_from_${i}`) |
1598 | | - fixDatePicker(`available_from_time_${i}`, `selected_available_from_time_${i}`) |
1599 | 1617 | fixDatePicker(`due_date_${i}`, `selected_due_date_${i}`) |
1600 | | - fixDatePicker(`due_time_${i}`, `selected_due_time_${i}`) |
1601 | 1618 | fixDatePicker(`final_submission_deadline_${i}`, `selected_final_submission_deadline_${i}`) |
1602 | | - fixDatePicker(`final_submission_deadline_time_${i}`, `selected_final_submission_deadline_time_${i}`) |
1603 | 1619 | } |
1604 | 1620 | }, |
1605 | 1621 | checkDefaultOpenEndedSubmissionType () { |
@@ -1910,3 +1926,19 @@ export default { |
1910 | 1926 | } |
1911 | 1927 | } |
1912 | 1928 | </script> |
| 1929 | +<style scoped> |
| 1930 | +.datepicker { |
| 1931 | + border-color: #8a8f90; |
| 1932 | +} |
| 1933 | +
|
| 1934 | +.time-input-group .input-group-text { |
| 1935 | + width: 40px; |
| 1936 | + border-left: none; |
| 1937 | + background-color: #ffffff; |
| 1938 | + border-color: #8a8f90; |
| 1939 | +} |
| 1940 | +
|
| 1941 | +.time-input-group .time-input { |
| 1942 | + border-right: none; |
| 1943 | +} |
| 1944 | +</style> |
0 commit comments