Skip to content

Commit a4d88b0

Browse files
author
pipeline
committed
bug(EJ2-5261): Sample level corrections updated.
1 parent aaddcbf commit a4d88b0

File tree

8 files changed

+23
-20
lines changed

8 files changed

+23
-20
lines changed

‎production/react/demos/samples/calendar/internationalization/app/index.tsx

-15 Bytes
Binary file not shown.

‎production/react/demos/src/calendar/calendar-routes.tsx

0 Bytes
Binary file not shown.

‎production/react/demos/src/calendar/config.tsx

1 Byte
Binary file not shown.

‎production/react/demos/src/calendar/internationalization.tsx

-10 Bytes
Binary file not shown.

‎samples/calendar/internationalization/app/index.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import * as detimeZoneNames from './common/cldr-data/main/de/timeZoneNames.json'
1313
/* loadCldr method to load the culture specific JSON file.*/
1414
loadCldr(numberingSystems, degregorian, denumbers, detimeZoneNames);
1515

16-
export class culture extends SampleBase<{}, {}> {
16+
export class Culture extends SampleBase<{}, {}> {
1717
private calendarInstance: CalendarComponent;
1818
private dropElement: HTMLSelectElement;
1919
/*Apply selected locale to the component*/
@@ -26,14 +26,19 @@ export class culture extends SampleBase<{}, {}> {
2626
(document.getElementById('date_label') as HTMLElement).textContent = 'Selected Value: ' + globalize.formatDate(this.calendarInstance.value);
2727
}
2828
}
29+
public onChange(args: ChangedEventArgs): void {
30+
/*Displays selected date in the label*/
31+
let globalize: Internationalization = new Internationalization(this.calendarInstance.locale);
32+
(document.getElementById('date_label') as HTMLElement).textContent = 'Selected Value: ' + globalize.formatDate(this.calendarInstance.value);
33+
}
2934

3035
render() {
3136
return (
3237
<div className='control-pane'>
3338
<div className='control-section row'>
3439
<div className='col-lg-9'>
3540
<div className='calendar-control-section'>
36-
<CalendarComponent change={onChange} locale='de' ref={calendar => this.calendarInstance = calendar} ></CalendarComponent>
41+
<CalendarComponent change={this.onChange.bind(this)} locale='de' ref={calendar => this.calendarInstance = calendar} ></CalendarComponent>
3742
<label id='date_label'>Selected Value:</label>
3843
</div>
3944
</div>
@@ -44,7 +49,7 @@ export class culture extends SampleBase<{}, {}> {
4449
<td style={{ width: '30%' }}>
4550
<div className='col-md-4' style={{ paddingTop: '8px' }}>
4651
Culture
47-
</div>
52+
</div>
4853
</td>
4954
<td style={{ width: '70%', paddingRight: '10px' }}>
5055
<div>
@@ -64,8 +69,5 @@ export class culture extends SampleBase<{}, {}> {
6469
)
6570
}
6671
}
67-
function onChange(args: ChangedEventArgs): void {
68-
/*Displays selected date in the label*/
69-
(document.getElementById('date_label') as HTMLElement).textContent = 'Selected Value: ' + args.value.toLocaleDateString();
70-
}
71-
ReactDOM.render(<culture />, document.getElementById('sample'));
72+
73+
ReactDOM.render(<Culture />, document.getElementById('sample'));

‎src/calendar/calendar-routes.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Default } from './default';
44
import { Range } from './range';
55
import { Disabled } from './disabled';
66
import { Special } from './special';
7-
import { culture } from './internationalization';
7+
import { Culture } from './internationalization';
88

99

1010
export const calendarRoutes = (
@@ -13,7 +13,7 @@ export const calendarRoutes = (
1313
<Route path='/:theme/calendar/range' component={ Range }/>
1414
<Route path='/:theme/calendar/disabled' component={ Disabled }/>
1515
<Route path='/:theme/calendar/special' component={ Special }/>
16-
<Route path='/:theme/calendar/internationalization' component={ culture }/>
16+
<Route path='/:theme/calendar/internationalization' component={ Culture }/>
1717

1818
</div>
1919
)

‎src/calendar/config.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ export const CalendarSampleOrder: Object = [
33
{ 'path': 'calendar/range', 'component': 'Range', 'name': 'Date Range', 'order': '01', 'category': 'Calendar' },
44
{ 'path': 'calendar/disabled', 'component': 'Disabled', 'name': 'Disabled Dates', 'order': '01', 'category': 'Calendar' },
55
{ 'path': 'calendar/special', 'component': 'Special', 'name': 'Special Dates', 'order': '01', 'category': 'Calendar' },
6-
{ 'path': 'calendar/internationalization', 'component': 'culture', 'name': 'Internationalization', 'order': '01', 'category': 'Calendar' }
6+
{ 'path': 'calendar/internationalization', 'component': 'Culture', 'name': 'Internationalization', 'order': '01', 'category': 'Calendar' }
77
]

‎src/calendar/internationalization.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import * as detimeZoneNames from '../common/cldr-data/main/de/timeZoneNames.json
1313
/* loadCldr method to load the culture specific JSON file.*/
1414
loadCldr(numberingSystems, degregorian, denumbers, detimeZoneNames);
1515

16-
export class culture extends SampleBase<{}, {}> {
16+
export class Culture extends SampleBase<{}, {}> {
1717
private calendarInstance: CalendarComponent;
1818
private dropElement: HTMLSelectElement;
1919
/*Apply selected locale to the component*/
@@ -26,14 +26,19 @@ export class culture extends SampleBase<{}, {}> {
2626
(document.getElementById('date_label') as HTMLElement).textContent = 'Selected Value: ' + globalize.formatDate(this.calendarInstance.value);
2727
}
2828
}
29+
public onChange(args: ChangedEventArgs): void {
30+
/*Displays selected date in the label*/
31+
let globalize: Internationalization = new Internationalization(this.calendarInstance.locale);
32+
(document.getElementById('date_label') as HTMLElement).textContent = 'Selected Value: ' + globalize.formatDate(this.calendarInstance.value);
33+
}
2934

3035
render() {
3136
return (
3237
<div className='control-pane'>
3338
<div className='control-section row'>
3439
<div className='col-lg-9'>
3540
<div className='calendar-control-section'>
36-
<CalendarComponent change={onChange} locale='de' ref={calendar => this.calendarInstance = calendar} ></CalendarComponent>
41+
<CalendarComponent change={this.onChange.bind(this)} locale='de' ref={calendar => this.calendarInstance = calendar} ></CalendarComponent>
3742
<label id='date_label'>Selected Value:</label>
3843
</div>
3944
</div>
@@ -44,7 +49,7 @@ export class culture extends SampleBase<{}, {}> {
4449
<td style={{ width: '30%' }}>
4550
<div className='col-md-4' style={{ paddingTop: '8px' }}>
4651
Culture
47-
</div>
52+
</div>
4853
</td>
4954
<td style={{ width: '70%', paddingRight: '10px' }}>
5055
<div>
@@ -67,17 +72,13 @@ export class culture extends SampleBase<{}, {}> {
6772
<div id='description'>
6873
<p>
6974
The calendar control was rendered with German 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.
70-
</p>
75+
</p>
7176
<p>
7277
More information on the internationalization configuration can be found in this <a target='_blank'
7378
href='http://ej2.syncfusion.com/react/documentation/base/internationalization.html'>documentation</a> section.
74-
</p>
79+
</p>
7580
</div>
7681
</div>
7782
)
7883
}
7984
}
80-
function onChange(args: ChangedEventArgs): void {
81-
/*Displays selected date in the label*/
82-
(document.getElementById('date_label') as HTMLElement).textContent = 'Selected Value: ' + args.value.toLocaleDateString();
83-
}

0 commit comments

Comments
 (0)