我正在使用闪亮来创建一个Web应用程序.我的一个图表仅使用特定年份的几个月来生成图中的点数.
我希望用户只选择月份.虽然我已经提到了
format = 'mm-yyyy'
和startview = 'year'
在dateInput
或dateRangeInput
每当用户单击日期输入字段时,将显示用户月份,然后单击用户显示的任何月份以及月份中的日期.
我希望用户能够显示到几个月.如果用户点击月份,则不应显示日期.
怎么能实现这一目标?
Ste*_*mer 11
我不相信dateInput
已经将bootstrap minViewMode选项实现为函数参数,所以我将它添加到我自己的函数副本中(见下文).我不得不添加一些其他必需的功能.这不是很好.最好的选择可能是向RStudio提交请求,因为添加这个minviewmode选项似乎很简单.
mydateInput <- function(inputId, label, value = NULL, min = NULL, max = NULL,
format = "yyyy-mm-dd", startview = "month", weekstart = 0, language = "en", minviewmode="months",
width = NULL) {
# If value is a date object, convert it to a string with yyyy-mm-dd format
# Same for min and max
if (inherits(value, "Date")) value <- format(value, "%Y-%m-%d")
if (inherits(min, "Date")) min <- format(min, "%Y-%m-%d")
if (inherits(max, "Date")) max <- format(max, "%Y-%m-%d")
htmltools::attachDependencies(
tags$div(id = inputId,
class = "shiny-date-input form-group shiny-input-container",
style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),
controlLabel(inputId, label),
tags$input(type = "text",
# datepicker class necessary for dropdown to display correctly
class = "form-control datepicker",
`data-date-language` = language,
`data-date-weekstart` = weekstart,
`data-date-format` = format,
`data-date-start-view` = startview,
`data-date-min-view-mode` = minviewmode,
`data-min-date` = min,
`data-max-date` = max,
`data-initial-date` = value
)
),
datePickerDependency
)
}
`%AND%` <- function(x, y) {
if (!is.null(x) && !is.na(x))
if (!is.null(y) && !is.na(y))
return(y)
return(NULL)
}
controlLabel <- function(controlName, label) {
label %AND% tags$label(class = "control-label", `for` = controlName, label)
}
datePickerDependency <- htmlDependency(
"bootstrap-datepicker", "1.0.2", c(href = "shared/datepicker"),
script = "js/bootstrap-datepicker.min.js",
stylesheet = "css/datepicker.css")
Run Code Online (Sandbox Code Playgroud)
sho*_*aco 10
@MartinJohnHadley:基本上通过添加相同的三行@StevenMortimer将dateInput的代码添加到dateRangeInput.这会将minViewMode添加到shinys dateRangeInput.
minviewmode="months"
data-date-min-view-mode = minviewmode
到两个div最好的问候,桑德罗
码:
dateRangeMonthsInput <- function(inputId, label, start = NULL, end = NULL,
min = NULL, max = NULL, format = "yyyy-mm-dd", startview = "month",
minviewmode="months", # added manually
weekstart = 0, language = "en", separator = " to ", width = NULL) {
# If start and end are date objects, convert to a string with yyyy-mm-dd format
# Same for min and max
if (inherits(start, "Date")) start <- format(start, "%Y-%m-%d")
if (inherits(end, "Date")) end <- format(end, "%Y-%m-%d")
if (inherits(min, "Date")) min <- format(min, "%Y-%m-%d")
if (inherits(max, "Date")) max <- format(max, "%Y-%m-%d")
htmltools::attachDependencies(
div(id = inputId,
class = "shiny-date-range-input form-group shiny-input-container",
style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),
controlLabel(inputId, label),
# input-daterange class is needed for dropdown behavior
div(class = "input-daterange input-group",
tags$input(
class = "input-sm form-control",
type = "text",
`data-date-language` = language,
`data-date-weekstart` = weekstart,
`data-date-format` = format,
`data-date-start-view` = startview,
`data-date-min-view-mode` = minviewmode, # added manually
`data-min-date` = min,
`data-max-date` = max,
`data-initial-date` = start
),
span(class = "input-group-addon", separator),
tags$input(
class = "input-sm form-control",
type = "text",
`data-date-language` = language,
`data-date-weekstart` = weekstart,
`data-date-format` = format,
`data-date-start-view` = startview,
`data-date-min-view-mode` = minviewmode, # added manually
`data-min-date` = min,
`data-max-date` = max,
`data-initial-date` = end
)
)
),
datePickerDependency
)
}
`%AND%` <- function(x, y) {
if (!is.null(x) && !is.na(x))
if (!is.null(y) && !is.na(y))
return(y)
return(NULL)
}
controlLabel <- function(controlName, label) {
label %AND% tags$label(class = "control-label", `for` = controlName, label)
}
# the datePickerDependency is taken from https://github.com/rstudio/shiny/blob/master/R/input-date.R
datePickerDependency <- htmltools::htmlDependency(
"bootstrap-datepicker", "1.6.4", c(href = "shared/datepicker"),
script = "js/bootstrap-datepicker.min.js",
stylesheet = "css/bootstrap-datepicker3.min.css",
# Need to enable noConflict mode. See #1346.
head = "<script>
(function() {
var datepicker = $.fn.datepicker.noConflict();
$.fn.bsDatepicker = datepicker;
})();
</script>")
Run Code Online (Sandbox Code Playgroud)
这是另一种方法(代码冗余更少,希望更简单),由同事提供。可以在之后将 min/max-view-mode 部分添加到 Shiny 对象中,而不是复制 Shiny::dateInput 函数代码。然后可以按预期使用旧参数 'startview' 和新的 'minview'/'maxview':
dateInput2 <- function(inputId, label, minview = "days", maxview = "decades", ...) {
d <- shiny::dateInput(inputId, label, ...)
d$children[[2L]]$attribs[["data-date-min-view-mode"]] <- minview
d$children[[2L]]$attribs[["data-date-max-view-mode"]] <- maxview
d
}
dateRangeInput2 <- function(inputId, label, minview = "days", maxview = "decades", ...) {
d <- shiny::dateRangeInput(inputId, label, ...)
d$children[[2L]]$children[[1]]$attribs[["data-date-min-view-mode"]] <- minview
d$children[[2L]]$children[[3]]$attribs[["data-date-min-view-mode"]] <- minview
d$children[[2L]]$children[[1]]$attribs[["data-date-max-view-mode"]] <- maxview
d$children[[2L]]$children[[3]]$attribs[["data-date-max-view-mode"]] <- maxview
d
}
Run Code Online (Sandbox Code Playgroud)
这是一个最小的 Shiny 示例:
library(shiny)
shinyApp(
ui = fluidPage(
dateInput2("test1", "Year", startview = "year", minview = "months", maxview = "decades"),
dateRangeInput2("test2", "Years", startview = "year", minview = "months", maxview = "decades")
),
server = function(input, output, session) {}
)
Run Code Online (Sandbox Code Playgroud)
更新:
为了解决下面 darKnight 的问题,我扩展了示例并引入了一个参数,用于设置最大可选时间分辨率。有关可能参数的完整列表,请参阅:
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html
小智 5
谁想使用上一个答案中的代码:您需要使用更新的 datePickerDependecy(可以从https://github.com/rstudio/shiny/blob/master/R/input-date.R 获取)。
目前是:
datePickerDependency <- htmlDependency(
"bootstrap-datepicker", "1.6.4", c(href = "shared/datepicker"),
script = "js/bootstrap-datepicker.min.js",
stylesheet = "css/bootstrap-datepicker3.min.css",
# Need to enable noConflict mode. See #1346.
head = "<script>
(function() {
var datepicker = $.fn.datepicker.noConflict();
$.fn.bsDatepicker = datepicker;
})();
</script>")
Run Code Online (Sandbox Code Playgroud)
由于没有足够的声誉,我将此评论作为答案发布:(