dForm 插件添加时间选择器小部件答案

【问题标题】：dForm plugin add time picker widgetdForm 插件添加时间选择器小部件
【发布时间】：2016-09-27 22:37:28
【问题描述】：

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

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

我阅读了 dForm 文档，但找不到在 dForm 中使用自定义小部件（如 timepicker 小部件）的方法。我对 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;
}

谢谢

【问题讨论】：

标签： javascript jquery html css jquery-plugins

【解决方案1】：

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

这是我的 dForm 代码

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

这是我添加的脚本：

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

欢迎了解可以对此代码进行的任何改进。

谢谢

【讨论】：