Skip to content

Commit df9500e

Browse files
author
pipeline
committed
feature(EJ2-3645): DatePicker sample added
1 parent 61fa941 commit df9500e

25 files changed

+2166
-0
lines changed

‎src/common/cldr-data/main/ar/ca-gregorian.json

Lines changed: 506 additions & 0 deletions
Large diffs are not rendered by default.

‎src/common/cldr-data/main/ar/numbers.json

Lines changed: 507 additions & 0 deletions
Large diffs are not rendered by default.

‎src/common/cldr-data/main/vi/ca-gregorian.json

Lines changed: 488 additions & 0 deletions
Large diffs are not rendered by default.

‎src/common/cldr-data/main/vi/numbers.json

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
{
2+
"main": {
3+
"vi": {
4+
"identity": {
5+
"version": {
6+
"_number": "$Revision: 12879 $",
7+
"_cldrVersion": "30.0.3"
8+
},
9+
"language": "vi"
10+
},
11+
"numbers": {
12+
"defaultNumberingSystem": "latn",
13+
"otherNumberingSystems": {
14+
"native": "latn"
15+
},
16+
"minimumGroupingDigits": "1",
17+
"symbols-numberSystem-latn": {
18+
"decimal": ",",
19+
"group": ".",
20+
"list": ";",
21+
"percentSign": "%",
22+
"plusSign": "+",
23+
"minusSign": "-",
24+
"exponential": "E",
25+
"superscriptingExponent": "×",
26+
"perMille": "‰",
27+
"infinity": "∞",
28+
"nan": "NaN",
29+
"timeSeparator": ":"
30+
},
31+
"decimalFormats-numberSystem-latn": {
32+
"standard": "#,##0.###",
33+
"long": {
34+
"decimalFormat": {
35+
"1000-count-other": "0 nghìn",
36+
"10000-count-other": "00 nghìn",
37+
"100000-count-other": "000 nghìn",
38+
"1000000-count-other": "0 triệu",
39+
"10000000-count-other": "00 triệu",
40+
"100000000-count-other": "000 triệu",
41+
"1000000000-count-other": "0 tỷ",
42+
"10000000000-count-other": "00 tỷ",
43+
"100000000000-count-other": "000 tỷ",
44+
"1000000000000-count-other": "0 nghìn tỷ",
45+
"10000000000000-count-other": "00 nghìn tỷ",
46+
"100000000000000-count-other": "000 nghìn tỷ"
47+
}
48+
},
49+
"short": {
50+
"decimalFormat": {
51+
"1000-count-other": "0 N",
52+
"10000-count-other": "00 N",
53+
"100000-count-other": "000 N",
54+
"1000000-count-other": "0 Tr",
55+
"10000000-count-other": "00 Tr",
56+
"100000000-count-other": "000 Tr",
57+
"1000000000-count-other": "0 T",
58+
"10000000000-count-other": "00 T",
59+
"100000000000-count-other": "000 T",
60+
"1000000000000-count-other": "0 NT",
61+
"10000000000000-count-other": "00 NT",
62+
"100000000000000-count-other": "000 NT"
63+
}
64+
}
65+
},
66+
"scientificFormats-numberSystem-latn": {
67+
"standard": "#E0"
68+
},
69+
"percentFormats-numberSystem-latn": {
70+
"standard": "#,##0%"
71+
},
72+
"currencyFormats-numberSystem-latn": {
73+
"currencySpacing": {
74+
"beforeCurrency": {
75+
"currencyMatch": "[:^S:]",
76+
"surroundingMatch": "[:digit:]",
77+
"insertBetween": " "
78+
},
79+
"afterCurrency": {
80+
"currencyMatch": "[:^S:]",
81+
"surroundingMatch": "[:digit:]",
82+
"insertBetween": " "
83+
}
84+
},
85+
"standard": "¤ #,##0.00",
86+
"accounting": "#,##0.00 ¤",
87+
"short": {
88+
"standard": {
89+
"1000-count-other": "0 N ¤",
90+
"10000-count-other": "00 N ¤",
91+
"100000-count-other": "000 N ¤",
92+
"1000000-count-other": "0 Tr ¤",
93+
"10000000-count-other": "00 Tr ¤",
94+
"100000000-count-other": "000 Tr ¤",
95+
"1000000000-count-other": "0 T ¤",
96+
"10000000000-count-other": "00 T ¤",
97+
"100000000000-count-other": "000 T ¤",
98+
"1000000000000-count-other": "0 NT ¤",
99+
"10000000000000-count-other": "00 NT ¤",
100+
"100000000000000-count-other": "000 NT ¤"
101+
}
102+
},
103+
"unitPattern-count-other": "{0} {1}"
104+
},
105+
"miscPatterns-numberSystem-latn": {
106+
"atLeast": "{0}+",
107+
"range": "{0}-{1}"
108+
}
109+
}
110+
}
111+
}
112+
}

‎src/common/samplelist.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { toolbarAppRoutes } from '../toolbar/toolbar.module';
66
import { numericAppRoutes } from '../numerictextbox/numerictextbox.module';
77
import { dropdownlistAppRoutes } from '../dropdownlist/dropdownlist.module';
88
import { calendarAppRoutes } from '../calendar/calendar.module';
9+
import { datePickerAppRoutes } from '../datepicker/datepicker.module';
910
import { chartAppRoutes } from '../chart/chart.module';
1011
import { dialogAppRoutes } from '../dialog/dialog.module';
1112
import { circulargaugeAppRoutes } from '../circulargauge/circulargauge.module';
@@ -34,6 +35,9 @@ export let samplesList: any = [
3435
{
3536
'name': 'Calendar', 'category': 'Editors', 'order': '03', 'path': 'calendar', 'samples': calendarAppRoutes
3637
},
38+
{
39+
'name': 'DatePicker', 'category': 'Editors', 'order': '03', 'path': 'datepicker', 'samples': datePickerAppRoutes, type: "new"
40+
},
3741
{
3842
'name': 'DropDownList', 'category': 'Editors', 'order': '03', 'path': 'dropdownlist', 'samples': dropdownlistAppRoutes, 'type': 'new'
3943
},

‎src/datepicker/datepicker-style.css

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
#control_wrapper {
2+
max-width: 246px;
3+
margin: 30px auto;
4+
padding-top: 50px;
5+
}
6+
7+
.control-section {
8+
margin: 25px auto;
9+
}
10+
11+
#control_wrapper #container {
12+
min-height: 300px;
13+
}
14+
15+
.e-bigger #control_wrapper #container {
16+
min-height: 380px;
17+
}
18+
19+
span.e-icons.highlight {
20+
margin-top: -13px;
21+
display: block;
22+
margin-left: 4px;
23+
}
24+
25+
span.e-icons.highlight,
26+
span.e-icons.highlight:before {
27+
color: rgb(0, 0, 255);
28+
}
29+
30+
span.e-icons.highlight:before {
31+
content: "\e865";
32+
vertical-align: middle;
33+
margin-right: 3px;
34+
font-size: 4px;
35+
position: relative;
36+
top: -1px;
37+
font-weight: normal;
38+
}
39+
40+
.e-selected span.e-icons.highlight:before {
41+
color: #fff;
42+
}
43+
44+
span.e-icons.highlight {
45+
margin-top: -11px;
46+
display: block;
47+
margin-left: 4px;
48+
}
49+
50+
.e-calendar .e-content span.special,
51+
.e-calendar .e-content span.daycell {
52+
font-weight: bold;
53+
}
54+
55+
.e-calendar .e-content span.special {
56+
color: red;
57+
}
58+
59+
.e-calendar .e-content span.daycell {
60+
color: #ff9e00;
61+
}
62+
63+
.form-group .content-wrapper {
64+
float: left;
65+
padding: 0 10px;
66+
}
67+
68+
.property-panel-content {
69+
padding: 0 10px 10px 0;
70+
}
71+
72+
.content {
73+
width: 43%;
74+
margin: 0 auto;
75+
min-width: 185px;
76+
padding: 20px 0px;
77+
}
78+
79+
.control-label {
80+
padding: 24px 0px 0px 0px;
81+
font-size: 12px;
82+
opacity: 0.54;
83+
}
84+
85+
.e-calendar.e-rtl{
86+
max-width: 332px;
87+
}
88+
89+
.e-bigger .e-calendar.e-rtl {
90+
max-width: 332px;
91+
}
92+
.e-calendar .e-content span.special {
93+
border-radius: 50%;
94+
}
95+
96+
span.special.e-day.federal {
97+
color: orangered;
98+
}
99+
100+
span.special.e-day.luther {
101+
color: rgba(0, 0, 255, 1);
102+
}
103+
104+
span.special.e-day.Washington {
105+
color: rgba(60, 118, 61, 1);
106+
}
107+
108+
span.special.e-day.memorial {
109+
color: rgba(138, 109, 59, 1);
110+
}
111+
112+
span.special.e-day.independence {
113+
color: rgba(64, 255, 229, 1);
114+
}
115+
116+
span.special.e-day.labour {
117+
color: rgba(169, 68, 66, 1);
118+
}
119+
120+
span.special.e-day.columbus {
121+
color: rgba(139, 0, 139, 1);
122+
}
123+
124+
span.special.e-day.veterans {
125+
color: rgba(152, 251, 152, 1);
126+
}
127+
128+
span.special.e-day.thanksgiving {
129+
color: rgba(100, 149, 237, 1);
130+
}
131+
132+
span.special.e-day.christmas {
133+
color: rgba(255, 69, 0, 1);
134+
}

‎src/datepicker/datepicker.module.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2+
import { RouterModule } from '@angular/router';
3+
4+
import { DatePickerModule } from '@syncfusion/ej2-ng-calendars';
5+
6+
import { DefaultDatePickerComponent } from './default.component';
7+
import { SpecialDatePickerComponent } from './special.component';
8+
import { DisabledDatePickerComponent } from './disabled.component';
9+
import { RangeDatePickerComponent } from './range.component';
10+
import { FormatDatePickerComponent } from './format.component';
11+
import { GlobalizationComponent } from './globalization.component';
12+
13+
export const datePickerAppRoutes: Object[] = [
14+
{ path: 'datepicker/default', component: DefaultDatePickerComponent, name: 'Default Functionalities', category: 'DatePicker' },
15+
{ path: 'datepicker/range', component: RangeDatePickerComponent, name: 'Date Range', category: 'DatePicker' },
16+
{ path: 'datepicker/format', component: FormatDatePickerComponent, name: 'Date Format', category: 'DatePicker' },
17+
{ path: 'datepicker/special', component: SpecialDatePickerComponent, name: 'Special Dates', category: 'DatePicker' },
18+
{ path: 'datepicker/disabled', component: DisabledDatePickerComponent, name: 'Disable Dates', category: 'DatePicker' },
19+
{ path: 'datepicker/globalization', component: GlobalizationComponent, name: 'Globalization', category: 'DatePicker' }
20+
];
21+
22+
export const DatePickerRouter: ModuleWithProviders = RouterModule.forChild(datePickerAppRoutes);
23+
24+
@NgModule({
25+
imports: [DatePickerRouter, DatePickerModule],
26+
declarations: [
27+
DefaultDatePickerComponent,
28+
SpecialDatePickerComponent,
29+
DisabledDatePickerComponent,
30+
RangeDatePickerComponent,
31+
FormatDatePickerComponent,
32+
GlobalizationComponent
33+
],
34+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
35+
})
36+
export class DatePickerSampleModule {
37+
}

‎src/datepicker/default-plnkr.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"app.module":"import { DefaultDatePickerComponent } 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 { DatePickerModule } from '@syncfusion/ej2-ng-calendars';\n\n\n\n\n\n\n\n\n\n\n\n\n@NgModule({\n imports: [DatePickerModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [DefaultDatePickerComponent],\nbootstrap: [DefaultDatePickerComponent]\n})\nexport class AppModule { }","default.component":"import { Component, ViewEncapsulation, Inject } from '@angular/core';\n@Component({\n selector: 'control-content',\n styleUrls: ['datepicker-style.css'],\n templateUrl: 'default.html',\n encapsulation: ViewEncapsulation.None\n})\nexport class DefaultDatePickerComponent {\n\n public date: Object = new Date()\n\n \n\n}","default.html":"<div class=\"control-section\">\n <div id=\"control_wrapper\">\n <ej-datepicker placeholder='Choose a date'></ej-datepicker>\n </div>\n</div>","datepicker-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.e-bigger #control_wrapper #container {\n min-height: 380px;\n}\n\nspan.e-icons.highlight {\n margin-top: -13px;\n display: block;\n margin-left: 4px;\n}\n\nspan.e-icons.highlight,\nspan.e-icons.highlight:before {\n color: rgb(0, 0, 255);\n}\n\nspan.e-icons.highlight:before {\n content: \"\\e865\";\n vertical-align: middle;\n margin-right: 3px;\n font-size: 4px;\n position: relative;\n top: -1px;\n font-weight: normal;\n}\n\n.e-selected span.e-icons.highlight:before {\n color: #fff;\n}\n\nspan.e-icons.highlight {\n margin-top: -11px;\n display: block;\n margin-left: 4px;\n}\n\n.e-calendar .e-content span.special,\n.e-calendar .e-content span.daycell {\n font-weight: bold;\n}\n\n.e-calendar .e-content span.special {\n color: red;\n}\n\n.e-calendar .e-content span.daycell {\n color: #ff9e00;\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\n.control-label {\n padding: 24px 0px 0px 0px;\n font-size: 12px;\n opacity: 0.54;\n}\n\n.e-calendar.e-rtl{\n max-width: 332px;\n}\n\n.e-bigger .e-calendar.e-rtl {\n max-width: 332px;\n}\n.e-calendar .e-content span.special {\n border-radius: 50%;\n}\n\nspan.special.e-day.federal {\n color: orangered;\n}\n\nspan.special.e-day.luther {\n color: rgba(0, 0, 255, 1);\n}\n\nspan.special.e-day.Washington {\n color: rgba(60, 118, 61, 1);\n}\n\nspan.special.e-day.memorial {\n color: rgba(138, 109, 59, 1);\n}\n\nspan.special.e-day.independence {\n color: rgba(64, 255, 229, 1);\n}\n\nspan.special.e-day.labour {\n color: rgba(169, 68, 66, 1);\n}\n\nspan.special.e-day.columbus {\n color: rgba(139, 0, 139, 1);\n}\n\nspan.special.e-day.veterans {\n color: rgba(152, 251, 152, 1);\n}\n\nspan.special.e-day.thanksgiving {\n color: rgba(100, 149, 237, 1);\n}\n\nspan.special.e-day.christmas {\n color: rgba(255, 69, 0, 1);\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/datepicker/default.component.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component, ViewEncapsulation, Inject } from '@angular/core';
2+
@Component({
3+
selector: 'control-content',
4+
styleUrls: ['datepicker-style.css'],
5+
templateUrl: 'default.html',
6+
encapsulation: ViewEncapsulation.None
7+
})
8+
export class DefaultDatePickerComponent {
9+
10+
public date: Object = new Date()
11+
12+
constructor( @Inject('sourceFiles') private sourceFiles: any) {
13+
sourceFiles.files = ['datepicker-style.css'];
14+
}
15+
16+
}

‎src/datepicker/default.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="control-section">
2+
<div id="control_wrapper">
3+
<ej-datepicker placeholder='Choose a date'></ej-datepicker>
4+
</div>
5+
</div>
6+
<div id="description">
7+
<p>
8+
The <code>DatePicker</code> is a graphical user interface control that allows user to select the date from the calendar
9+
or entering through the input element.
10+
</p>
11+
<p>More information on the DatePicker instantiation can be found in this
12+
<a href="http://ej2.syncfusion.com/angular/documentation/datepicker/" target="_blank"> documentation section</a>.</p>
13+
</div>

0 commit comments

Comments
 (0)