title: dForm plugin add time picker widget
body: <p>I am trying to use a time picker widget as part of jquery plugin dForm  . </p>
  
  <p>Specifically this timepicker widget,
  <a href="https://github.com/jonthornton/jquery-timepicker" rel="nofollow">https://github.com/jonthornton/jquery-timepicker</a></p>
  
  <p>I read the dForm documentation but couldn't find a way to use a custom widget like the timepicker one within dForm. I am still very new to JavaScript world, so I may be overlooking some obvious things and I apologize for it.</p>
  
  <p>Will someone be willing to show me how to go about doing it? Here is my jsfiddle so far</p>
  
  <p><a href="http://jsfiddle.net/nax97af6/" rel="nofollow">http://jsfiddle.net/nax97af6/</a></p>
  
  <p>It isn't really doing anything besides sticking a label saying Please Pick Time. </p>
  
  <p>Appreciate any pointers.</p>
  
  <p>My HTML</p>
  
  <pre><code>&lt;form id="myform"&gt;&lt;/form&gt;
  </code></pre>
  
  <p>My JavaScript</p>
  
  <pre><code>$("#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({});
  });
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>body {
    font-family: sans-serif;
    padding: 10px;
  }
  
  label,
  input {
    display: block;
    margin-top: 10px;
  }
  </code></pre>
  
  <p>Thank you</p>