Bug 16112: (follow-up) Form style improvements, clear date

This follow-up makes some markup and style improvements in order to make
the renew form more consistent with similar forms like checkout and
check-in.

It also adds a "Clear" button for the datepicker field, matching similar
date inputs.

To test, apply the patch and go to Circulation -> Renew.

 - With or without the  SpecifyDueDate system preference enabled the
   form should look correct.
 - With the SpecifyDueDate preference enabled you should see the date
   form below the barcode input field.
 - Select a date and test that the "Clear" button works to clear it.
 - Compare to the check-in page to confirm that they look consistent
   with each other.

Signed-off-by: Marco Abi-Ramia <marco.abi-ramia@inlibro.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This commit is contained in:
Owen Leonard 2020-08-06 12:41:23 +00:00 committed by Jonathan Druart
parent 9189dd4f71
commit 41fe5b41f9

View file

@ -167,21 +167,29 @@
<form method="post" action="/cgi-bin/koha/circ/renew.pl" autocomplete="off" >
<fieldset>
<legend>Renew</legend>
<h2>Renew</h2>
<div>
<label for="barcode" class="hint">Enter item barcode: </label>
</div>
<input name="barcode" id="barcode" size="14" class="barcode focus" type="text" />
<button type="submit" class="btn btn-default">Submit</button>
[% IF Koha.Preference('SpecifyDueDate') %]
<label for="hard_due_date">Hard due date [% INCLUDE 'date-format.inc' %]:</label>
<input type="text" size="20" id="hard_due_date" name="hard_due_date" value="[% hard_due_date | $KohaDates with_hours => 1 %]" />
<br/>
<div class="circ-settings show">
<div class="date-select" id="renew_date_override_fields">
<div><label for="hard_due_date" class="hint">Specify due date [% INCLUDE 'date-format.inc' %]:</label></div>
<input type="text" size="20" id="hard_due_date" name="hard_due_date" value="[% hard_due_date | $KohaDates with_hours => 1 %]" />
<button type="button" class="action btn btn-default btn-xs" id="cleardate" name="cleardate">Clear</button>
</div> <!-- /.date-select -->
</div>
[% END %]
<label for="barcode">Enter item barcode: </label>
<input name="barcode" id="barcode" size="14" class="focus" type="text" />
<input type="submit" class="submit" value="Submit" />
</fieldset>
</form>
[% END %]
@ -233,6 +241,11 @@
}).on("change", function(e, value) {
if ( ! is_valid_date( $(this).val() ) ) {$(this).val("");}
});
$("#cleardate").on("click",function(e){
e.preventDefault();
this.form.hard_due_date.value = '';
this.form.barcode.focus();
});
[% END %]
});