Disable keyboard input in daterange shiny

Question

I want to do a simple thing but I could not find a way to do that. I want to disable the possibility to modify a date range with the keyboard. The user experience would be better if modifying the date with the keyboard was not possible. If you want to select a date that is 10 months before now and you press a key on your keyboard then you are back at the current month which is disturbing.

Here is a sample code.

library('shiny')

shinyApp(
  ui = fluidPage(
    fluidRow(
      column(4, 
        dateRangeInput("dates", label = h3("Date range")),
        verbatimTextOutput("datesOut")
      )
    )
  ), 
  server = function(input, output) {
    output$datesOut <- renderPrint({ input$dates })
  }
)

I want to make it impossible to use the keyboard to modify the input. I saw this question related to that but I do not know how to add onkeydown="return false" to shiny::daterange()

Thank you

Answer 1

Here is the solution that I found for those interested.

I just needed to add a bit of javascript. I also make the datepicker close after a date is chosen.

library('shiny')

shinyApp(
  ui = fluidPage(
    includeScript("code.js"),
    fluidRow(
      column(4, 
             dateRangeInput("dates", label = h3("Date range")),
             verbatimTextOutput("datesOut")
      )
    )
  ), 
  server = function(input, output) {
    output$datesOut <- renderPrint({ input$dates })
  }
)

And the code.js.

$(document).ready(function(){

  $('#dates input').bsDatepicker({
    autoclose: true
  });
  $("#dates").attr('onkeydown', 'return false');
});