【问题标题】:Foundation 5 Datepicker failing, or is it meFoundation 5 Datepicker 失败,还是我
【发布时间】:2014-02-10 16:34:01
【问题描述】:

好的,我正在使用 SASS 运行 FOundation 5 我在这里下载了 Peter Beno 的 Datepicker:

https://github.com/najlepsiwebdesigner/foundation-datepicker

现在我知道它说它是为 Foundation 4 制作的,但我看不出它为什么不能在 Foundation 5 中工作。是的,javascript 有点过头了,但这就是我使用某人的原因其他日期选择器。

这是我在 Foundation 5 中实现此日期选择器所采取的步骤。

1) 我将foundation-datepicker.js 重命名为foundation.datepicker.js 并将其包含在JS 包中。我的页面现在正在加载这个脚本。

2) 将foundation-datepicker.css 重命名为_datepicker.scss 并将其包含在sass 文件夹中。它现在被吸入我的缩小 css 文件中,我检查了。

然后我在我的页面上使用了这段代码:

    @Html.TextBoxFor(model => model.StartedDate, new { type = "text", id = "dp1", @class = "span2" })

从 asp.net mvc 到 this 的哪些输出:

    <input class="span2" id="dp1" name="StartedDate" type="text" value="1/1/1981 12:00:00 AM" />

我也在调用 jQueryui 之后添加了这个

    <script type="text/javascript">
    $('.datepicker').fdatepicker()
    </script>

这是文档页面,如果他可以帮助我在 Foundation 5 中进行这项工作,我会对其进行更新并使他更加清楚。

http://foundation-datepicker.peterbeno.com/example/example.html

我在 Mozilla 中对其进行了测试,以避免 Chrome 糟糕的日期选择器。我究竟做错了什么。它最有可能与 Foundation 5 冲突吗?是否有另一个我可以使用的日期选择器有点类似,它是基于 jQueryUI 的,不会很糟糕。

【问题讨论】:

    标签: jquery css datepicker asp.net-mvc-5 zurb-foundation-5


    【解决方案1】:

    我已经尝试过 Peter 的 UI 实现,但我也遇到了麻烦,所以我为 Foundation 构建了自己的日期和时间选择界面。它有点新鲜,但我的公司一直在生产现场使用它并且它正在坚持下去。

    https://github.com/jockmac22/foundation_calendar_date_time_picker

    我围绕不显眼的 javascript 构建了它,因此它很容易通过输入字段中的数据属性来实现。

    我有一个 SCSS 文件,您可以将其包含在您的基础 SASS 构建中,以将所需的 CSS 直接合并到您的最终 CSS 文件中。通过这种方式,您可以使用现有的基础设置自定义颜色,并在 SASS 框架内轻松进行任何其他更改。

    它支持自定义日期、时间和字段值格式,因此您可以使用 ISO 标准(或任何其他格式)作为存储在字段中的最终值,以用户友好的方式显示日期和时间。我使用 Ruby strftime 格式化选项作为日期格式的基础。

    如果您决定尝试,请告诉我您的想法。

    【讨论】:

    • 不错。我去看看。
    • @TesteroUserable 你打算把它变成 Rails 的 gem 吗?
    • @Jocko 这个插件没有 javaScript 初始化方法。所以我无法为动态加载的元素调用日期选择器。你对此有什么想法吗?
    【解决方案2】:

    在您的回答中,您调用 fdatepicker:

    <script type="text/javascript">
    $('.datepicker').fdatepicker()
    </script>
    

    但生成的 HTML 中缺少类 .datepicker

    <input class="span2" id="dp1" name="StartedDate" type="text" value="1/1/1981 12:00:00 AM" />
    

    这不是问题吗?如果您在空元素集上调用 fdatepicker,您将看不到任何输出。 如果 UI 有问题,请在 datepicker Github repo 上打开一个带有描述/屏幕截图的问题。 https://github.com/najlepsiwebdesigner/foundation-datepicker

    谢谢!

    编辑: Foundation datepicker现在完全支持F5,我们仍然在releases标签下提供F4版本。

    【讨论】:

    • 在 Foundation 6 datepicker 示例中,生成的 HTML 中也缺少 .datepickerlink。即使在页面底部的 Docs 中,实际的“”元素的实现也是不存在的。
    • @ChrisO 如果您查看datepicker page 上的示例,您将看到使用idinput 元素的引用 --> &lt;input type="text" class="span2" id="dp1"&gt; 然后$('#dp1').fdatepicker({..});
    猜你喜欢
    • 2018-08-16
    • 2013-09-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-18
    • 1970-01-01
    • 2015-10-29
    • 1970-01-01
    相关资源
    最近更新 更多