From eabbadea39cbe37094ebf7529f30bd8a2e914872 Mon Sep 17 00:00:00 2001
From: Mikko Marttila <13412395+mikmart@users.noreply.github.com>
Date: Wed, 24 Jan 2024 02:18:33 +0000
Subject: [PATCH] Apply column formats to slider labels (#1119)

---
 NEWS.md                        |  2 ++
 inst/htmlwidgets/datatables.js | 20 +++++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/NEWS.md b/NEWS.md
index f21f8ed2..039d74cc 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -10,6 +10,8 @@
 
 - Fixed a bug that caused the date picker widget from the DateTime extension to render incorrectly (thanks, @mikmart, #1116).
 
+- Column formatting now also applies to range labels shown on filter sliders (thanks, @GitChub, @mikmart, #247).
+
 # CHANGES IN DT VERSION 0.31
 
 - Upgraded DataTables version to 1.13.6 (thanks, @stla, #1091).
diff --git a/inst/htmlwidgets/datatables.js b/inst/htmlwidgets/datatables.js
index eb755a0c..6b520490 100644
--- a/inst/htmlwidgets/datatables.js
+++ b/inst/htmlwidgets/datatables.js
@@ -651,7 +651,25 @@ HTMLWidgets.widget({
             }
             r1  = t1; r2 = t2;
           })();
-          $span1.text(formatDate(r1)); $span2.text(formatDate(r2));
+          // format with active column renderer, if defined
+          var colDef = data.options.columnDefs.find(function(def) {
+            return (def.targets === i || inArray(i, def.targets)) && 'render' in def;
+          });
+          var updateSliderText = function(v1, v2) {
+            // we only know how to use function renderers
+            if (colDef && typeof colDef.render === 'function') {
+              var restore = function(v) {
+                v = scaleBack(v, scale);
+                return type !== 'date' ? v : new Date(+v);
+              }
+              $span1.text(colDef.render(restore(v1), 'display'));
+              $span2.text(colDef.render(restore(v2), 'display'));
+            } else {
+              $span1.text(formatDate(v1, false));
+              $span2.text(formatDate(v2, false));
+            }
+          };
+          updateSliderText(r1, r2);
           var updateSlider = function(e) {
             var val = filter.val();
             // turn off filter if in full range