Bug 20729: Update style of datepickers

This patch updates the styling of form fields which are configured to
use the jQueryUI datepicker widget. Some CSS has been added, and the
default datepicker configuration has been changed.

To test, apply the patch, rebuild the staff client CSS file, and clear
your cache if necessary. Test pages which include a datepicker to
confirm that they look correct and work correctly. Some examples:

 - Circulation -> Check out -> Specify due date
 - Patrons -> Add patron -> Date of birth, registration date, expiry
   date fields
 - Serials -> Search subscriptions -> Search results page sidebar
 - Tools -> News -> Add news item

And confirm that this change hasn't adversely affected the calendar
tool:

 - Tools -> Calendar

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Pierre-Marc Thibault <pierre-marc.thibault@inLibro.com>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index f6ce884..56f34da 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -485,6 +485,16 @@ input {
         border-color: #900;
     }
 
+    &.hasDatepicker {
+        background-image: url("../img/famfamfam/silk/calendar.png");
+        background-position-x: right;
+        background-position-y: center;
+        background-repeat: no-repeat;
+        border-style: inset outset outset inset;
+        border-width: 1px;
+        padding-right: 18px;
+    }
+
     &.submit {
         @include default-button;
 

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc
index 9314a75..e6f12dd 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc
@@ -1,6 +1,5 @@
 [% USE Koha %]
-<script type="text/javascript">
-//<![CDATA[
+<script>
 
 var debug    = "[% debug | html %]";
 var dformat  = "[% dateformat | html %]";
@@ -161,11 +160,9 @@ function(value, element, params) {
 $(document).ready(function(){
 
 $.datepicker.setDefaults({
-        showOn: "both",
+        showOn: "focus",
         changeMonth: true,
         changeYear: true,
-        buttonImage: '[% interface | html %]/[% theme | html %]/img/famfamfam/silk/calendar.png',
-        buttonImageOnly: true,
         showButtonPanel: true,
         showOtherMonths: true,
         selectOtherMonths: true,
@@ -203,5 +200,4 @@ $("#dateofbirth").datepicker({
         if ( ! is_valid_date( $(this).val() ) ) {$(this).val("");}
     });
 });
-//]]>
 </script>