calendarProInput: display value in input field

dreamRs · Nov 13, 2024 · abe4a2d · abe4a2d
1 parent 55362f4
commit abe4a2d
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 29 deletions.
diff --git a/R/calendar-pro-input.R b/R/calendar-pro-input.R
@@ -39,6 +39,7 @@ html_dependency_calendar_pro <- function() {
 #' @param time This parameter enables time selection. You can also specify the time format using a boolean value or a number: 24-hour or 12-hour format.
 #' @param timeValue Initial time value.
 #' @param ... Other settings passed to Slim Select JAvaScript method.
+#' @param format Format to use when displaying date in input field, if an initial value is provided it must be a date so that the format apply.
 #' @param positionToInput This parameter specifies the position of the calendar relative to input,
 #'  if the calendar is initialized with the input parameter. Possible values: 'auto' | 'center' | 'left' | 'right' | c('bottom' | 'top', 'center' | 'left' | 'right')
 #' @param theme This parameter determines the theme of the calendar : 'light' or 'dark'.
@@ -78,6 +79,7 @@ calendarProInput <- function(inputId,
                              time = NULL,
                              timeValue = NULL,
                              ...,
+                             format = "%Y-%m-%d",
                              positionToInput = "auto",
                              theme = "light",
                              placeholder = NULL,
@@ -103,14 +105,14 @@ calendarProInput <- function(inputId,
     jumpToSelectedDate = jumpToSelectedDate,
     toggleSelected = toggleSelected,
     weekNumbersSelect = weekNumbersSelect,
-    parseValue = parseValue
+    parseValue = parseValue,
+    format = to_dayjs_fmt(format)
   )
   config$input <- input
   config$settings$selection$time <- time
   config$settings$selected$time <- timeValue
   if (!is.null(value))
-    value <- format(value, format = "%Y-%m-%d")
-  config$settings$selected$dates <- list1(value)
+    config$settings$selected$dates <- list1(format(value, format = "%Y-%m-%d"))
   if (type == "multiple")
     config$settings$selection$day <- "multiple"
   if (type == "range")
@@ -134,7 +136,15 @@ calendarProInput <- function(inputId,
       class = "form-control calendar-pro-element",
       readonly = NA,
       placeholder = placeholder,
-      value = value
+      value = if (!is.null(value)) {
+        if (type == "multiple") {
+          paste(format(value, format = format), collapse = " \u2014 ")
+        } else if (type == "range") {
+          paste(format(value[1], format = format), format(value[length(value)], format = format), sep = " \u2014 ")
+        } else {
+          format(value, format = format)
+        }
+      }
     )
   } else {
     tags$div(

diff --git a/R/utils.R b/R/utils.R
@@ -201,3 +201,29 @@ genId <- function(bytes = 12) {
 }
 
 
+
+
+to_dayjs_fmt <- function(fmt) {
+  ref <- list(
+    "%Y" = "YYYY",
+    "%y" = "YY",
+    "%m" = "MM",
+    "%b" = "MMM",
+    "%B" = "MMMM",
+    "%e" = "D",
+    "%d" = "DD",
+    "%w" = "d",
+    "%a" = "ddd",
+    "%A" = "dddd",
+    "%H" = "HH",
+    "%I" = "hh",
+    "%M" = "mm",
+    "%S" = "ss",
+    "%R" = "Z"
+  )
+  for (i in seq_along(ref)) {
+    fmt <- gsub(pattern = names(ref)[i], replacement = ref[[i]], x = fmt, fixed = TRUE)
+  }
+  return(fmt)
+}
+
diff --git a/examples/calendar-pro.R b/examples/calendar-pro.R
@@ -18,6 +18,7 @@ ui <- fluidPage(
       calendarProInput(
         inputId = "cal3",
         label = "Calendar with initial value:",
+        format = "%d/%m/%Y",
         value = Sys.Date() + 1,
         width = "100%"
       ),
@@ -57,7 +58,7 @@ ui <- fluidPage(
       verbatimTextOutput("res4"),
       calendarProInput(
         inputId = "cal6",
-        label = "Calendar  without input field:",
+        label = "Calendar (range) without input field:",
         type = "range",
         months = 3,
         input = FALSE,

diff --git a/inst/examples/calendar-pro/value/app.R b/inst/examples/calendar-pro/value/app.R
@@ -80,7 +80,8 @@ ui <- fluidPage(
         timeValue = "10:00",
         placeholder = "Select date and time",
         width = "100%",
-        parseValue = parseValue
+        parseValue = parseValue,
+        format = "YYYY-MM-DD HH:mm"
       ),
       verbatimTextOutput("res6")
     )

diff --git a/inst/packer/calendar-pro.js b/inst/packer/calendar-pro.js
diff --git a/man/calendarProInput.Rd b/man/calendarProInput.Rd
diff --git a/srcjs/inputs/vanilla-calendar-pro.js b/srcjs/inputs/vanilla-calendar-pro.js
@@ -3,29 +3,47 @@ import "shiny";
 import { updateLabel } from "../modules/utils";
 import VanillaCalendar from "vanilla-calendar-pro";
 import "vanilla-calendar-pro/build/vanilla-calendar.min.css";
+import dayjs from "dayjs";
 
 
-function changeToInputSingle(e, self) {
-  if (!self.HTMLInputElement) return;
-  if (self.selectedDates[0]) {
-    self.HTMLInputElement.value = self.selectedDates[0];
-    // if you want to hide the calendar after picking a date
-    //self.hide();
-  } else {
-    self.HTMLInputElement.value = "";
-  }
+function changeToInputSingle(fmt) {
+  return function(e, self) {
+    if (!self.HTMLInputElement) return;
+    if (self.selectedDates[0]) {
+      self.HTMLInputElement.value = dayjs(self.selectedDates[0]).format(fmt);
+      //self.hide();
+    } else {
+      self.HTMLInputElement.value = "";
+    }
+  };
 }
 
-function changeToInputMultiple(e, self) {
-  if (!self.HTMLInputElement) return;
-  if (self.selectedDates[1]) {
-    self.selectedDates.sort((a, b) => +new Date(a) - +new Date(b));
-    self.HTMLInputElement.value = `${self.selectedDates[0]} — ${self.selectedDates[self.selectedDates.length - 1]}`;
-  } else if (self.selectedDates[0]) {
-    self.HTMLInputElement.value = self.selectedDates[0];
-  } else {
-    self.HTMLInputElement.value = "";
-  }
+function changeToInputRange(fmt) {
+  return function(e, self) {
+    if (!self.HTMLInputElement) return;
+    if (self.selectedDates[1]) {
+      self.selectedDates.sort((a, b) => +new Date(a) - +new Date(b));
+      var fmtdates = self.selectedDates.map(x => dayjs(x).format(fmt));
+      self.HTMLInputElement.value = `${fmtdates[0]} \u2014 ${fmtdates[fmtdates.length - 1]}`;
+    } else if (self.selectedDates[0]) {
+      self.HTMLInputElement.value = dayjs(self.selectedDates[0]).format(fmt);
+    } else {
+      self.HTMLInputElement.value = "";
+    }
+  };
+}
+
+function changeToInputMultiple(fmt) {
+  return function(e, self) {
+    if (!self.HTMLInputElement) return;
+    if (self.selectedDates[0]) {
+      var fmtdates = self.selectedDates.map(x => dayjs(x).format(fmt));
+      self.HTMLInputElement.value = fmtdates.join(" \u2014 ");
+      //self.hide();
+    } else {
+      self.HTMLInputElement.value = "";
+    }
+  };
 }
 
 
@@ -116,12 +134,17 @@ $.extend(calendarProBinding, {
           )
         );
         $(el).trigger("change");
+        changeToInputRange(config.format)(event, self);
       };
     }
     if (config.type == "multiple") {
-      config.actions.changeToInput = changeToInputMultiple;
+      if (config.settings.selection.day == "multiple-ranged") {
+        config.actions.changeToInput = changeToInputRange(config.format);
+      } else {
+        config.actions.changeToInput = changeToInputMultiple(config.format);
+      }
     } else {
-      config.actions.changeToInput = changeToInputSingle;
+      config.actions.changeToInput = changeToInputSingle(config.format);
     }
     const calendar = new VanillaCalendar(input, config);
     calendar.init();