Автозаполнение ввода даты блестящий

1

Я хочу, чтобы сборщик дат был автоклинирован после выбора даты. Я знаю, как это сделать, когда daterangeinput отображается непосредственно в ui, но не тогда, когда он создается на сервере.

Вот мой код.

library('shiny')

js_string <- "$('#dates input').bsDatepicker({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) })
  }
)

$('#dates input').bsDatepicker({autoclose: true}); хорошо работает, если daterange создается непосредственно в ui, как показано в следующем коде. Кроме того, этот код также хорошо работает, если я хочу отключить ввод с клавиатуры с помощью $('#dates').attr('onkeydown', 'return false'); ,

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({ input$dates })
  }
)

С кодом js

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

Мой вопрос связан с другим вопросом, который я опубликовал.

Я также попробовал $('#dates input').datepicker({autoclose: true}); Но это не работает. Я знаю, что $(document).ready(function()... не может работать, поскольку код будет запущен после того, как документ будет готов до того, как будет отображаться daterange.

Редактировать:

Я также пытался использовать shinyjs но он тоже не работает.

library('shiny')
library('shinyjs')

jsCode <- "shinyjs.changeDate = function(){
$('#dates input').bsDatepicker({autoclose: true});
$('#dates').attr('onkeydown', 'return false');
}"

shinyApp(
  ui = fluidPage(
    useShinyjs(),
    extendShinyjs(text = jsCode),
    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() {
      js$changeDate()
    })
  }
)

Я застрял здесь, любая помощь очень ценится.

ура

Edit2: добавление моей информации о сеансе

R version 3.4.4 (2018-03-15)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS High Sierra 10.13.3

Matrix products: default
BLAS: /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.4/Resources/lib/libRlapack.dylib

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] shinyjs_1.0 shiny_1.0.5 V8_1.5     

loaded via a namespace (and not attached):
 [1] compiler_3.4.4  R6_2.2.2        htmltools_0.3.6 tools_3.4.4     curl_3.1       
 [6] yaml_2.1.18     Rcpp_0.12.16    digest_0.6.15   jsonlite_1.5    xtable_1.8-2   
[11] httpuv_1.3.6.2  mime_0.5 
  • 0
    Может быть , вы должны попробовать shinyjs Пакет для hide()
  • 0
    Используя shinyjs::hide() я могу скрыть ввод даты, но не только выбора даты без добавления .datepicker() который не работает правильно?
Показать ещё 2 комментария
Теги:
shiny
shinyjs

1 ответ

1
Лучший ответ

Это немного хаки, но он работает с помощью 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 */
                      );"))
            )

Все, что вам нужно сделать, это добавить это в функцию $ head в fluidpage вашего fluidpage ui.

Это работает, если последний пользовательский ввод выбирает день.

Если ваш dateRangeInput ограничивается выбором месяца, тогда вам нужно всего лишь отредактировать '.datepicker-days' до '.datepicker-months' и изменить '.td.day' на '.td.month'. Если вы ограничиваете год; меняйте days и years и меняйте day за year.

Причина в том, почему он взломан, потому что сценарий JQuery перераспределяется каждые 50 мс, чтобы проверить, является ли класс datepicker-days видимым... но он работает.

  • 0
    Действительно, это делает трюк, спасибо.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню