Ej2 4650 date range picker samples

Author: pipeline

src/common/samplelist.ts

@@ -9,6 +9,7 @@ import { comboboxAppRoutes } from '../combobox/combobox.module';
 import { autoCompleteAppRoutes } from '../autocomplete/autocomplete.module';
 import { calendarAppRoutes } from '../calendar/calendar.module';
 import { datePickerAppRoutes } from '../datepicker/datepicker.module';
+import { dateRangePickerAppRoutes } from '../daterangepicker/daterangepicker.module';
 import { chartAppRoutes } from '../chart/chart.module';
 import { dialogAppRoutes } from '../dialog/dialog.module';
 import { circulargaugeAppRoutes } from '../circulargauge/circulargauge.module';
@@ -42,6 +43,9 @@ export let samplesList: any = [
     {
         'name': 'DatePicker', 'category': 'Editors', 'order': '03', 'path': 'datepicker', 'samples': datePickerAppRoutes, type: "new"
     },
+    {
+        'name': 'DateRangePicker', 'category': 'Editors', 'order': '03', 'path': 'daterangepicker', 'samples': dateRangePickerAppRoutes, type: "new"
+    },
     {
         'name': 'DropDownList', 'category': 'Editors', 'order': '03', 'path': 'dropdownlist', 'samples': dropdownlistAppRoutes
     },

src/common/sb.router.ts

@@ -6,6 +6,7 @@ import { ComboBoxSampleModule } from '../combobox/combobox.module';
 import { AutoCompleteSampleModule } from '../autocomplete/autocomplete.module';
 import { CalendarSampleModule } from '../calendar/calendar.module';
 import { DatePickerSampleModule } from '../datepicker/datepicker.module';
+import { DateRangePickerSampleModule } from '../daterangepicker/daterangepicker.module';
 import { TimePickerSampleModule } from '../timepicker/timepicker.module';
 import { ButtonModule } from '../button/button.module';
 import { ListViewSampleModule } from '../listview/listview.module';
@@ -32,6 +33,7 @@ const appRoutes: any = [
     { path: 'autocomplete', loadChildren: AutoCompleteSampleModule },
     { path: 'calendar', loadChildren: CalendarSampleModule },
     { path: 'datepicker', loadChildren: DatePickerSampleModule },
+    { path: 'daterangepicker', loadChildren: DateRangePickerSampleModule },
     { path: 'timepicker', loadChildren: TimePickerSampleModule },
     { path: 'numerictextbox', loadChildren: NumericModule },
     { path: 'listview', loadChildren: ListViewSampleModule },
@@ -56,6 +58,7 @@ const appRoutes: any = [
         DropDownListSampleModule,
         CalendarSampleModule,
         DatePickerSampleModule,
+        DateRangePickerSampleModule,
         TimePickerSampleModule,
         NumericModule,
         ListViewSampleModule,

src/daterangepicker/daterangepicker-style.css

@@ -0,0 +1,29 @@
+#control_wrapper {
+    max-width: 246px;
+    margin: 30px auto;
+    padding-top: 50px;
+}
+
+.control-section {
+    margin: 25px auto;
+}
+
+#control_wrapper #container {
+    min-height: 300px;
+}
+
+.form-group .content-wrapper {
+    float: left;
+    padding: 0 10px;
+}
+
+.property-panel-content {
+    padding: 0 10px 10px 0;
+}
+
+.content {
+    width: 43%;
+    margin: 0 auto;
+    min-width: 185px;
+    padding: 20px 0px;
+}

src/daterangepicker/daterangepicker.module.ts

@@ -0,0 +1,36 @@
+import { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { DateRangePickerModule } from '@syncfusion/ej2-ng-calendars';
+
+import { DefaultDateRangePickerComponent } from './default.component';
+import { GlobalizationComponent } from './globalization.component';
+import { MinMaxComponent } from './minMax.component';
+import { MinMaxDaysComponent } from './minMaxDays.component';
+import { PresetsComponent } from './presets.component';
+
+
+export const dateRangePickerAppRoutes: Object[] = [
+    { path: ':theme/daterangepicker/default', component: DefaultDateRangePickerComponent, name: 'Default Functionalities', category: 'DateRangePicker' },
+    { path: ':theme/daterangepicker/minMax', component: MinMaxComponent, name: 'Date Range', category: 'DateRangePicker' },
+    { path: ':theme/daterangepicker/minMaxDays', component: MinMaxDaysComponent, name: 'Restrict Range', category: 'DateRangePicker' },
+    { path: ':theme/daterangepicker/globalization', component: GlobalizationComponent, name: 'Globalization', category: 'DateRangePicker' },
+    { path: ':theme/daterangepicker/presets', component: PresetsComponent, name: 'Preset Ranges', category: 'DateRangePicker' },
+];
+
+export const DateRangePickerRouter: ModuleWithProviders = RouterModule.forChild(dateRangePickerAppRoutes);
+
+@NgModule({
+    imports: [DateRangePickerRouter, DateRangePickerModule],
+    declarations: [
+        DefaultDateRangePickerComponent,
+        GlobalizationComponent,
+        MinMaxComponent,
+        MinMaxDaysComponent,
+        PresetsComponent
+
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class DateRangePickerSampleModule {
+}

src/daterangepicker/default-plnkr.json

@@ -0,0 +1 @@
+{"app.module":"import { DefaultDateRangePickerComponent } from './default.component';\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 { DateRangePickerModule } from '@syncfusion/ej2-ng-calendars';\n\n\n\n\n\n\n\n\n\n\n\n\n@NgModule({\n    imports: [DateRangePickerModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [DefaultDateRangePickerComponent],\nbootstrap: [DefaultDateRangePickerComponent]\n})\nexport class AppModule { }","default.component":"import { Component, ViewEncapsulation, Inject } from '@angular/core';\n@Component({\n    selector: 'control-content',\n    styleUrls: ['daterangepicker-style.css'],\n    templateUrl: 'default.html',\n    encapsulation: ViewEncapsulation.None\n})\nexport class DefaultDateRangePickerComponent {\n\n    public date: Object = new Date()\n\n    \n\n}","default.html":"<div class=\"control-section\">\n    <div id=\"control_wrapper\">\n        <ej-daterangepicker placeholder='Select a range'></ej-daterangepicker>\n    </div>\n</div>","daterangepicker-style.css":"#control_wrapper {\n    max-width: 246px;\n    margin: 30px auto;\n    padding-top: 50px;\n}\n\n.control-section {\n    margin: 25px auto;\n}\n\n#control_wrapper #container {\n    min-height: 300px;\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\n.content {\n    width: 43%;\n    margin: 0 auto;\n    min-width: 185px;\n    padding: 20px 0px;\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\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);"}

src/daterangepicker/default.component.ts

@@ -0,0 +1,16 @@
+import { Component, ViewEncapsulation, Inject } from '@angular/core';
+@Component({
+    selector: 'control-content',
+    styleUrls: ['daterangepicker-style.css'],
+    templateUrl: 'default.html',
+    encapsulation: ViewEncapsulation.None
+})
+export class DefaultDateRangePickerComponent {
+
+    public date: Object = new Date()
+
+    constructor( @Inject('sourceFiles') private sourceFiles: any) {
+        sourceFiles.files = ['daterangepicker-style.css'];
+    }
+
+}

src/daterangepicker/default.html

@@ -0,0 +1,13 @@
+<div class="control-section">
+    <div id="control_wrapper">
+        <ej-daterangepicker placeholder='Select a range'></ej-daterangepicker>
+    </div>
+</div>
+<div id="description">
+    <p>
+        <code>DateRangePicker</code> is an interactive component that allows user to select a range from the calendar or set a range value.
+    </p>
+    <p>More information on the DateRangePicker instantiation can be found in this
+        <a href="http://ej2.syncfusion.com/angular/documentation/daterangepicker/" target="_blank"> documentation section</a>.</p>
+
+</div>

src/daterangepicker/globalization-plnkr.json

@@ -0,0 +1,75 @@
+import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
+import { DateRangePickerComponent } from '@syncfusion/ej2-ng-calendars';
+import { loadCldr, L10n } from '@syncfusion/ej2-base';
+
+@Component({
+    selector: 'control-content',
+    templateUrl: 'globalization.html',
+    styleUrls: ['daterangepicker-style.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class GlobalizationComponent {
+    @ViewChild('ejDateRangePicker') ejDateRangePicker: DateRangePickerComponent;    
+    public date: Object = new Date();
+    locale: string = 'de';
+    ngOnInit(): void {
+        L10n.load({
+            'de': {
+                'daterangepicker': {
+                    placeholder: 'Einen Bereich auswählen',
+                    startLabel: 'Anfangsdatum',
+                    endLabel: 'Enddatum',
+                    applyText: 'Sich bewerben',
+                    cancelText: 'Stornieren',
+                    selectedDays: 'Ausgewählte Tage',
+                    days: 'Tage',
+                    customRange: 'benutzerdefinierten Bereich'
+                }
+            },
+            'en': {
+                'daterangepicker': {
+                    placeholder: 'Select a range ',
+                    startLabel: 'Start Date',
+                    endLabel: 'End Date',
+                    applyText: 'Apply',
+                    cancelText: 'Cancel',
+                    selectedDays: 'Selected Days',
+                    days: 'Days',
+                    customRange: 'Custom Range'
+                }
+            },
+            'ar': {
+                'daterangepicker': {
+                    placeholder: 'حدد نطاقا',
+                    startLabel: 'تاريخ البدء',
+                    endLabel: 'تاريخ الانتهاء',
+                    applyText: 'تطبيق',
+                    cancelText: 'إلغاء',
+                    selectedDays: 'الأيام المحددة',
+                    days: 'أيام',
+                    customRange: 'نطاق مخصص'
+                }
+            }
+        });
+
+        loadCldr(
+            require('../common/cldr-data/supplemental/numberingSystems.json'),  
+            require('../common/cldr-data/main/de/ca-gregorian.json'),
+            require('../common/cldr-data/main/de/numbers.json'),
+            require('../common/cldr-data/main/de/timeZoneNames.json'),
+            require('../common/cldr-data/main/ar/ca-gregorian.json'),
+            require('../common/cldr-data/main/ar/numbers.json'),
+            require('../common/cldr-data/main/ar/timeZoneNames.json'),
+        );
+    }
+    changeLocale() {
+        let culture: string = (document.getElementById('cultures') as HTMLSelectElement).value;
+        this.ejDateRangePicker.locale = culture;
+        this.ejDateRangePicker.locale === 'ar' ? this.ejDateRangePicker.enableRtl = true : this.ejDateRangePicker.enableRtl = false;
+        this.ejDateRangePicker.dataBind();
+
+    }
+    constructor( @Inject('sourceFiles') private sourceFiles: any) {
+        sourceFiles.files = ['daterangepicker-style.css'];
+    }
+}

src/daterangepicker/globalization.component.ts

@@ -0,0 +1,40 @@
+<div class="control-section">
+    <div class="col-lg-8 content-wrapper">
+        <div class="content">
+            <div>
+                <ej-daterangepicker #ejDateRangePicker locale="de">></ej-daterangepicker>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-4 property-section ">
+        <div class="property-panel-section ">
+            <div class="property-panel-header ">Properties</div>
+            <div class="property-panel-content ">
+                <table id="property " class="property-panel-table " title="Properties ">
+                    <tr>
+                        <td>
+                            <div>Culture</div>
+                        </td>
+                        <td>
+                            <div>
+                                <select id="cultures" class="form-control " (change)="changeLocale()">
+                        <option value="de">de</option>
+                        <option value="ar">ar</option>
+                        <option value="en">en</option>
+                      </select>
+                            </div>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+<div id="description">
+    <p>
+        DateRangePicker component was rendered with <code>German</code> culture. Here the date separator, week header and month text content are updated based on current culture. You can also change the control culture by selecting it from the culture options in the properties panel.
+    </p>
+    <p>More information on the globalization configuration can be found in this <a href="http://ej2.syncfusion.com/angular/documentation/daterangepicker/globalization.html"
+            target="_blank"> documentation section</a>.</p>
+
+</div>