Question

我在rails应用程序中需要一个时间选择器，而jquery日期框看起来很完美，但我无法使其工作。

在我的application.html.haml中有

%link{:href => "http://code.jquery.com/mobile/latest/jquery.mobile.min.css", :rel => "stylesheet", :type => "text/css"}/
%link{:href => "http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css", :rel => "stylesheet", :type => "text/css"}/
%script{:src => "http://code.jquery.com/mobile/latest/jquery.mobile.min.js", :type => "text/javascript"}
%script{:src => "http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js", :type => "text/javascript"}
%script{:src => "http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js", :type => "text/javascript"}
%script{:src => "http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js", :type => "text/javascript"}

我的haml代码

%label{:for => "mydate"} Some Time
%input#mydate{"data-options" => "{\"mode\" => \"flipbox\"}", "data-role" => "datebox", :name => "mydate", :type => "date"}/

这会按照http://cl.ly/image/1Y0t210L3a3c

所示进行翻译

我一直有的错误是http://cl.ly/image/1a0l3A20471r

我在日期框中尝试了不同的盒子类型，但只有calbox可以使用。

由于

Answer 1

好吧，你的部分问题可能就在这里：

%script{:src => "http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js", :type => "text/javascript"}

这只是加载 'calbox'模式。如果您想使用flipbox，就像上面的haml代码一样，您还需要/ also：

%script{:src => "http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js", :type => "text/javascript"}

你的下一个问题是（也许）在翻译的代码片段中 - 数据选项被双引号括起来，对象中的每个项目都是如此 - 取决于浏览器，它将导致javascript解析它们的问题。您可以决定不使用数据选项，而是使用长选项...即：

data-datebox-mode="calbox"

（注意：我在一段时间内没有对长期选项进行测试，并且不完全记住它是如何工作的 - 让我知道它是否失败。）

否则，它可能需要弄乱haml解析器以使其发挥得很好 - 这可能比它的价值更麻烦（不确定，我对产品并不十分熟悉）

Answer 2

数据选项部分需要用单引号括起来。使用双引号对我不起作用

data-options='{"mode":"datebox"}'

jquery datebox没有给出加载/模式名称的模式

2 个答案: