如何使用 R/Shiny 更改 dateRangeInput 的样式/显示？答案

【问题标题】：How to change the style/display of dateRangeInput with R/Shiny?如何使用 R/Shiny 更改 dateRangeInput 的样式/显示？
【发布时间】：2019-08-08 08:40:31
【问题描述】：

[编辑]

我尽量简化我的代码：

server.R：

server <- function(input, output, session) {

output$body_UI<-renderUI({
tabPanel("Comparison",
         {
           fluidPage(
             fluidRow(
               box(
                 width=12,
                 solidHeader=T,
                 title="Parameters",
                 status="primary",
                 uiOutput('date_range_UI')
               )
             )
           )
         }
)})     

  output$date_range_UI <-renderUI({
    dateRangeInput(
                   "date_1",
                   "Period 1",
                   start=NULL,
                   end=NULL
                   )
    })
}

ui.R:

uiHeader <- dashboardHeader(title = NULL)

  uiSidebar <- dashboardSidebar(sidebarMenuOutput('sidebar_UI'))


  uiBody <- dashboardBody(
    tags$head(
      tags$style(type="text/css"
      ),
      tags$link(rel = "stylesheet", type = "text/css", href = "style_v2.css")
    ),
    uiOutput('body_UI')
  )

  dashboardPage(uiHeader,
                uiSidebar,
                uiBody,
                skin = "black")

我认为我的问题来自文件 style_v2.css ：

.progress-bar, .irs-bar,.irs-bar-edge, .irs-from, .irs-to, .irs-single{
background-color:#000033;
}

.box.box-solid.box-primary>.box-header
{
  background-color:#000033;
}

.box.box-solid.box-primary{
  border: 1px solid #000033;
}

.box.box-primary, .nav-tabs-custom>.nav-tabs>li.active
{
border-top-color:#000033;
}

body {
  background-color: #fff;
}

.content-wrapper, .right-side{
  background-color:#FFFFFF;
}

.dropdown-menu{
  background-color:#333;
}

此文件位于“www”文件夹中，该文件夹与 server.R 和 ui.R 位于同一目录中。

如果我删除这个文件，那么我没有问题。但我需要它，但我不知道是哪个部分造成的。

我正在尝试使用 dateRangeInput (Shiny) 插入一个句点字段。但是我的显示有问题。

注意：我在使用 dateInput 时遇到了同样的问题。

这是 server.R 的摘录：

dateRangeInput(
               "date_1",
               "Period 1",
               start=min(data$Date_processed),
               end=""
               )

这完全难以辨认...

【问题讨论】：

您的第一步应该是查阅该功能的帮助。见?shiny::dateRangeInput。文档指出：“结束：初始结束日期。日期对象或 yyyy-mm-dd 格式的字符串。如果为 NULL（默认值），将使用客户端时区中的当前日期”。因此，空字符串不是有效值。您可能想改为传递 NULL。
您的min(data$Date_processed) 也必须是正确的日期（试试class(data$Date_processed)，它应该是Date）或格式为“yyyy-mm-dd”的字符串。可能是，但没有数据就无法检查。
您好，谢谢您的回答。我不认为我的问题来自论点（尤其是开始/结束）。我已经试过dateRangeInput("date_1", "Period 1", start=NULL, end=NULL )，但问题总是一样
你能举一个可重现的例子吗？ dateRangeInput 工作正常，所以问题出在其他地方！一个最小的可重现示例，在 UI 中使用 uiOutput，在服务器中使用 renderUI 等。
谢谢，我刚刚编辑了我的帖子。我认为问题来自定义样式的 .css 文件。我是这一切的初学者。 Chrome 或 Firefox 的问题仍然存在

标签： r shiny

【解决方案1】：

问题在于您的 style_v2.css 文件中的这段代码：

.dropdown-menu {
    background-color: #333;
}

#333 是您看到的深色背景。您可以删除它或将十六进制颜色编辑为更亮。

如果代码中的其他下拉菜单需要该代码，您可以更具体地了解您的 CSS - 请告诉我。

【讨论】：

好的，我从 .css 文件中删除了这些行，现在完美了。非常感谢！
当然，很高兴为您提供帮助！