闪亮的时间选择器

Question

我想在我的 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 的新手，有什么建议吗？或者您可以建议我以更简单的方式创建时间选择器。提前致谢！

此致，鲍里斯

Answer 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 中。

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

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

闪亮的时间选择器

Shiny timepicker

r

rstudio

shiny