UI elements for selecting date and time (not just date) in shiny

Question

In the past I have used a combination of dateInput and a slider to get date and hour for my shiny app. I was wondering if there is a better option available now as I need to col

Answer 1

Its been quite sometime since this question has been posed but I'm guessing it remains relevant since I haven't been able to find a satisfactory answer to retrieve time inputs.

Below are 3 examples to retrieve a time input.

1. The first is what I believe most people, myself included, had been or are looking for. A shiny like input time object for time input retrieval. It uses the HTML time input:< input id='ui_time' type='time'> followed by some simple javascript function to retrieve the input data before passing to the Shiny.onInputChange() function to pass as an input to the Shiny server.

   <input id="ui_time" type="time">

   '<script> document.getElementById("ui_time").onchange = function() { var time = document.getElementById("ui_time").value; Shiny.onInputChange("input_html", time); }; </script>'

2. The second, which is probably not desired but sticks to the use of sliders, is a simple but cumbersome hack to create 2 sliders, one to register the time and another to register the minutes before concatenating the 2 results to return a proper time input.

   sliderInput("slider_hours", "Hours:", min=0, max=23, value=0, step = 1), sliderInput("slider_mins", "Mins:",min = 0, max = 59, value = 0, step = 1)

3. Lastly, if date and time formats are required, some may not be aware, as I had not, that the slider does accept date time inputs as POSIXt objects. In this case, a slider input can be constructed as follows:

   sliderInput("slider_datetime", "Date & Time:", min=as.POSIXlt("2010-01-01 00:00:00", "GMT"), max=as.POSIXlt("2020-01-01 23:59:59", "GMT"), value=as.POSIXlt("2010-01-01 00:00:00", "GMT"), timezone = "GMT")

For those less familiar with shiny or html, you can view a functional sample code at my github: https://github.com/krenova/Shiny_TimeInput/blob/master/app.R

or simply run the following gist in R:

runGist('https://gist.github.com/krenova/fc184de17892905182a422c96117e989')

I'm new to shiny and html, picked it up just last week, so please bear in mind that I may not have done things in the most appropriate manner. In any case, I hope the above saves someone hours of time!

Answer 2

You can now use the package shinyTime to intuitively input time into a Shiny App. At the moment it works with separate numeric inputs, that together make up time in the %H:%M or %H:%M:%S format. Getting and setting the value in R is done with a DateTime object.

Example usage (also see the example on shinyapps):

library(shiny)
library(shinyTime)

ui <- fluidPage(

   titlePanel("shinyTime Example App"),

   sidebarLayout(
      sidebarPanel(
        timeInput("time_input", "Enter time", value = strptime("12:34:56", "%T"))
      ),

      mainPanel(
        textOutput("time_output")
      )
   )
)

server <- function(input, output, session) {
  output$time_output <- renderText(strftime(input$time_input, "%T"))
}

shinyApp(ui, server)

Disclaimer: I am the package author. Feedback and suggestions most welcome!

Answer 3

I ran into the same problem, and I ended up making it a text field. I pre-populated the text field to show the users the proper format, and added checking (using try to make sure the field was properly formatted before doing anything.

From UI.R

textInput("fromDatetime", "From:", value = "9999-99-99 99:99:99" )

And then in server.R

  fromDTtry = try(as.POSIXct(fromDatetime))

  if (!(is.POSIXct(fromDTtry))) {
    return ("From date/time not formatted correctly")
  } else {
... }

I hope this helps. Hopefully Shiny will get around to native date/time support soon.