autoclose for Shiny dateInput

[karantibrewal]

Request: Is there a way we could provide an option to close the dateInput window when the user selects a date? I believe this corresponds to autoclose: true for bootstrap datepicker.

[MathieuMarauri]

Hello,

You can do it with the following code.

library('shiny')

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

And the associated js code.

$(document).ready(function(){

  $('#dates input').bsDatepicker({autoclose:true});
  
});

But if you render your daterange with a renderUI this will not work as it will load before the daterange (when document is ready).

In this case you can do something like that.

library('shiny')

js_string <- "$('#dates input').bootstrapDP({autoclose:true});"

shinyApp(
  ui = fluidPage(
    tags$head(tags$script(HTML('Shiny.addCustomMessageHandler("jsCode", function(message) { eval(message.value); });'))),
    includeScript("code.js"),
    fluidRow(
      column(4, 
             uiOutput(outputId = 'dateui'),
             verbatimTextOutput("datesOut")
      )
    )
  ), 
  server = function(input, output, session) {
    output$dateui <- renderUI({
      dateRangeInput("dates", label = h3("Date range"))
    })
    session$onFlushed(function() {
      session$sendCustomMessage(type = 'jsCode', list(value = js_string))
    })
    output$datesOut <- renderPrint({ names(session) })
  }
)

But bsDatepicker does not seem to work in this case. I can make such code work e.g. disabling keyboard input with $('#dates').attr('onkeydown', 'return false'); but I cannot autoclose a daterangeinput rendered in the server.

If you know a way that will be great.

Cheers,

Mathieu

[nima-akram]

Hi All,

The following works, albeit a little hacky, via Jquery:

tags$head(
                tags$script(HTML("setInterval(
                      function checkContainer () {
                        if($('.datepicker-days').is(':visible')){ //if the container is visible on the page
                          $(function () {
                              $('td.day').click(function () {
                                $('.dropdown-menu').hide()
                              }); 
                            });
                          } else {
                            setTimeout(checkContainer, 50); //wait 50 ms, then try again
                          }
                        },
                      50  /* 10000 ms = 10 sec */
                      );"))
            )

See more info about this on my answer on stackoverflow: https://stackoverflow.com/questions/49389497/autoclose-date-range-input-shiny/49418687#49418687,

It would be great if this could be added as an option in the dateRangeInput function of Shiny

Thanks,

Nima

[jcheng5]

Seems like autoclose should probably be the default? How often do you want it to stay up once you've selected a date?