date-format-stack.json

{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-8 control-section\">\n    <div id=\"wrapper\" class=\"format\">\n        <input id=\"daterangepicker\" type=\"text\">\n        <br>\n        <br>\n    </div>\n</div>\n\n<div class=\"col-lg-4 property-section\">\n    <div>\n        <select id=\"dateformats\" class=\"form-control\">\n            <option value=\"dd&apos;/&apos;MMM&apos;/&apos;yy hh:mm a\">dd/MMM/yy hh:mm a</option>\n            <option value=\"yyyy&apos;/&apos;MM&apos;/&apos;dd HH:mm\">yyyy/MM/dd HH:mm</option>\n            <option value=\"dd&apos;/&apos;MMMM&apos;/&apos;yyyy\">dd/MMMM/yyyy</option>\n        </select>\n    </div>\n\n</div>\n\n\n","index.js":"{{ripple}}\n    var daterangepicker = new ej.calendars.DateRangePicker({\n        format: \"dd'/'MMM'/'yy hh:mm a\",// custom format \n        startDate: new Date(new Date().setDate(1)),\n        endDate: new Date(new Date().setDate(20))\n    });\n    daterangepicker.appendTo('#daterangepicker');\n\n    var dropDownInstance = new ej.dropdowns.DropDownList({\n        placeholder: 'Format',\n        floatLabelType: 'Auto',\n        change: onChange\n    });\n    dropDownInstance.appendTo('#dateformats');\n\n    function onChange() {\n        //dropdown change event handler\n        daterangepicker.format = dropDownInstance.value;\n        daterangepicker.separator = (dropDownInstance.text === 'yyyy/MM/dd HH:mm') ? 'to' : '-';\n    }\n"}