DxDateBox and use of globalize

[StephanHartmann]

Hello,

I want to use DxDateBox with a german date format DD.MM.YYYY set as displayformat.

As this didn't work out of box, I contacted DevExpress Support (we have a Universal Subscription).

They told me to include globalize. https://github.com/jquery/globalize

At the end it is working, but I'm not sure if I did it the best way ...

I installed it via

npm install globalize cldr-data --save

Afterwards I changed the following files

Angular-cli-build.js

vendorNpmFiles: [
  (...)
  'devextreme/dist/js/dx.all.js',
  'devextreme/dist/css/*.css',
  'devextreme/dist/css/icons/*.*',
  'devextreme-angular2/**/*.+(js|js.map)'    ,
  'ng2-bootstrap/**/*',
  'moment/min/**',
  'globalize/dist/**',                <----
  'cldrjs/dist/**'                    <----
]

system-config.js

const map: any = {
    'devextreme-angular2': 'vendor/devextreme-angular2',        
    moment: 'vendor/moment/min/moment.min.js',
    globalize: 'vendor/globalize/dist/globalize.js',     <----
    'symbol-observable': 'vendor/rxjs/node_modules/symbol-observable',
    'ng2-bootstrap': 'vendor/ng2-bootstrap',
};

/** User packages configuration. */
const packages: any = {
  'devextreme-angular2':        { main: 'index.js', defaultExtension: 'js' }, 
  'vendor/ng2-bootstrap': {        defaultExtension: 'js' },
  'symbol-observable': { main: 'index.js', defaultExtension: 'js' }    
};

Then I added the following to my index.html

<script type="text/javascript" src="vendor/cldrjs/dist/cldr.js"></script>
<script type="text/javascript" src="vendor/cldrjs/dist/cldr/event.js"></script>
<script type="text/javascript" src="vendor/cldrjs/dist/cldr/supplemental.js"></script>
<script type="text/javascript" src="vendor/globalize/dist/globalize.js"></script>
<script type="text/javascript" src="vendor/globalize/dist/globalize/number.js"></script>
<script type="text/javascript" src="vendor/globalize/dist/globalize/currency.js"></script>
<script type="text/javascript" src="vendor/globalize/dist/globalize/date.js"></script>
<script type="text/javascript" src="vendor/globalize/dist/globalize/message.js"></script>
<script type="text/javascript" src="vendor/globalize/dist/globalize/plural.js"></script>
<script type="text/javascript" src="vendor/globalize/dist/globalize/relative-time.js"></script>

Is there a better way of packaging?
at least the html looks ugly

[dxbykov]

Hi,

It looks like your question is related to issue #16. Once it is resolved, you'll be able to clear your index.html.

[Angelminster]

#16 is closed, can you provide a code example in the documentation please?

[dxbykov]

Globalize requires a specific webpack configuration. At the same time, Angular CLI uses webpack internally but doesn't allow customizing its config file. We consider our new Intl integration to be a primary way of localizing your Angular 2 applications. If for some reason you want to use Globalize with webpack,, we have a sample, but it's not related to Angular CLI.