Skip to content

Commit f1bf36b

Browse files
author
pipeline
committed
feature(EJ2-4650): Committed DateRange samples
1 parent 25b33a3 commit f1bf36b

18 files changed

+260
-2
lines changed

‎src/common/sampleList.ts‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎src/common/sampleOrder.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"Data Visualization": ["Chart", "Circular Gauge", "Linear Gauge"],
33
"Grids": ["Grid"],
4-
"Editors": ["Form Validator", "DropDownList", "ComboBox", "AutoComplete", "Calendar", "DatePicker", "NumericTextBox", "Button", "TextBoxes", "TimePicker", "MaskedTextBox"],
4+
"Editors": ["Form Validator", "DropDownList", "ComboBox", "AutoComplete", "Calendar", "DatePicker", "DateRangePicker", "NumericTextBox", "Button", "TextBoxes", "TimePicker", "MaskedTextBox"],
55
"Layout": ["ListView", "Dialog", "Tooltip"],
66
"Navigation": ["Toolbar"]
77
}

‎src/daterangepicker/default-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { DateRangePicker } from '@syncfusion/ej2-calendars';\n/**\n * Default DateRangePicker sample\n */\n\n let daterangepicker: DateRangePicker = new DateRangePicker({placeholder: 'Select a range'});\n daterangepicker.appendTo('#daterangepicker');\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\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<body>\n<div class=\"col-lg-12 control-section\">\n <div id=\"wrapper\">\n <input id=\"daterangepicker\" type=\"text\"><br><br>\n </div>\n</div>\n\n<style>\n #wrapper {\n max-width: 246px;\n margin: 30px auto;\n padding-top: 50px;\n }\n</style>\n\n</body></html>","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 },\n map: {\n main: \"index.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-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.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 },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}

‎src/daterangepicker/default.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div class="col-lg-12 control-section">
2+
<div id="wrapper">
3+
<input id="daterangepicker" type="text" /><br/><br/>
4+
</div>
5+
</div>
6+
<div id="description">
7+
<p>
8+
<code>DateRangePicker</code> is an interactive component that allows user to select a range from the calendar or set a range value.
9+
</p>
10+
<p>More information on the DateRangePicker instantiation can be found in this
11+
<a href="http://ej2.syncfusion.com/documentation/daterangepicker/" target="_blank"> documentation section</a>.</p>
12+
</div>
13+
<style>
14+
#wrapper {
15+
max-width: 246px;
16+
margin: 30px auto;
17+
padding-top: 50px;
18+
}
19+
</style>

‎src/daterangepicker/default.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { DateRangePicker } from '@syncfusion/ej2-calendars';
2+
/**
3+
* Default DateRangePicker sample
4+
*/
5+
this.default = (): void => {
6+
let daterangepicker: DateRangePicker = new DateRangePicker({placeholder: 'Select a range'});
7+
daterangepicker.appendTo('#daterangepicker');
8+
};

‎src/daterangepicker/globalization-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎src/daterangepicker/globalization.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<div class="col-lg-8 control-section">
2+
<div id="wrapper">
3+
<input id="daterangepicker" type="text" /><br/><br/>
4+
</div>
5+
</div>
6+
7+
<div class="col-lg-4 property-section">
8+
<table id="property" title="Properties">
9+
<tr>
10+
<td>
11+
<div>Culture</div>
12+
</td>
13+
<td>
14+
<div>
15+
<select id="cultures" class="form-control">
16+
<option value="de">de</option>
17+
<option value="ar">ar</option>
18+
<option value="en">en</option>
19+
</select>
20+
</div>
21+
</td>
22+
</tr>
23+
</table>
24+
</div>
25+
<div id="description">
26+
<p>
27+
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.
28+
</p>
29+
<p>More information on the globalization configuration can be found in this <a href="http://ej2.syncfusion.com/documentation/daterangepicker/globalization.html"
30+
target="_blank"> documentation section</a>.</p>
31+
</div>
32+
<style>
33+
.property-panel-content {
34+
padding: 0 10px 10px 0;
35+
}
36+
37+
#wrapper {
38+
max-width: 280px;
39+
margin: 30px auto;
40+
padding-top: 50px;
41+
}
42+
</style>

‎src/daterangepicker/globalization.ts‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { DateRangePicker } from '@syncfusion/ej2-calendars';
2+
import { loadCldr, L10n, Internationalization } from '@syncfusion/ej2-base';
3+
import * as numberingSystems from '../common/cldr-data/supplemental/numberingSystems.json';
4+
import * as detimeZoneNames from '../common/cldr-data/main/de/timeZoneNames.json';
5+
import * as degregorian from '../common/cldr-data/main/de/ca-gregorian.json';
6+
import * as denumbers from '../common/cldr-data/main/de/numbers.json';
7+
import * as argregorian from '../common/cldr-data/main/ar/ca-gregorian.json';
8+
import * as arnumbers from '../common/cldr-data/main/ar/numbers.json';
9+
import * as artimeZoneNames from '../common/cldr-data/main/ar/timeZoneNames.json';
10+
/**
11+
* Globalization DateRangePicker sample
12+
*/
13+
14+
this.default = (): void => {
15+
L10n.load({
16+
'de': {
17+
'daterangepicker': {
18+
placeholder: 'Einen Bereich auswählen',
19+
startLabel: 'Anfangsdatum',
20+
endLabel: 'Enddatum',
21+
applyText: 'Sich bewerben',
22+
cancelText: 'Stornieren',
23+
selectedDays: 'Ausgewählte Tage',
24+
days: 'Tage',
25+
customRange: 'benutzerdefinierten Bereich'
26+
}
27+
},
28+
'en': {
29+
'daterangepicker': {
30+
placeholder: 'Select a range ',
31+
startLabel: 'Start Date',
32+
endLabel: 'End Date',
33+
applyText: 'Apply',
34+
cancelText: 'Cancel',
35+
selectedDays: 'Selected Days',
36+
days: 'Days',
37+
customRange: 'Custom Range'
38+
}
39+
},
40+
'ar': {
41+
'daterangepicker': {
42+
placeholder: 'حدد نطاقا',
43+
startLabel: 'تاريخ البدء',
44+
endLabel: 'تاريخ الانتهاء',
45+
applyText: 'تطبيق',
46+
cancelText: 'إلغاء',
47+
selectedDays: 'الأيام المحددة',
48+
days: 'أيام',
49+
customRange: 'نطاق مخصص'
50+
}
51+
}
52+
});
53+
54+
// loadCldr method to load the culture specific JSON file.
55+
loadCldr(numberingSystems, detimeZoneNames, degregorian, denumbers, argregorian, arnumbers, artimeZoneNames);
56+
let daterangepicker: DateRangePicker = new DateRangePicker({
57+
locale: 'de'
58+
});
59+
daterangepicker.appendTo('#daterangepicker');
60+
61+
let globalize: Internationalization = new Internationalization(daterangepicker.locale);
62+
document.getElementById('cultures').addEventListener('change', changeLocale);
63+
64+
function changeLocale(): void {
65+
let culture: string = (document.getElementById('cultures') as HTMLSelectElement).value;
66+
daterangepicker.locale = culture;
67+
daterangepicker.locale === 'ar' ? daterangepicker.enableRtl = true : daterangepicker.enableRtl = false;
68+
globalize = new Internationalization(daterangepicker.locale);
69+
daterangepicker.dataBind();
70+
}
71+
};

‎src/daterangepicker/minmax-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { DateRangePicker } from '@syncfusion/ej2-calendars';\n/**\n * DateRangePicker Min/Max range Sample\n */\n\n let daterangepicker: DateRangePicker = new DateRangePicker({\n placeholder: 'Select a range',\n min: new Date('1/15/2017'),\n max: new Date('12/20/2017')\n });\n daterangepicker.appendTo('#daterangepicker');\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\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<body>\n<div class=\"col-lg-12 control-section\">\n <div id=\"wrapper\">\n <input id=\"daterangepicker\" type=\"text\"><br><br>\n </div>\n</div>\n\n<style>\n #wrapper {\n max-width: 246px;\n margin: 30px auto;\n padding-top: 50px;\n }\n</style>\n\n</body></html>","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 },\n map: {\n main: \"index.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-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.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 },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}

‎src/daterangepicker/minmax.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="col-lg-12 control-section">
2+
<div id="wrapper">
3+
<input id="daterangepicker" type="text" /><br/><br/>
4+
</div>
5+
</div>
6+
<div id="description">
7+
<p>
8+
DateRangePicker has <code>min</code> and <code>max</code> support to restrict the user to select a value from the given range.
9+
Values in this range only will be enabled.
10+
In this sample, we have specified <code>min</code> range as <code>Jan 15, 2017</code> and <code>max</code> range as <code>Dec 20, 2017</code>.User will able to select values between in this range only.
11+
</p>
12+
<p>More information on the DateRangePicker min/max support can be found in this
13+
<a href="http://ej2.syncfusion.com/documentation/daterangepicker/range-restriction.html#restrict-the-range-within-a-range"
14+
target="_blank"> documentation section</a>.</p>
15+
</div>
16+
<style>
17+
#wrapper {
18+
max-width: 246px;
19+
margin: 30px auto;
20+
padding-top: 50px;
21+
}
22+
</style>

0 commit comments

Comments
 (0)