javascript - 在 Durandal 模板项目中使用 TimePicker 或 Datepicker

标签 javascript durandal

我对 durandal 很陌生。我尝试将时间选择器添加到项目中,如下所示。 Schedule.js代码:

define([], function (require) {
var script = require('jquery.ptTimeSelect');
var app = require('durandal/app');

var vm = {
    viewAttached: viewAttached,
};
return vm;

function viewAttached(view) {
    $(view).find('#sample1').ptTimeSelect();
    //$('#sample1').ptTimeSelect();

    console.log("activated schedule module");
    return true;
}
});

这里 jquery.ptTimeSelect 是时间选择器 js 文件。 我真的需要在此处或其他地方添加 jquery.ptTimeSelect.js 吗?

时间表.html:

  <section>
    <p>
        <label>Start</label><br />
        <input id="sample1" class="ui-widget-content" name="s1Time2" value="" />
    </p>

</section>

我面临的问题是我在页面底部得到了基本的时间选择器。我不知道在哪里将 js 和 css 文件添加到项目中。请帮助我对此很陌生。

我正在使用以下链接中的时间选择器 http://pttimeselect.sourceforge.net/example/index.html

最佳答案

要使用可靠的时间选择器控件和 durandal 快速启动并运行,您可以按照以下步骤操作。

按照以下顺序将这些脚本添加到您的页面。在加载 require/durandal 之前将它们添加为标准标签。

  1. jQuery http://jquery.com/
  2. jQueryUI http://jqueryui.com/
  3. 这个 timepicker 控件(基于 jquery ui 构建)http://fgelinas.com/code/timepicker/
  4. Heiserman 提到的 Steve Saunderson 的 jQueryUI Knockout 绑定(bind)。 https://github.com/SteveSanderson/knockout/wiki/Bindings---jqueryui-widgets

以下是您引用上面脚本的方式,这些脚本标签应该进入您的主布局页面、index.html 或托管 durandal 应用程序的任何页面:

<head>
   <script src="/Scripts/jquery-1.9.1.js"></script>
   <script src="/Scripts/jquery-ui-1.10.0.js"></script>
   <script src="/Scripts/jquery.ui.timepicker.js"></script>
   <script src="/Scripts/knockout-jquery-ui-widget.js"></script>
   <script type="text/javascript" src="/App/durandal/amd/require.js" data-main="/App/main"></script>
</head>

然后您可以简单地在 durandal View 中创建一个时间选择器,如下所示:

<input type="text" placeholder="Choose Time" data-bind="jqueryui: { widget: 'timepicker', options: { showPeriod: true }}">

关于javascript - 在 Durandal 模板项目中使用 TimePicker 或 Datepicker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15742728/

相关文章:

javascript - 如何保存字符串然后使用 is 作为变量名?

javascript - 在我自己的类中创建类似于延迟的方法

javascript - Durandal构造函数但仍想记住数据

durandal - 使用 DurandalJS 为同一个模块构建多个导航路径

durandal - Durandal路由器中的查询参数

javascript - 不同文件夹上的 Grunt : have package. json 和 Gruntfile.js

Javascript:保存和恢复浏览器窗口大小

visual-studio-2012 - Web 项目模板未出现在 Visual Studio 2012 中

asp.net-mvc-4 - 用 Hot Towel 和 durandal 链接到另一个 Controller

javascript - 按任何给定的分隔符拆分字符串