dFormプラグイン追加時間ピッカーウィジェット

Question

jqueryプラグインdFormの一部として時間ピッカーウィジェットを使用しようとしています。

具体的に、このtimepickerウィジェット、 https://github.com/jonthornton/jquery-timepicker

私はDFORMのドキュメントを読んでますがtimepicker DFORM内の1のようなカスタムウィジェットを使用する方法を見つけることができませんでした。私は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

をありがとう、私は私が自分で問題を解決したと思う：

オープン

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

をこのコードにすることができる任意の改善の話を聞くには：

は、これは私が追加したスクリプトです。これは私のDFORMコード

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

されます。

ありがとうございます