SliderInput for Date(输入日期) [英] sliderInput for date
问题描述
我正在使用sliderInput()中的animationOptions制作动画。我想在滑块中使用日期/日期范围，但sliderInput()不接受日期。闪光组有一个post。截至2013年3月，还没有解决方案。所以我四处搜索，了解到可以使用JavaScript来实现这一点。这是post。不幸的是，我不能用JS写。因此，我四处搜索，找到了this link，并编写了以下代码。这是可行的，但滑块上的数字令人困惑。这是在sliderInput()中移动和使用Date的唯一方式吗？非常感谢您百忙之中抽出时间。
server.R
library(shiny)
shinyServer(function(input, output, session) {
observe({
updateDateInput(session, "ana", value = as.Date("2014-07-01") + input$foo)
})
output$preImage <- renderImage({
filename <- normalizePath(file.path('./www',
paste(input$ana, '.png', sep='')))
list(src = filename,
alt = paste("There is no image for ", input$ana, ".", sep = ""))
}, deleteFile = FALSE)
})
ui.R
shinyUI(pageWithSidebar(
headerPanel("renderImage example"),
sidebarPanel(
sliderInput("foo", "Animation duration", min = -30,
max = 30, value = 0, step = 1,
animate = animationOptions(loop = TRUE, interval = 1000)),
dateInput("ana", "Choose a date:", value = as.Date("2014-07-01"))
),
mainPanel(
# Use imageOutput to place the image on the page
imageOutput("preImage")
)
))
推荐答案
sliderInput控件提供一些有限的格式选项。您可以将format参数添加到sliderInput以更改滑块的显示文本。
sliderInput提供将当前值映射到确切日期的自定义映射函数。但由于这不是选项，因此唯一的改进空间是使用format参数稍微更改文本。
已接受formatcan be found in this document。
根据上述文档，您可以将sliderInput更改为：
sliderInput("foo", "Animation duration", min = -30,
max = 30, value = 0, step = 1,
format="## Days",
animate = animationOptions(loop = TRUE, interval = 1000)),
这将显示为+10 Days，而最初为"+10"。
它可能不完全是您想要的，但这就是您无需编写Javascript就可以完成的操作。
编辑：使用Javascript显示自定义滑块值
假设您确实想要更改滑块的当前值标签，以指示稍微复杂的值(日期、转换值等)，您可以编写一些小的Javascript代码段来实现此目的。
jslider控件提供的一个示例(SHINY用于sliderInput)表明，通过使用calculate函数调用滑块的构造函数，您可以手动将映射从当前值(数字)更改为自定义字符串(在本例中为日期)。
slider。您可以随时通过以下方式获取：
$(select).slider()
其中select是jQuery选择器。同样，在本例中，它是#foo，因为滑块在ui.R中设置了一个idfoo。
启动时，示例中出现的slider.settings.calculate函数将被绑定为slider.nice函数。因此，我们只需覆盖nice函数即可实现我们的目标。
下面是使用一段Javascript修改的ui.R，以准确地执行nice函数重写。
ui.R
shinyUI(pageWithSidebar(
headerPanel("renderImage example"),
sidebarPanel(
sliderInput("foo", "Animation duration", min = -30,
max = 30, value = 0, step = 1,
animate = animationOptions(loop = TRUE, interval = 1000)),
dateInput("ana", "Choose a date:", value = as.Date("2014-07-01"))
),
mainPanel(
singleton(tags$head(HTML(
'
<script type="text/javascript">
$(document).ready(function() {
var slider = $("#foo").slider();
// override the default "nice" function.
slider.nice = function(value) {
var ref_date = new Date("2014-07-01");
// each slider step is 1 day, translating to 24 * 3600 * 1000 milliseconds
var slider_date = new Date(ref_date.getTime() + value * 24 * 3600 * 1000);
return [slider_date.getUTCFullYear(),
slider_date.getUTCMonth() + 1,
slider_date.getUTCDate()].join("-");
}
})
</script>
'))),
# Use imageOutput to place the image on the page
imageOutput("preImage")
)
))
- 调用
slider.generateScales()替换整个slider.domNode； - 直接用类
jslider-label修改两个<span>。
例如，如果我们采用方法2，我们可以将ui.R的HTML()部分修改为：
singleton(tags$head(HTML(
'
<script type="text/javascript">
$(document).ready(function() {
var slider = $("#foo").slider();
// override the default "nice" function.
var labels = slider.domNode.find(".jslider-label span");
labels.eq(0).text("2014-06-01");
labels.eq(1).text("2014-07-31");
slider.nice = function(value) {
var ref_date = new Date("2014-07-01");
// each slider step is 1 day, translating to 24 * 3600 * 1000 milliseconds
var slider_date = new Date(ref_date.getTime() + value * 24 * 3600 * 1000);
return [slider_date.getUTCFullYear(),
slider_date.getUTCMonth() + 1,
slider_date.getUTCDate()].join("-");
}
})
</script>
'))),
标签将按预期显示日期。
这当然是一些快速修改，如果对滑块进行某些其他自定义，则可能不起作用。我认为闪亮团队应该考虑在sliderInput中添加一个直接映射到slider.settings.calculate的calculate选项，这样可以让事情变得更简单。
这篇关于SliderInput for Date(输入日期)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
