R Shiny navbarPage中日期选择器被导航栏遮挡的解决方法

问题原因 #

navbarPage布局的顶部导航栏默认z-index层级高于日期选择器（datepicker）的弹出层，导致弹出的日期选择面板被压在导航栏下方，无法正常点击选择。

修复方式 #

通过自定义CSS拉高日期选择器的层级即可解决，用到的样式代码如下：
tags$style(HTML(".datepicker {z-index:99999 !important;}"))

代码放置位置 #

• 必须将上述样式代码作为navbarPage()函数的第一个传入参数，放在所有tabPanel、navbarMenu等导航内容的最前面，和导航项同级，保证样式全局生效。
• 不要把样式代码放到单个tabPanel内部，否则未加载对应tab时样式不生效，依然会出现遮挡问题。

正确写法示例 #

library(shiny)

ui <- navbarPage(
  title = "系统标题",
  # 自定义CSS固定放在navbarPage内最开头位置
  tags$style(HTML(".datepicker {z-index:99999 !important;}")),
  # 后续放所有导航页内容
  tabPanel(
    title = "数据查询",
    dateInput("date_range", "查询日期", value = Sys.Date())
  ),
  navbarMenu(
    title = "更多功能",
    tabPanel("功能1", "页面内容"),
    tabPanel("功能2", "页面内容")
  )
)

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

shinyApp(ui, server)

该样式设置的z-index值足够高，不仅能覆盖默认导航栏，也不会和页面内其他普通组件产生层级冲突，不需要额外调整其他元素的样式。

内容的提问来源于stack exchange，提问作者Koffi Sessie