calendarPro: added locale + input value in month/year type

dreamRs · Feb 4, 2025 · b828332 · b828332
1 parent d6f43ad
commit b828332
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 13 deletions.
diff --git a/R/calendar-pro-input.R b/R/calendar-pro-input.R
@@ -41,6 +41,8 @@ html_dependency_calendar_pro <- function() {
 #' @param selectionTimeMode 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 selectedTime Initial time value.
 #' @param ... Other settings passed to Slim Select JAvaScript method.
+#' @param locale This parameter sets the language localization of the calendar. You can specify a language label according to BCP 47 or provide arrays of month and weekday names.
+#'  See https://vanilla-calendar.pro/docs/reference/settings#locale.
 #' @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')
@@ -81,6 +83,7 @@ calendarProInput <- function(inputId,
                              selectionTimeMode = NULL,
                              selectedTime = NULL,
                              ...,
+                             locale = NULL,
                              format = "%Y-%m-%d",
                              positionToInput = "auto",
                              selectedTheme = "light",
@@ -136,7 +139,8 @@ calendarProInput <- function(inputId,
     disableDates = list1(disableDates),
     selectionTimeMode = selectionTimeMode,
     selectedTime = selectedTime,
-    firstWeekday = firstWeekday
+    firstWeekday = firstWeekday,
+    locale = locale
   ))
   options <- modifyList(options, list(...))
   config <- list(

diff --git a/examples/calendar-pro.R b/examples/calendar-pro.R
@@ -18,7 +18,6 @@ ui <- fluidPage(
       calendarProInput(
         inputId = "cal3",
         label = "Calendar with initial value:",
-        format = "%d/%m/%Y",
         value = Sys.Date() + 1,
         width = "100%"
       ),
@@ -37,7 +36,16 @@ ui <- fluidPage(
         enableWeekNumbers = TRUE,
         width = "100%"
       ),
-      verbatimTextOutput("res7")
+      verbatimTextOutput("res7"),
+      calendarProInput(
+        inputId = "cal9",
+        label = "Calendar with format and locale:",
+        format = "%d/%m/%Y",
+        locale = "fr",
+        value = Sys.Date() + 1,
+        width = "100%"
+      ),
+      verbatimTextOutput("res9"),
     ),
     column(
       width = 6,
@@ -89,6 +97,7 @@ server <- function(input, output, session) {
   output$res6 <- renderPrint(input$cal6)
   output$res7 <- renderPrint(input$cal7)
   output$res8 <- renderPrint(input$cal8)
+  output$res9 <- renderPrint(input$cal9)
 
 }
 

diff --git a/inst/examples/calendar-pro/value/app.R b/inst/examples/calendar-pro/value/app.R
@@ -67,8 +67,10 @@ ui <- fluidPage(
         placeholder = "Select a year",
         type = "year",
         selectionMonthsMode = FALSE,
+        selectedMonth = 0,
         width = "100%",
-        parseValue = parseValue
+        parseValue = parseValue,
+        format = "%Y"
       ),
       verbatimTextOutput("res11")
     ),

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
@@ -9,9 +9,8 @@ import dayjs from "dayjs";
 function changeToInputMonth(fmt) {
   return function(self) {
     if (!self.context.inputElement) return;
-    console.log(self);
-    if (self.context.selectedMonth[0]) {
-      var date = self.context.selectedYear[0] + "-" + self.context.selectedMonth[0] + "-01";
+    if (self.context.selectedMonth) {
+      var date = self.context.selectedYear + "-" + self.context.selectedMonth + "-01";
       self.context.inputElement.value = dayjs(date).format(fmt);
       //self.hide();
     } else {
@@ -20,10 +19,22 @@ function changeToInputMonth(fmt) {
   };
 }
 
-function changeToInputSingle(fmt) {
+function changeToInputYear(fmt) {
   return function(self) {
     if (!self.context.inputElement) return;
+    if (self.context.selectedYear) {
+      var date = self.context.selectedYear + "01-01";
+      self.context.inputElement.value = dayjs(date).format(fmt);
+      //self.hide();
+    } else {
+      self.context.inputElement.value = "";
+    }
+  };
+}
 
+function changeToInputSingle(fmt) {
+  return function(self) {
+    if (!self.context.inputElement) return;
     if (self.context.selectedDates[0]) {
       var date = self.context.selectedDates[0];
       if (self.context?.selectedTime) {
@@ -151,9 +162,15 @@ $.extend(calendarProBinding, {
       $(el).trigger("change");
     }
     if (options.type == "month") {
-      options.onClickMonth = updateValueOnChange;
+      options.onClickMonth = function(self) {
+        updateValueOnChange(self);
+        changeToInputMonth(config.format)(self);
+      };
     } else if (options.type == "year") {
-      options.onClickYear = updateValueOnChange;
+      options.onClickYear = function(self) {
+        updateValueOnChange(self);
+        changeToInputYear(config.format)(self);
+      };
     } else {
       options.onClickDate = updateValueOnChange;
       options.onChangeTime = updateValueOnChange;