use own template for datepicker for Icons

app/assets/javascripts/app/controllers/_ui_element/date.coffee

@@ -10,6 +10,9 @@ class App.UiElement.date
       attribute: attribute
     ) )
 
+    # set our custom template
+    $.fn.datepicker.defaults.template = App.view('generic/datepicker')()
+
     # apply date widgets
     $.fn.datepicker.dates['custom'] =
       days: [App.i18n.translateInline('Sunday'), App.i18n.translateInline('Monday'), App.i18n.translateInline('Tuesday'), App.i18n.translateInline('Wednesday'), App.i18n.translateInline('Thursday'), App.i18n.translateInline('Friday'), App.i18n.translateInline('Saturday'), App.i18n.translateInline('Sunday')],

app/assets/javascripts/app/controllers/_ui_element/datetime.coffee

@@ -10,6 +10,9 @@ class App.UiElement.datetime
       attribute: attribute
     ) )
 
+    # set our custom template
+    $.fn.datepicker.defaults.template = App.view('generic/datepicker')()
+
     # apply date widgets
     $.fn.datepicker.dates['custom'] =
       days: [App.i18n.translateInline('Sunday'), App.i18n.translateInline('Monday'), App.i18n.translateInline('Tuesday'), App.i18n.translateInline('Wednesday'), App.i18n.translateInline('Thursday'), App.i18n.translateInline('Friday'), App.i18n.translateInline('Saturday'), App.i18n.translateInline('Sunday')],

app/assets/javascripts/app/lib/bootstrap/bootstrap-datepicker.js

@@ -24,7 +24,7 @@
 	
 	Zammad Edits:
 		- fix todayBtn toggle of display none and block: toggleClass instead
-		- [ICONS]: hardwire our icons
+		- allow custom template as options parameter
 
  */
 
@@ -122,7 +122,9 @@
 		if (this.component && this.component.length === 0)
 			this.component = false;
 
-		this.picker = $(DPGlobal.template);
+		console.log("bootstrap", this.o.template);
+
+		this.picker = $(this.o.template || DPGlobal.template);
 		this._buildEvents();
 		this._attachEvents();
 
@@ -1868,9 +1870,9 @@
 			                '<th colspan="7" class="datepicker-title"></th>'+
 			              '</tr>'+
 							'<tr>'+
-								'<th class="prev"><svg class="icon icon-arrow-left"><use xlink:href="#icon-arrow-left"/></svg></th>'+
+								'<th class="prev">&#171;</th>'+
 								'<th colspan="5" class="datepicker-switch"></th>'+
-								'<th class="next"><svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-right"/></svg></th>'+
+								'<th class="next">&#187;</th>'+
 							'</tr>'+
 						'</thead>',
 		contTemplate: '<tbody><tr><td colspan="7"></td></tr></tbody>',

app/assets/javascripts/app/views/generic/datepicker.jst.eco

@@ -0,0 +1,71 @@
+<div class="datepicker">
+    <div class="datepicker-days">
+        <table class=" table-condensed">
+            <thead>
+                <tr>
+                    <th colspan="7" class="datepicker-title"></th>
+                </tr>
+                <tr>
+                    <th class="prev"><%- @Icon('arrow-left') %></th>
+                    <th colspan="5" class="datepicker-switch"></th>
+                    <th class="next"><%- @Icon('arrow-right') %></th>
+                </tr>
+            </thead>
+        <tbody></tbody>
+        <tfoot>
+        <tr>
+            <th colspan="7" class="today"></th>
+        </tr>
+        <tr>
+            <th colspan="7" class="clear"></th>
+        </tr>
+        </tfoot>
+    </table>
+  </div>
+  <div class="datepicker-months">
+      <table class="table-condensed">
+          <thead>
+              <tr>
+                  <th colspan="7" class="datepicker-title"></th>
+              </tr>
+              <tr>
+                  <th class="prev"><%- @Icon('arrow-left') %></th>
+                  <th colspan="5" class="datepicker-switch"></th>
+                  <th class="next"><%- @Icon('arrow-right') %></th>
+              </tr>
+          </thead>
+          <tbody><tr><td colspan="7"></td></tr></tbody>
+          <tfoot>
+          <tr>
+              <th colspan="7" class="today"></th>
+          </tr>
+          <tr>
+              <th colspan="7" class="clear"></th>
+          </tr>
+          </tfoot>
+      </table>
+  </div>
+  <div class="datepicker-years">
+      <table class="table-condensed">
+          <thead>
+              <tr>
+                  <th colspan="7" class="datepicker-title"></th>
+              </tr>
+              <tr>
+                  <th class="prev"><%- @Icon('arrow-left') %></th>
+                  <th colspan="5" class="datepicker-switch"></th>
+                  <th class="next"><%- @Icon('arrow-right') %></th>
+              </tr>
+          </thead>
+          <tbody><tr><td colspan="7"></td></tr></tbody>
+          <tfoot>
+          <tr>
+              <th colspan="7" class="today"></th>
+          </tr>
+          <tr>
+              <th colspan="7" class="clear"></th>
+          </tr>
+          </tfoot>
+      </table>
+  </div>
+</div>