闪亮的时间选择器答案

【问题标题】：Shiny timepicker闪亮的时间选择器
【发布时间】：2015-04-20 15:23:45
【问题描述】：

我想在我的 Shiny 应用程序中实现时间选择器和日期输入。但是，我没有设法创建一个合适的时间选择器。我尝试了不同的选项 - 使用来自 http://jdewit.github.io/bootstrap-timepicker/ 的选项，但如果我将原始 html 包含在 includeHTML("file.html") 中，则样式显示不正确，我只能看到一个小框。我下载了 Bower 包，更改了 HTML 中的路径，仍然没有。

这是我的闪亮代码：

shinyUI(bootstrapPage(
  titlePanel("Dates and date ranges"),

  column(4, wellPanel(


    dateRangeInput('dates',
                   label = 'Date range input: yyyy-mm-dd',
                   start = "2015-03-02", end = "2015-03-15",
                   weekstart = 1, language = "en"
    )

  )),

  column(6,
         verbatimTextOutput("dateRangeText"),
         plotOutput("distPlot", width = "100%")
  ),
  includeHTML("static.html")
))

还有我的 HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link type="text/css" href="bower_components/bootstrap-timepicker/css/bootstrap.min.css" />
        <link type="text/css" href="bower_components/bootstrap-timepicker/css/bootstrap-timepicker.min.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="bower_components/bootstrap-timepicker/js/bootstrap-2.2.2.min.js"></script>
        <script type="text/javascript" src="bower_components/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
    </head>
    <body>
        <div class="input-append bootstrap-timepicker">
            <input id="timepicker2" type="text" class="input-small">
            <span class="add-on">
                <i class="icon-time"></i>
            </span>
        </div>

        <script type="text/javascript">
            $('#timepicker2').timepicker({
                minuteStep: 1,
                template: 'modal',
                appendWidgetTo: 'body',
                showSeconds: true,
                showMeridian: false,
                defaultTime: false
            });
        </script>
    </body>
</html>

我不太确定我做错了什么，因为我是 JS 和 Web 的新手，有什么建议吗？或者您可以建议我以更简单的方式创建时间选择器。提前致谢！

问候，鲍里斯

【问题讨论】：

Boris，在您的日期范围内，您可能希望结束值为 NULL，因此它将默认为今天。见stackoverflow.com/a/30255002/4606130

标签： r shiny rstudio

【解决方案1】：

经过多次挠头后，我得到了这个工作。我为tags 废弃了includeHTML 方法，我发现这些方法更容易，而且我还根据自己的喜好对其进行了整理，即将js 分离到一个单独的文件中。

文件结构：

--|myApp
     --ui.R
     --server.R
     --|www
           --timepicker.js
           --|bootstrap-timepicker

我将这一切分开的原因是个人选择。如果您在shinyApp 中放置一个名为www 的文件夹，则可以从那里获取以www 作为根文件夹的任何依赖项。我没有使用 bower，我只是从 bootstrap-timepicker git 页面下载了源 zip 文件夹。

文件

timepicker.js

$('#timepicker2').timepicker({
            minuteStep: 1,
            template: 'modal',
            appendWidgetTo: 'body',
            showSeconds: true,
            showMeridian: false,
            defaultTime: false
        });

ui.R

shinyUI(bootstrapPage(
  tags$head(
  tags$link(href="bootstrap-timepicker/css/bootstrap-timepicker.min.css", rel = "stylesheet"),
  tags$script(type="text/javascript", src="bootstrap-timepicker/js/bootstrap-timepicker.min.js")
  ),
  titlePanel("Dates and date ranges"),
  column(4, wellPanel(


    dateRangeInput('dates',
                   label = 'Date range input: yyyy-mm-dd',
                   start = "2015-03-02", end = NULL,
                   weekstart = 1, language = "en"
    )

  )),

  column(6,
         verbatimTextOutput("dateRangeText"),
         plotOutput("distPlot", width = "100%")
  ),
  tags$div(class = "input-group bootstrap-timepicker timepicker",
           tags$input(id = "timepicker2",
                      type = "text",
                      class = "form-control input-small"),
           tags$span(class = "input-group-addon",
                     tags$i(class= "glyphicon glyphicon-time"))),
  tags$script(src = "timepicker.js")
))

说明

如果您还没有在shiny 中探索过tags，我推荐他们。非常强大，无需获取 HTML 文件。如果您只想看看他们做了什么，请将tags$script(src = "timepicker.js") 复制到您的R 控制台中，您将获得以下信息：

<script src="timepicker.js"></script>

他们为您构建 HTML。

首先将两个bootstrap-timepicker 文件作为源文件并放在tags$head 中，这将使shiny 将它们放入HTML 文档的head。

接下来，时间选择器的 div 是使用 tags$div 构建的，然后最终获取 timepicker.js 文件。请参阅Should Jquery code go in header or footer?，了解我们为什么最后获取 js 文件。我不是 js 方面的专家，所以我就是这样让它工作的。

我怀疑includeHTML 不起作用的原因是它没有正确加载依赖项。

【讨论】：