-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f85deb6
commit dbb453d
Showing
1 changed file
with
124 additions
and
124 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,124 +1,124 @@ | ||
| [](https://app.shippable.com/projects/5819ee767d9db80f006078c2) | ||
|
|
||
| # DevExtreme-Intl | ||
|
|
||
| This integration module enables localization of [DevExtreme](http://js.devexpress.com/) widgets using the global [Intl](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Intl) object of the ECMAScript Internationalization API. | ||
|
|
||
| ## Getting started | ||
|
|
||
| ### Using a script tag | ||
|
|
||
| Add a script tag for `devextreme-intl` behind your tag for the `devextreme` script: | ||
|
|
||
| ```html | ||
| <script src="https://unpkg.com/devextreme-intl/dist/devextreme-intl.js"></script> | ||
| ``` | ||
| or | ||
| ```html | ||
| <script src="https://unpkg.com/devextreme-intl/dist/devextreme-intl.min.js"></script> | ||
| ``` | ||
|
|
||
| See [this example with the relevant script tag in place](/blob/master/examples/bundled.html). | ||
|
|
||
| ### Using npm modules | ||
|
|
||
| 1. Install the `devextreme-intl` module: | ||
|
|
||
| `npm install devextreme-intl` | ||
|
|
||
| 2. Use an `import` call to make `devextreme-intl` available to your code: | ||
|
|
||
| ```js | ||
| import 'devextreme-intl'; | ||
| ``` | ||
|
|
||
|
|
||
| See [this example using modules](/blob/master/examples/modular.html). | ||
|
|
||
| ## Browser support | ||
|
|
||
| [Some older browsers](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Intl#Browser_compatibility) don't support the ECMAScript Internationalization API. You can use the [Intl.js polyfill](https://github.com/andyearnshaw/Intl.js/#intljs-) to support a wide range of browsers. | ||
|
|
||
| ## API | ||
|
|
||
| In addition to the [DevExtreme format object structure](https://js.devexpress.com/Documentation/16_2/ApiReference/Common/Object_Structures/format/), formats can be specified which are compatible with the `options` parameter of the Intl [NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat#Parameters) and [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat#Parameters). | ||
|
|
||
| Here is an example for the use of Intl formats in DataGrid columns: | ||
|
|
||
| ```js | ||
| $("#datagrid").dxDataGrid({ | ||
| dataSource: dataSource, | ||
| columns: [{ | ||
| dataField: "OrderDate", | ||
| format: { year: "2-digit", month: "narrow", day: "2-digit" } | ||
| }, { | ||
| dataField: "SaleAmount", | ||
| format: { style: "currency", currency: "EUR", useGrouping: true, minimumSignificantDigits: 3 } | ||
| }] | ||
| }); | ||
| ``` | ||
|
|
||
| See [more examples here](/tree/master/examples). | ||
|
|
||
| You can find full documentation of the localization API in the [DevExtreme documentation](https://js.devexpress.com/Documentation/16_2/Guide/UI_Widgets/Common/Localization/). | ||
|
|
||
| ## Restrictions | ||
|
|
||
| If you specify a [displayFormat](https://js.devexpress.com/Documentation/16_2/ApiReference/UI_Widgets/dxDateBox/Configuration/#displayFormat) for the [DateBox](https://js.devexpress.com/Documentation/16_2/ApiReference/UI_Widgets/dxDateBox/) widget, the typed value will not be parsed correctly. You can specify a custom [parser function](https://js.devexpress.com/Documentation/16_2/ApiReference/Common/Object_Structures/format/#parser) as part of the `displayFormat` configuration object to overcome this limitation. Here is an example: | ||
|
|
||
| ```js | ||
| // value will be parsed correctly | ||
| $("#datebox").dxDateBox({ | ||
| value: new Date() | ||
| }); | ||
| // value will not be parsed correctly | ||
| $("#datebox").dxDateBox({ | ||
| value: new Date(), | ||
| displayFormat: { | ||
| year: "numeric", | ||
| month: "long" | ||
| } | ||
| }); | ||
| // Add a custom parser function | ||
| $("#datebox").dxDateBox({ | ||
| value: new Date(), | ||
| displayFormat: { | ||
| year: "numeric", | ||
| month: "long", | ||
| parser: function(dateString) { | ||
| // return parsed date if possible | ||
| } | ||
| } | ||
| }); | ||
| ``` | ||
|
|
||
| ## Development | ||
|
|
||
| ### Install external development dependencies | ||
|
|
||
| npm install | ||
|
|
||
| ### Run tests | ||
|
|
||
| npm test | ||
|
|
||
| ### Build | ||
|
|
||
| Build the distribution UMD bundles `devextreme-intl.js` and `devextreme-intl.min.js` into the `/dist` folder. | ||
|
|
||
| npm run build | ||
|
|
||
| ## License | ||
|
|
||
| Familiarize yourself with the | ||
| [DevExtreme Commerical License](https://www.devexpress.com/Support/EULAs/DevExtreme.xml). | ||
|
|
||
| **DevExtreme integration with ECMAScript Internationalization API is released as an MIT-licensed (free and open-source) add-on to DevExtreme.** | ||
|
|
||
| ## Support & Feedback | ||
|
|
||
| * For support and feedback on general Intl questions, use [MDN Feedback](https://developer.mozilla.org/ru/docs/MDN/Feedback) | ||
| * For questions regarding DevExtreme libraries and JavaScript APIs, use the [DevExpress Support Center](https://www.devexpress.com/Support/Center) | ||
| * For DevExtreme Intl integration bugs, questions and suggestions, use the [GitHub issue tracker](https://github.com/DevExpress/DevExtreme-Intl/issues) | ||
| [](https://app.shippable.com/projects/5819ee767d9db80f006078c2) | ||
|
|
||
| # DevExtreme-Intl | ||
|
|
||
| This integration module enables localization of [DevExtreme](http://js.devexpress.com/) widgets using the global [Intl](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Intl) object of the ECMAScript Internationalization API. | ||
|
|
||
| ## Getting started | ||
|
|
||
| ### Using a script tag | ||
|
|
||
| Add a script tag for `devextreme-intl` behind your tag for the `devextreme` script: | ||
|
|
||
| ```html | ||
| <script src="https://unpkg.com/devextreme-intl/dist/devextreme-intl.js"></script> | ||
| ``` | ||
| or | ||
| ```html | ||
| <script src="https://unpkg.com/devextreme-intl/dist/devextreme-intl.min.js"></script> | ||
| ``` | ||
|
|
||
| See [this example with the relevant script tag in place](/blob/master/examples/bundled.html). | ||
|
|
||
| ### Using npm modules | ||
|
|
||
| 1. Install the `devextreme-intl` module: | ||
|
|
||
| `npm install devextreme-intl` | ||
|
|
||
| 2. Use an `import` call to make `devextreme-intl` available to your code: | ||
|
|
||
| ```js | ||
| import 'devextreme-intl'; | ||
| ``` | ||
|
|
||
|
|
||
| See [this example using modules](/blob/master/examples/modular.html). | ||
|
|
||
| ## Browser support | ||
|
|
||
| [Some older browsers](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Intl#Browser_compatibility) don't support the ECMAScript Internationalization API. You can use the [Intl.js polyfill](https://github.com/andyearnshaw/Intl.js/#intljs-) to support a wide range of browsers. | ||
|
|
||
| ## API | ||
|
|
||
| In addition to the [DevExtreme format object structure](https://js.devexpress.com/Documentation/16_2/ApiReference/Common/Object_Structures/format/), formats can be specified which are compatible with the `options` parameter of the Intl [NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat#Parameters) and [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat#Parameters). | ||
|
|
||
| Here is an example for the use of Intl formats in DataGrid columns: | ||
|
|
||
| ```js | ||
| $("#datagrid").dxDataGrid({ | ||
| dataSource: dataSource, | ||
| columns: [{ | ||
| dataField: "OrderDate", | ||
| format: { year: "2-digit", month: "narrow", day: "2-digit" } | ||
| }, { | ||
| dataField: "SaleAmount", | ||
| format: { style: "currency", currency: "EUR", useGrouping: true, minimumSignificantDigits: 3 } | ||
| }] | ||
| }); | ||
| ``` | ||
|
|
||
| See [more examples here](/tree/master/examples). | ||
|
|
||
| You can find full documentation of the localization API in the [DevExtreme documentation](https://js.devexpress.com/Documentation/16_2/Guide/UI_Widgets/Common/Localization/). | ||
|
|
||
| ## Restrictions | ||
|
|
||
| If you specify a [displayFormat](https://js.devexpress.com/Documentation/16_2/ApiReference/UI_Widgets/dxDateBox/Configuration/#displayFormat) for the [DateBox](https://js.devexpress.com/Documentation/16_2/ApiReference/UI_Widgets/dxDateBox/) widget, the typed value will not be parsed correctly. You can specify a custom [parser function](https://js.devexpress.com/Documentation/16_2/ApiReference/Common/Object_Structures/format/#parser) as part of the `displayFormat` configuration object to overcome this limitation. Here is an example: | ||
|
|
||
| ```js | ||
| // value will be parsed correctly | ||
| $("#datebox").dxDateBox({ | ||
| value: new Date() | ||
| }); | ||
| // value will not be parsed correctly | ||
| $("#datebox").dxDateBox({ | ||
| value: new Date(), | ||
| displayFormat: { | ||
| year: "numeric", | ||
| month: "long" | ||
| } | ||
| }); | ||
| // Add a custom parser function | ||
| $("#datebox").dxDateBox({ | ||
| value: new Date(), | ||
| displayFormat: { | ||
| year: "numeric", | ||
| month: "long", | ||
| parser: function(dateString) { | ||
| // return parsed date if possible | ||
| } | ||
| } | ||
| }); | ||
| ``` | ||
|
|
||
| ## Development | ||
|
|
||
| ### Install external development dependencies | ||
|
|
||
| npm install | ||
|
|
||
| ### Run tests | ||
|
|
||
| npm test | ||
|
|
||
| ### Build | ||
|
|
||
| Build the distribution UMD bundles `devextreme-intl.js` and `devextreme-intl.min.js` into the `/dist` folder. | ||
|
|
||
| npm run build | ||
|
|
||
| ## License | ||
|
|
||
| Familiarize yourself with the | ||
| [DevExtreme Commerical License](https://www.devexpress.com/Support/EULAs/DevExtreme.xml). | ||
|
|
||
| **DevExtreme integration with ECMAScript Internationalization API is released as an MIT-licensed (free and open-source) add-on to DevExtreme.** | ||
|
|
||
| ## Support & Feedback | ||
|
|
||
| * For support and feedback on general Intl questions, use [MDN Feedback](https://developer.mozilla.org/ru/docs/MDN/Feedback) | ||
| * For questions regarding DevExtreme libraries and JavaScript APIs, use the [DevExpress Support Center](https://www.devexpress.com/Support/Center) | ||
| * For DevExtreme Intl integration bugs, questions and suggestions, use the [GitHub issue tracker](https://github.com/DevExpress/DevExtreme-Intl/issues) |