added timeInput()

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: shinyWidgets
 Title: Custom Inputs Widgets for Shiny
-Version: 0.8.2.9100
+Version: 0.8.2.9200
 Authors@R: c(
   person("Victor", "Perrier", email = "victor.perrier@dreamrs.fr", role = c("aut", "cre", "cph")),
   person("Fanny", "Meyer", role = "aut"),

NAMESPACE

@@ -86,6 +86,7 @@ export(statiCard)
 export(switchInput)
 export(textInputAddon)
 export(textInputIcon)
+export(timeInput)
 export(timepickerOptions)
 export(toggleDropdownButton)
 export(tooltipOptions)
@@ -118,6 +119,7 @@ export(updateSpectrumInput)
 export(updateStatiCard)
 export(updateSwitchInput)
 export(updateTextInputIcon)
+export(updateTimeInput)
 export(updateTreeInput)
 export(updateVerticalTabsetPanel)
 export(updateVirtualSelect)

NEWS.md

@@ -1,12 +1,13 @@
 shinyWidgets 0.8.3
 ======================
 
-* Updated virtual-select-plugin to 1.0.42 and inclued tooltip plugin.
+* Updated virtual-select-plugin to 1.0.42 and inclued tooltip plugin, [#674](https://github.com/dreamRs/shinyWidgets/pull/674) by [@stla](https://github.com/stla).
 * Updated air-datepicker to 3.5.0.
 * Updated noUiSlider to 15.7.1.
 * `updateNoUiSliderInput()`: added `disableHandlers` and `enableHandlers` to disable/enable specific handlers.
 * `updateVirtualSelect()` : added `open` argument to open/close the dropdown.
 * `virtualSelectInput()` added `updateOn` argument to to set when input is updated: on change or on close.
+* New widget `timeInput()` to select time using browser input.
 
 
 shinyWidgets 0.8.2

R/dependencies.R

@@ -535,3 +535,14 @@ html_dependency_input_icons <- function() {
   )
 }
 
+
+
+html_dependency_input_time <- function() {
+  htmlDependency(
+    name = "sw-input-time",
+    version = packageVersion("shinyWidgets"),
+    src = c(file = "packer"),
+    package = "shinyWidgets",
+    script = "input-time.js"
+  )
+}

R/input-time.R

@@ -0,0 +1,69 @@
+
+#' @title Time input
+#'
+#' @description
+#' This widget allow to select hour and minute using the default browser time input.
+#' See [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time) for more.
+#'
+#'
+#' @param inputId The input slot that will be used to access the value.
+#' @param label Display label for the control, or NULL for no label.
+#' @param value Initial value, foramtted as `"HH:MM"` or `"HH:MM:SS"`.
+#' @param min,max Minimal and maximal value, use same format as in `value`.
+#' @param step It takes an integer value that equates to the number of seconds you want to increment by;
+#'  the default value is 60 seconds, or one minute. If you specify a value of less than 60 seconds (1 minute),
+#'  the time input will show a seconds input area alongside the hours and minutes.
+#'  This property has some strange effects across browsers, so is not completely reliable.
+#' @param width The width of the input, e.g. `400px`, or `100%`.
+#'
+#' @return A time input control that can be added to a UI definition.
+#' @export
+#'
+#' @name time-input
+#'
+#' @example examples/time-input.R
+timeInput <- function(inputId,
+                      label,
+                      value = NULL,
+                      min = NULL,
+                      max = NULL,
+                      step = NULL,
+                      width = NULL) {
+  tags$div(
+    class = "form-group shiny-input-container",
+    label_input(inputId, label),
+    style = css(width = validateCssUnit(width)),
+    tags$input(
+      id = inputId,
+      type = "time",
+      class = "form-control sw-time-input",
+      value = value,
+      min = min,
+      max = max,
+      step = step
+    ),
+    html_dependency_input_time()
+  )
+}
+
+#' @param session Default Shiny session.
+#' @export
+#'
+#' @rdname time-input
+updateTimeInput <- function(session = getDefaultReactiveDomain(),
+                            inputId,
+                            label = NULL,
+                            value = NULL,
+                            min = NULL,
+                            max = NULL,
+                            step = NULL) {
+  message <- dropNulls(list(
+    label = label,
+    value = value,
+    min = min,
+    max = max,
+    step = step
+  ))
+  session$sendInputMessage(inputId, message)
+}
+

examples/time-input.R

@@ -0,0 +1,60 @@
+
+library(shiny)
+library(shinyWidgets)
+
+ui <- fluidPage(
+  tags$h2("Time Input"),
+  fluidRow(
+    column(
+      width = 6,
+      timeInput(
+        inputId = "time1",
+        label = "Time:"
+      ),
+      verbatimTextOutput("res1"),
+      timeInput(
+        inputId = "time2",
+        label = "Time (default value):",
+        value = "09:30"
+      ),
+      verbatimTextOutput("res2"),
+      timeInput(
+        inputId = "time3",
+        label = "Time (with seconds):",
+        step = 1
+      ),
+      verbatimTextOutput("res3")
+    ),
+    column(
+      width = 6,
+      timeInput(inputId = "time4", label = "Time:"),
+      verbatimTextOutput("res4"),
+      numericInput("up_h", "Update hour;", value = 0),
+      numericInput("up_m", "Update minute;", value = 0)
+    )
+  )
+)
+
+server <- function(input, output, session) {
+
+  output$res1 <- renderPrint(input$time1)
+  output$res2 <- renderPrint(input$time2)
+  output$res3 <- renderPrint(input$time3)
+  output$res4 <- renderPrint(input$time4)
+
+  observe({
+    updateTimeInput(
+      inputId = "time4",
+      value = paste(
+        # Hour and minute need to be a field of minimum width 2,
+        # with zero-padding on the left
+        sprintf("%02d", input$up_h),
+        sprintf("%02d", input$up_m),
+        sep = ":"
+      )
+    )
+  })
+}
+
+if (interactive())
+  shinyApp(ui, server)

srcjs/config/entry_points.json

@@ -7,5 +7,6 @@
   "tree": "./srcjs/inputs/tree.js",
   "colorpickr": "./srcjs/inputs/colorpickr.js",
   "buttons-group": "./srcjs/inputs/buttons-group.js",
-  "input-icons": "./srcjs/inputs/input-icons.js"
+  "input-icons": "./srcjs/inputs/input-icons.js",
+  "input-time": "./srcjs/inputs/input-time.js"
 }

srcjs/inputs/input-time.js

@@ -0,0 +1,54 @@
+import $ from "jquery";
+import "shiny";
+import { updateLabel } from "../modules/utils";
+
+var timeInputBinding = new Shiny.InputBinding();
+$.extend(timeInputBinding, {
+  find: function find(scope) {
+    return $(scope).find(".sw-time-input");
+  },
+  getValue: function getValue(el) {
+    return el.value;
+  },
+  setValue: function setValue(el, value) {
+    el.value = value;
+  },
+  subscribe: function subscribe(el, callback) {
+    $(el).on("change.timeInputBinding", function(event) {
+      callback();
+    });
+  },
+  unsubscribe: function unsubscribe(el) {
+    $(el).off(".timeInputBinding");
+  },
+  receiveMessage: function receiveMessage(el, data) {
+    if (data.hasOwnProperty("label")) {
+      var label = $("#" + el.id + "-label");
+      updateLabel(data.label, label);
+    }
+    if (data.hasOwnProperty("value")) this.setValue(el, data.value);
+    if (data.hasOwnProperty("min")) el.min = data.min;
+    if (data.hasOwnProperty("max")) el.max = data.max;
+    if (data.hasOwnProperty("step")) el.step = data.step;
+    $(el).trigger("change");
+  },
+  getState: function getState(el) {
+    return {
+      label: this._getLabelNode(el).text(),
+      value: el.value,
+      placeholder: el.placeholder
+    };
+  },
+  getRatePolicy: function getRatePolicy() {
+    return {
+      policy: "debounce",
+      delay: 250
+    };
+  },
+  _getLabelNode: function _getLabelNode(el) {
+    return $(el)
+      .parent()
+      .find('label[for="' + Shiny.$escape(el.id) + '"]');
+  }
+});
+Shiny.inputBindings.register(timeInputBinding, "shinyWidgets.timeInput");