bug(EJ2-4300): Format sample updated.

pipeline · pipeline · commit ea6e7924a2d0 · 2017-10-16T06:05:39.000Z
diff --git a/src/timepicker/format-plnkr.json b/src/timepicker/format-plnkr.json
@@ -1 +1 @@
-{"app.module":"import { FormatTimePickerComponent } from './format.component';\n\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\nimport { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n\nimport { TimePickerModule } from '@syncfusion/ej2-ng-calendars';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\nimport { CheckBoxModule } from '@syncfusion/ej2-ng-buttons';\n\n\n\n\n\n\n\n\n\n\n@NgModule({\n    imports: [TimePickerModule, DropDownListModule, CheckBoxModule , HttpModule, JsonpModule, BrowserModule],\ndeclarations: [FormatTimePickerComponent],\nbootstrap: [FormatTimePickerComponent]\n})\nexport class AppModule { }","format.component":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { TimePickerComponent } from '@syncfusion/ej2-ng-calendars/src';\n/**\n\n * Default TimePicker Component\n */\n@Component({\n    selector: 'control-content',\n    styleUrls: ['timepicker-style.css'],\n    templateUrl: 'format.html',\n    encapsulation: ViewEncapsulation.None\n})\nexport class FormatTimePickerComponent {\n\n    public value: Date = new Date();\n    public interval: number = 60;\n    public customFormat : string = 'dd/MM/yyyy HH:mm';\n}","format.html":"<div class=\"control-section format\">\n    <div class=\"control_wrapper\">\n        <div class=\"tabs-wrap\">\n            <div class=\"wrap\">\n                <ej-timepicker id='timepicker' [value]='value' [step]='interval' [format]='customFormat'></ej-timepicker>\n            </div>\n        </div>\n    </div>\n</div>\n<style>\n    .control-section {\n        margin: 30px;\n    }\n\n    .control_wrapper {\n        display: block;\n        margin: 0 auto;\n        padding: 4% 0;\n        max-width: 300px;\n        border: none;\n    }\n\n    .control-section.format {\n        min-height: 160px;\n        border: 1px solid rgba(0, 0, 0, 0.12);\n        border-radius: 4px;\n    }\n\n    .e-bigger .control-section.format {\n        border: none;\n    }\n\n    .e-bigger .control-section {\n        margin-top: 60px;\n    }\n\n    #description {\n        margin: 30px;\n    }\n\n    .tabs-wrap {\n        padding: 0px 0px 10px;\n    }\n</style>","timepicker-style.css":"\n.control-section {\n    margin: 30px;\n}\n\n#control_wrapper #container {\n    min-height: 300px;\n}\n\n.e-bigger #control_wrapper #container {\n    min-height: 380px;\n}\n\n#description{\n    clear: both;\n}\n\n.form-group .content-wrapper {\n    float: left;\n    padding: 0 10px;\n}\n\n.property-panel-content {\n    padding: 0 10px 10px 0;\n}\n","index.html":"<!DOCTYPE html>\n<html>\n    \n    <head>\n        <meta name=\"author\" content=\"Syncfusion\" />\n        <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n        <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n        <script src=\"https://unpkg.com/reflect-metadata@0.1.3\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n        <script src=\"systemjs.config.js\"></script>\n    </head>\n    \n    <body>\n        <control-content>\n            <div id='loader'>Loading...</div>\n        </control-content>\n    </body>\n    \n    </html>\n    ","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\",\n        \"angular:\": \"https://unpkg.com/@angular/\"\n    },\n    map: {\n        main: 'main.ts',\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n        \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n        \"@syncfusion/ej2-pdf\": \"syncfusion:ej2-pdf/dist/ej2-pdf.umd.min.js\",\n        \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n        \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",        \n        \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\n        \n        \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n        \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n        \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n        \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n        \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n        \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n        \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n        \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n        \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n        \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n        \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n        '@angular/core': 'angular:core/bundles/core.umd.js',\n        '@angular/common': 'angular:common/bundles/common.umd.js',\n        '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n        '@angular/http': 'angular:http/bundles/http.umd.js',\n        '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n        '@angular/router': 'angular:router/bundles/router.umd.js',\n        '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n        '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n        '@angular/material': 'angular:material/bundles/material.umd.js',\n        'rxjs': 'https://unpkg.com/rxjs'\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}
+{"app.module":"import { FormatTimePickerComponent } from './format.component';\n\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\nimport { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n\nimport { TimePickerModule } from '@syncfusion/ej2-ng-calendars';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\nimport { CheckBoxModule } from '@syncfusion/ej2-ng-buttons';\n\n\n\n\n\n\n\n\n\n\n@NgModule({\n    imports: [TimePickerModule, DropDownListModule, CheckBoxModule , HttpModule, JsonpModule, BrowserModule],\ndeclarations: [FormatTimePickerComponent],\nbootstrap: [FormatTimePickerComponent]\n})\nexport class AppModule { }","format.component":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { TimePickerComponent } from '@syncfusion/ej2-ng-calendars/src';\n/**\n\n * Default TimePicker Component\n */\n@Component({\n    selector: 'control-content',\n    styleUrls: ['timepicker-style.css'],\n    templateUrl: 'format.html',\n    encapsulation: ViewEncapsulation.None\n})\nexport class FormatTimePickerComponent {\n\n    public value: Date = new Date();\n    public interval: number = 60;\n    public customFormat : string = 'HH:mm';\n}","format.html":"<div class=\"control-section format\">\n    <div class=\"control_wrapper\">\n        <div class=\"tabs-wrap\">\n            <div class=\"wrap\">\n                <ej-timepicker id='timepicker' [value]='value' [step]='interval' [format]='customFormat'></ej-timepicker>\n            </div>\n        </div>\n    </div>\n</div>\n<style>\n    .control-section {\n        margin: 30px;\n    }\n\n    .control_wrapper {\n        display: block;\n        margin: 0 auto;\n        padding: 4% 0;\n        max-width: 300px;\n        border: none;\n    }\n\n    .control-section.format {\n        min-height: 160px;\n        border: 1px solid rgba(0, 0, 0, 0.12);\n        border-radius: 4px;\n    }\n\n    .e-bigger .control-section.format {\n        border: none;\n    }\n\n    .e-bigger .control-section {\n        margin-top: 60px;\n    }\n\n    #description {\n        margin: 30px;\n    }\n\n    .tabs-wrap {\n        padding: 0px 0px 10px;\n    }\n</style>","timepicker-style.css":"\n.control-section {\n    margin: 30px;\n}\n\n#control_wrapper #container {\n    min-height: 300px;\n}\n\n.e-bigger #control_wrapper #container {\n    min-height: 380px;\n}\n\n#description{\n    clear: both;\n}\n\n.form-group .content-wrapper {\n    float: left;\n    padding: 0 10px;\n}\n\n.property-panel-content {\n    padding: 0 10px 10px 0;\n}\n","index.html":"<!DOCTYPE html>\n<html>\n    \n    <head>\n        <meta name=\"author\" content=\"Syncfusion\" />\n        <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n        <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n        <script src=\"https://unpkg.com/reflect-metadata@0.1.3\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n        <script src=\"systemjs.config.js\"></script>\n    </head>\n    \n    <body>\n        <control-content>\n            <div id='loader'>Loading...</div>\n        </control-content>\n    </body>\n    \n    </html>\n    ","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\",\n        \"angular:\": \"https://unpkg.com/@angular/\"\n    },\n    map: {\n        main: 'main.ts',\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n        \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n        \"@syncfusion/ej2-pdf\": \"syncfusion:ej2-pdf/dist/ej2-pdf.umd.min.js\",\n        \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n        \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",        \n        \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\n        \n        \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n        \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n        \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n        \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n        \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n        \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n        \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n        \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n        \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n        \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n        \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n        '@angular/core': 'angular:core/bundles/core.umd.js',\n        '@angular/common': 'angular:common/bundles/common.umd.js',\n        '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n        '@angular/http': 'angular:http/bundles/http.umd.js',\n        '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n        '@angular/router': 'angular:router/bundles/router.umd.js',\n        '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n        '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n        '@angular/material': 'angular:material/bundles/material.umd.js',\n        'rxjs': 'https://unpkg.com/rxjs'\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}
diff --git a/src/timepicker/format.component.ts b/src/timepicker/format.component.ts
@@ -14,5 +14,5 @@ export class FormatTimePickerComponent {
 
     public value: Date = new Date();
     public interval: number = 60;
-    public customFormat : string = 'dd/MM/yyyy HH:mm';
+    public customFormat : string = 'HH:mm';
 }
diff --git a/src/timepicker/format.html b/src/timepicker/format.html
@@ -13,7 +13,7 @@
             & <a target='_blank' href='https://docs.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-stringscustom'> custom date and time format strings </a> as specified in MSDN.
     </p>
     <p>
-        Here, the time value displayed with date and <code> 60 </code> minutes step interval. To know more about custom time formatting, refer the <a target='_blank' href='http://ej2.syncfusion.com/documentation/base/intl.html?lang=typescript#custom-formats'> Parsing and formatting </a>        section. By default, TimePicker component has formatted with `en` (English) culture.</p>
+        Here, the time value displayed in 24 hour format with <code> 60 </code> minute step interval. To know more about custom time formatting, refer the <a target='_blank' href='http://ej2.syncfusion.com/documentation/base/intl.html?lang=typescript#custom-formats'> Parsing and formatting </a>        section. By default, TimePicker component has formatted with `en` (English) culture.</p>
     <p>More information about TimePicker and it's configuration can be found in this
         <a href="http://ej2.syncfusion.com/angular/documentation/timepicker/getting-started.html#create-a-simple-timepicker" target="_blank"> documentation section</a>.
     </p>

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-{"app.module":"import { FormatTimePickerComponent } from './format.component';\n\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\nimport { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n\nimport { TimePickerModule } from '@syncfusion/ej2-ng-calendars';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\nimport { CheckBoxModule } from '@syncfusion/ej2-ng-buttons';\n\n\n\n\n\n\n\n\n\n\n@NgModule({\n imports: [TimePickerModule, DropDownListModule, CheckBoxModule , HttpModule, JsonpModule, BrowserModule],\ndeclarations: [FormatTimePickerComponent],\nbootstrap: [FormatTimePickerComponent]\n})\nexport class AppModule { }","format.component":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { TimePickerComponent } from '@syncfusion/ej2-ng-calendars/src';\n/*\n\n Default TimePicker Component\n /\n@Component({\n selector: 'control-content',\n styleUrls: ['timepicker-style.css'],\n templateUrl: 'format.html',\n encapsulation: ViewEncapsulation.None\n})\nexport class FormatTimePickerComponent {\n\n public value: Date = new Date();\n public interval: number = 60;\n public customFormat : string = 'dd/MM/yyyy HH:mm';\n}","format.html":"<div class=\"control-section format\">\n <div class=\"control_wrapper\">\n <div class=\"tabs-wrap\">\n <div class=\"wrap\">\n <ej-timepicker id='timepicker' [value]='value' [step]='interval' [format]='customFormat'></ej-timepicker>\n </div>\n </div>\n </div>\n</div>\n<style>\n .control-section {\n margin: 30px;\n }\n\n .control_wrapper {\n display: block;\n margin: 0 auto;\n padding: 4% 0;\n max-width: 300px;\n border: none;\n }\n\n .control-section.format {\n min-height: 160px;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n }\n\n .e-bigger .control-section.format {\n border: none;\n }\n\n .e-bigger .control-section {\n margin-top: 60px;\n }\n\n #description {\n margin: 30px;\n }\n\n .tabs-wrap {\n padding: 0px 0px 10px;\n }\n</style>","timepicker-style.css":"\n.control-section {\n margin: 30px;\n}\n\n#control_wrapper #container {\n min-height: 300px;\n}\n\n.e-bigger #control_wrapper #container {\n min-height: 380px;\n}\n\n#description{\n clear: both;\n}\n\n.form-group .content-wrapper {\n float: left;\n padding: 0 10px;\n}\n\n.property-panel-content {\n padding: 0 10px 10px 0;\n}\n","index.html":"<!DOCTYPE html>\n<html>\n \n <head>\n <meta name=\"author\" content=\"Syncfusion\" />\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n </head>\n \n <body>\n <control-content>\n <div id='loader'>Loading...</div>\n </control-content>\n </body>\n \n </html>\n ","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\",\n \"angular:\": \"https://unpkg.com/@angular/\"\n },\n map: {\n main: 'main.ts',\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-pdf\": \"syncfusion:ej2-pdf/dist/ej2-pdf.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\", \n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\n \n \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n '@angular/core': 'angular:core/bundles/core.umd.js',\n '@angular/common': 'angular:common/bundles/common.umd.js',\n '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n '@angular/http': 'angular:http/bundles/http.umd.js',\n '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n '@angular/router': 'angular:router/bundles/router.umd.js',\n '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n '@angular/material': 'angular:material/bundles/material.umd.js',\n 'rxjs': 'https://unpkg.com/rxjs'\n },\n meta: { \n '.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}
	`1`	+{"app.module":"import { FormatTimePickerComponent } from './format.component';\n\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\nimport { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n\nimport { TimePickerModule } from '@syncfusion/ej2-ng-calendars';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\nimport { CheckBoxModule } from '@syncfusion/ej2-ng-buttons';\n\n\n\n\n\n\n\n\n\n\n@NgModule({\n imports: [TimePickerModule, DropDownListModule, CheckBoxModule , HttpModule, JsonpModule, BrowserModule],\ndeclarations: [FormatTimePickerComponent],\nbootstrap: [FormatTimePickerComponent]\n})\nexport class AppModule { }","format.component":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { TimePickerComponent } from '@syncfusion/ej2-ng-calendars/src';\n/*\n\n Default TimePicker Component\n /\n@Component({\n selector: 'control-content',\n styleUrls: ['timepicker-style.css'],\n templateUrl: 'format.html',\n encapsulation: ViewEncapsulation.None\n})\nexport class FormatTimePickerComponent {\n\n public value: Date = new Date();\n public interval: number = 60;\n public customFormat : string = 'HH:mm';\n}","format.html":"<div class=\"control-section format\">\n <div class=\"control_wrapper\">\n <div class=\"tabs-wrap\">\n <div class=\"wrap\">\n <ej-timepicker id='timepicker' [value]='value' [step]='interval' [format]='customFormat'></ej-timepicker>\n </div>\n </div>\n </div>\n</div>\n<style>\n .control-section {\n margin: 30px;\n }\n\n .control_wrapper {\n display: block;\n margin: 0 auto;\n padding: 4% 0;\n max-width: 300px;\n border: none;\n }\n\n .control-section.format {\n min-height: 160px;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n }\n\n .e-bigger .control-section.format {\n border: none;\n }\n\n .e-bigger .control-section {\n margin-top: 60px;\n }\n\n #description {\n margin: 30px;\n }\n\n .tabs-wrap {\n padding: 0px 0px 10px;\n }\n</style>","timepicker-style.css":"\n.control-section {\n margin: 30px;\n}\n\n#control_wrapper #container {\n min-height: 300px;\n}\n\n.e-bigger #control_wrapper #container {\n min-height: 380px;\n}\n\n#description{\n clear: both;\n}\n\n.form-group .content-wrapper {\n float: left;\n padding: 0 10px;\n}\n\n.property-panel-content {\n padding: 0 10px 10px 0;\n}\n","index.html":"<!DOCTYPE html>\n<html>\n \n <head>\n <meta name=\"author\" content=\"Syncfusion\" />\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n </head>\n \n <body>\n <control-content>\n <div id='loader'>Loading...</div>\n </control-content>\n </body>\n \n </html>\n ","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\",\n \"angular:\": \"https://unpkg.com/@angular/\"\n },\n map: {\n main: 'main.ts',\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-pdf\": \"syncfusion:ej2-pdf/dist/ej2-pdf.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\", \n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\n \n \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n '@angular/core': 'angular:core/bundles/core.umd.js',\n '@angular/common': 'angular:common/bundles/common.umd.js',\n '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n '@angular/http': 'angular:http/bundles/http.umd.js',\n '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n '@angular/router': 'angular:router/bundles/router.umd.js',\n '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n '@angular/material': 'angular:material/bundles/material.umd.js',\n 'rxjs': 'https://unpkg.com/rxjs'\n },\n meta: { \n '.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}
Original file line number	Diff line number	Diff line change
`@@ -14,5 +14,5 @@ export class FormatTimePickerComponent {`
`14`	`14`
`15`	`15`	`public value: Date = new Date();`
`16`	`16`	`public interval: number = 60;`
`17`		`- public customFormat : string = 'dd/MM/yyyy HH:mm';`
	`17`	`+ public customFormat : string = 'HH:mm';`
`18`	`18`	`}`