javascript - dateInput not working on DT in shiny

Question

I'm trying to create a DT with several inputs in Shiny. The columns with selectInput and numericInput work fine, but the one with dateInputs doesn't. It's like the input$date_n does not exist at all.

I know close to nothing about JS, and I think the problem is probbaly in the drawCallback. I just copied this piece of code from another question in here, and it was working fine until I tried to use a dateInput.

Below, there's a small code reproducing the problem. The first two outputs are OK, but the third just doesnst show up.

library(shiny)
library(DT)

ui = fluidPage(title = 'Test',
               DTOutput('table'),
               verbatimTextOutput('chosen_letter'),
               verbatimTextOutput('chosen_value'),
               verbatimTextOutput('chosen_date'))

server <- shinyServer(function(input, output, session) {
output$table = renderDT({

sel_letter = paste0("<select id='letter_", 1:3, "'>
                    <option value='a' selected='selected'>A</option>
                    <option value='b'>B</option>
                    <option value='c'>C</option>
                    </select>")

sel_value = paste0("<input id='value_", 1:3, "' class='shiny-bound-input' 
                    value = '", 1:3, "' type='number' step = '1'>")

sel_date = paste0("<input id='date_", 1:3, "' type='date' value='2018-07-31'
                   class='shiny-bound-input' min='2018-07-31' max='2018-12-31'>")

datatable(data.frame(Letter = sel_letter, Value = sel_value, Date = sel_date), 
          rownames = F, selection = 'none', escape = F,
          options = list(drawCallback = JS('function(settings) {
                                           Shiny.bindAll(this.api().table().node());}'),
                         dom = 't', ordering = F, pageLength = 15))
})

output$chosen_letter = renderText({c(input$letter_1, input$letter_2, input$letter_3)})

output$chosen_value = renderText({sum(input$value_1, input$value_2, input$value_3)})

output$chosen_date = renderText({input$date_1})

})

shinyApp(ui, server)

Answer 1

dateInput

library(shiny)
library(DT)

ui <- fluidPage(

  # define a hidden dateInput in order that Shiny loads the dependencies
  div(style = "display: none;",
    dateInput("x", label = NULL)
  ),

  DTOutput("table")
)


js <- c(
  "function(settings){",
  "  $('#calendar').bsDatepicker({",
  "    format: 'yyyy-mm-dd',",
  "    todayHighlight: true",
  "  });",
  "}"
) # available options: https://bootstrap-datepicker.readthedocs.io/en/latest/


server <- function(input, output, session){

  output[["table"]] <- renderDT({
    dat <- data.frame(
      V1 = "A",
      V2 = 99, 
      V3 = '<input id="calendar" type="text" class="form-control" value = "2019-03-08"/>',
      stringsAsFactors = FALSE
    )
    datatable(dat, escape = FALSE,
              options = 
                list(
                  initComplete = JS(js),
                  preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
                  drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')
                )
    )
  })

}


shinyApp(ui, server)

dateRangeInput

html <- '
<div class="input-daterange input-group" id="calendar">
    <input type="text" class="input-sm form-control" name="start" value = "2019-03-08" />
    <span class="input-group-addon">to</span>
    <input type="text" class="input-sm form-control" name="end" value = "2019-03-12" />
</div>'

  output[["table"]] <- renderDT({
    dat <- data.frame(
      V1 = "A",
      V2 = 99, 
      V3 = html,
      stringsAsFactors = FALSE
    )
    datatable(dat, escape = FALSE,
              options = 
                list(
                  initComplete = JS(js),
                  preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
                  drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')
                )
    )
  })