Question

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

特别是这个timepicker小部件， https://github.com/jonthornton/jquery-timepicker

我阅读了dForm文档但无法找到使用自定义小部件的方法，例如dForm中的timepicker。我仍然是JavaScript世界的新手，所以我可能会忽略一些显而易见的事情，并为此道歉。

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

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

欣赏任何指示。

我的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>

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

谢谢

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

1 个答案: