format-plnkr.json

{"index.html":"<!DOCTYPE html><html><head>\n<meta charset=\"UTF-8\">\n<link href=\"http://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n<link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n<script type=\"text/javascript\">\n   if (/MSIE d|Trident.*rv:/.test(navigator.userAgent)) {\n       document.write(\"<script src='https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js'><\\/script>\");\n   }\n</script>\n<script src=\"http://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n</head>\n<body>\n<div class=\"control-section\">\n    <div class=\"control_wrapper\">\n        <div class=\"tabs-wrap\">\n            <div class=\"wrap\">\n                <input id=\"timepicker\" type=\"text\">\n            </div>\n        </div>\n    </div>\n</div>\n\n\n<style>\n    #wrapper {\n        margin: 0 auto;\n    }\n\n    .control_wrapper {\n        margin: 0 auto;\n        display: block;\n        max-width: 300px;\n        padding: 5% 0;\n    }\n\n    .tabs-wrap {\n        padding: 0px 0px 10px;\n    }\n\n    .e-bigger .control-section {\n        margin-top: 60px;\n    }\n\n    .btn-wrap {\n        padding: 20px 0px 10px;\n    }\n</style>\n<script src=\"index.js\" type=\"text/javascript\"></script>\n\n</body></html>","index.js":"ej.base.enableRipple(true)\n\r\n    var timepicker = new ej.calendars.TimePicker({\r\n        value: new Date(),\r\n        step: 60,\r\n        format: 'HH:mm'\r\n    });\r\n    timepicker.appendTo('#timepicker');\r\n"}