javascript - dForm 插件添加时间选择器小部件

Question

我正在尝试使用时间选择器小部件作为 jquery 插件 dForm 的一部分。

特别是这个时间选择器小部件， https://github.com/jonthornton/jquery-timepicker

我阅读了 dForm 文档，但找不到一种方法来使用像 dForm 中的时间选择器这样的自定义小部件。我对 JavaScript 世界还很陌生，所以我可能忽略了一些明显的事情，对此我深表歉意。

有人愿意告诉我如何去做吗？到目前为止，这是我的 jsfiddle

http://jsfiddle.net/nax97af6/

除了贴上一个写着请选择时间的标签外，它并没有真正做任何事情。

感谢任何指点。

我的 HTML

<form id="myform"></form>

我的 JavaScript

$("#myform").dform({
  "action": "index.html",
  "method": "get",
  "html": [{
      "type": "p",
      "html": "You must login"
    }, {
      "name": "username",
      "id": "txt-username",
      "caption": "Username",
      "type": "text",
      "placeholder": "E.g. user@example.com"
    }, {
      "name": "timepicker",
      "id": "timepicker",
      "caption": "Pick Time",
      "type": "timepicker",
    }, {
      "name": "password",
      "caption": "Password",
      "type": "password"
    }, {
      "name": "ruleenabled",
      "type": "radiobuttons",
      "id": "radiobuttonalign",
      "caption": "Make rule available for use",
      "options": {
        "No": "No",
        "Yes": {
          "checked": "checked",
          "caption": "Yes"
        }
      }
    },

  ]
});



$(document).ready(function() {
  $('ui-dform-text').timepicker({});
});

我的 CSS:

body {
  font-family: sans-serif;
  padding: 10px;
}

label,
input {
  display: block;
  margin-top: 10px;
}

谢谢

Answer 1

我想我自己解决了这个问题:

这是我的 dForm 代码

  {
     "name" : "Time Picker",
     "type" : "input",
     "caption" : "Park Starting At",
     "wickedpicker" : {}
  }

这是我添加的脚本:

 <script>
     $.dform.subscribe("wickedpicker", function(options) {
     this.timepicker(options);
     });
 </script>

愿意听取可以对此代码进行的任何改进。

谢谢