range-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=\"pane\">\n            <div class=\"tabs-wrap\">\n                <div class=\"wrap\">\n                    <input type=\"text\" id=\"start\">\n                </div>\n            </div>\n            <div class=\"tabs-wrap\" style=\"clear: both\">\n                <div class=\"wrap\">\n                    <input type=\"text\" id=\"end\">\n                </div>\n            </div>\n            <div class=\"tabs-wrap\" style=\"clear: both;padding: 14px 10px;\">\n                <div class=\"wrap\">\n                    <input type=\"checkbox\" id=\"dayRange\">\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n<style>\n    .control_wrapper {\n        padding: 2%;\n        margin: 0 auto;\n        max-width: 400px;\n    }\n\n    .e-bigger .control-section {\n        margin-top: 60px;\n    }\n\n    .tabs-wrap {\n        padding: 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 value;\r\n    var isStartTimeChange = true;\r\n    var startTime = new ej.calendars.TimePicker({\r\n        placeholder: 'Start Time',\r\n        change: onEnableEndTime\r\n    });\r\n    startTime.appendTo('#start');\r\n    var endTime = new ej.calendars.TimePicker({\r\n        placeholder: 'End Time',\r\n        enabled: false\r\n    });\r\n    endTime.appendTo('#end');\r\n\r\n    var checkboxObject = new ej.buttons.CheckBox({ label: 'Business Hours', change: changeTime });\r\n    checkboxObject.appendTo('#dayRange');\r\n\r\n    var endInput = document.getElementById('end');\r\n\r\n    function changeTime() {\r\n        var element = document.getElementById('dayRange');\r\n        isStartTimeChange = false;\r\n        if (element.checked) {\r\n            startTime.value = new Date('9/6/2017 9:00');\r\n            endTime.enabled = true;\r\n            endTime.value = new Date('9/6/2017 18:00');\r\n            startTime.readonly = true;\r\n            endTime.readonly = true;\r\n        } else {\r\n            endTime.value = null;\r\n            startTime.value = null;\r\n            endInput.value = '';\r\n            startTime.readonly = false;\r\n            endTime.readonly = false;\r\n            endTime.enabled = false;\r\n        }\r\n    }\r\n    function onEnableEndTime(args) {\r\n        if (isStartTimeChange) {\r\n            endTime.enabled = true;\r\n            endTime.value = null;\r\n            endInput.value = '';\r\n            value = new Date(+args.value);\r\n            value.setMinutes(value.getMinutes() + endTime.step);\r\n            endTime.min = value;\r\n        } else {\r\n            isStartTimeChange = true;\r\n        }\r\n    }\r\n"}