Javascript 自动关闭日期范围输入
我希望日期选择器在选择日期后自动关闭。我知道当daterangeinput直接在ui中呈现时如何实现,而不是在服务器中创建时如何实现 这是我的密码Javascript 自动关闭日期范围输入,javascript,r,shiny,shinyjs,Javascript,R,Shiny,Shinyjs,我希望日期选择器在选择日期后自动关闭。我知道当daterangeinput直接在ui中呈现时如何实现,而不是在服务器中创建时如何实现 这是我的密码 library('shiny') js_string <- "$('#dates input').bsDatepicker({autoclose: true});" shinyApp( ui = fluidPage( tags$head(tags$script(HTML('Shiny.addCustomMessageHandle
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) })
}
)
使用js代码
$(document).ready(function(){
$('#dates input').bsDatepicker({autoclose: true});
});
我的问题与我的帖子有关
我还尝试了$('#dates input').datepicker({autoclose:true})代码>但它不起作用。我知道$(document).ready(function()…
无法工作,因为一旦文档准备好,代码就会启动,因此在呈现日期范围之前
编辑:
我也尝试过使用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()
})
}
)
这有点老套,但可以使用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 */
);"))
)
您只需将其添加到ui
的fluidpage
中的tags$head函数中
如果最后一个用户输入是选择日期,则此操作有效
如果您的dateRangeInput
仅限于选择月份,那么您所要做的就是将'.datepicker days'
编辑为'.datepicker months'
,并将'.td.day'
更改为'.td.month'
。如果您限制为一年,则将天更改为年
,将天更改为e> 年份
之所以有黑客行为,是因为JQuery脚本每50毫秒重新部署一次,以检查datepicker days
类是否可见……但它可以工作。也许您应该使用shinyjs::hide()尝试shinyjs的包hide()
我可以隐藏日期范围输入,但不只是日期选择器,而不添加.datepicker()
哪一个不正确?我没有使用过js字符串,所以我想我不知道。我真的被卡住了,我不明白为什么我的代码在使用shinny.addCustomMessageHandler
调用时没有相同的效果。我想我必须深入研究js和shinny之间的链接。
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
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 */
);"))
)