Change locale - Githubissues

claudioviola commented 7 years ago

Hello! How can I change language of the months/weeks and of the custom template? https://material.angularjs.org/latest/api/service/$mdDateLocaleProvider I try like this but doesn't works...

yoni12ab commented 7 years ago

Hi @claudioviola , try to use the localization map attribute (localization-map="mdLocalizationMap") like this : $scope.mdLocalizationMap = { 'Mon':'Mon*', 'This Week':'Current Week', "January":"January1", "February":"February1", "March":"March1", "April":"April1", "May":"May1", "June":"June1", "July":"July1", "August":"August1", "September":"September1", "October":"October1", "November":"November1", "December":"December1" }; see it in readme.md

claudioviola commented 7 years ago

Hi @yoni12ab

I've the code in the controller. My code is like this but didn't works...

`let localizationMap = { 'Mon':'Lun*', 'This Week':'Settimana corrente', "January":"Gennaio", "February":"Febbraio", "March":"Marzo", "April":"Aprile", "May":"Maggio", "June":"Giugno", "July":"Luglio", "August":"Agosto", "September":"Settembre", "October":"Ottobre", "November":"Novembre", "December":"Dicembre" };

    let opts = {
        selectedTemplate:'TY',
        selectedTemplateName: 'Anno corrente',
        dateStart: null,
        dateEnd: null,
        showTemplate: true,
        fullscreen: false,
        firstDayOfWeek: 0,
        mdLocalizationMap:localizationMap
    };

    $mdDateRangePicker.show({
        targetEvent:$event,
        model:opts
    }).then((result)=>{
        if(result) return result;
    })

`

yoni12ab commented 7 years ago

try this :

let opts = { selectedTemplate:'TY', selectedTemplateName: 'Anno corrente', dateStart: null, dateEnd: null, showTemplate: true, fullscreen: false, firstDayOfWeek: 0, localizationMap:localizationMap };

claudioviola commented 7 years ago

Nothing... not works... thanks for support

yoni12ab commented 7 years ago

Check that you have the latest version https://www.npmjs.com/package/md-date-range-picker

claudioviola commented 7 years ago

Hello @yoni12ab ! Thanks for support. I'm using ver 0.4.1

This is my example. (Could you send me your example with my customization? I could see where I'm wrong...)

<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="../node_modules/angular-material/angular-material.css">
  <link rel="stylesheet" href="../dist/md-date-range-picker.css">
</head>

<body ng-app="demo.app" ng-cloak>
  <div ng-controller="ctrl">
    <h1>{{'2016-09-26T14:47:56Z' | date: 'medium'}}</h1>
    <md-button class="md-raised md-primary" ng-click="pick($event)">Pick A Date Range With Template</md-button>
    <md-button class="md-raised md-primary" ng-click="clear($event)">Clear Range</md-button>
    <md-date-range ng-model="selectedRange" placeholder="Select Date Range"></md-date-range>
    <h2>Selected Date Range: {{selectedRange.dateStart | date}} - {{selectedRange.dateEnd | date}}</h2>
    <h2>Selected Date Template:{{selectedRange.selectedTemplateName}} - {{selectedRange.selectedTemplate}}</h2>

  </div>
  <!-- Angular Material requires Angular.js Libraries -->
  <script src="../node_modules/angular/angular.js"></script>
  <script src="../node_modules/angular-animate/angular-animate.js"></script>
  <script src="../node_modules/angular-aria/angular-aria.js"></script>
  <script src="../node_modules/angular-messages/angular-messages.js"></script>

  <!-- Angular Material Library -->
  <script src="../node_modules/angular-material/angular-material.js"></script>

  <!-- Angular Material Date Range Picker Library -->
  <script src="../dist/md-date-range-picker.js"></script>

  <!-- Your application bootstrap  -->
  <script type="text/javascript">    
    /**
     * You must include the dependency on 'ngMaterial' 
     */
    angular.module('demo.app', ['ngMaterial', 'ngMaterialDateRangePicker']).controller('ctrl',function($scope, $mdDateRangePicker){
       var tmpToday = new Date(); 

        var localizationMap =  {
            'Mon':'Lun*',
            'This Week':'Settimana corrente',
            "January":"Gennaio",
            "February":"Febbraio",
            "March":"Marzo",
            "April":"Aprile",
            "May":"Maggio",
            "June":"Giugno",
            "July":"Luglio",
            "August":"Agosto",
            "September":"Settembre",
            "October":"Ottobre",
            "November":"Novembre",
            "December":"Dicembre"
        };

      $scope.selectedRange = {
            selectedTemplate:'TY',
            selectedTemplateName: 'Anno corrente',
            dateStart: null,
            dateEnd: null,
            showTemplate: true,
            fullscreen: false,
            firstDayOfWeek: 0,
            localizationMap:localizationMap
        };

      $scope.onSelect = function(scope){ 
        console.log($scope.selectedRange.selectedTemplateName); 
        return $scope.selectedRange.selectedTemplateName; 
      };

      $scope.pick = function($event){
        $mdDateRangePicker.show({targetEvent:$event, model:$scope.selectedRange} ).then(function(result){
          if(result) $scope.selectedRange = result;
        })
      };

      $scope.clear = function (){
        $scope.selectedRange.selectedTemplate = null;
        $scope.selectedRange.selectedTemplateName = null;
        $scope.selectedRange.dateStart = null;
        $scope.selectedRange.dateEnd = null;
      }
    });
  </script>

</body>

</html>

claudioviola commented 7 years ago

Maybe I found the solution. In the directive library in show method I added the localization-map param. Like this: Now it works...


'<md-date-range-picker ',
                        'date-start="model.dateStart" ',
                        'date-end="model.dateEnd" ',
                        'show-template="model.showTemplate" ',
                        'selected-template="model.selectedTemplate" ',
                        'selected-template-name="model.selectedTemplateName"',
                        'first-day-of-week="firstDayOfWeek || model.firstDayOfWeek"',
                        'localization-map="model.localizationMap"',
                        '>',

yoni12ab commented 7 years ago

Hi @claudioviola , You are right the npm package is not totally updated , @ipiz after clean npm installed the package I notice that the "dist" folder contains old files and the "src" folder contains the updated version , "npm run dist" ?

Yoni

roelbarreto commented 7 years ago

Thanks @yoni12ab I'll check and publish it

claudioviola commented 7 years ago

Hi @yoni12ab After npm install I run "npm run dist" but there is this issue in the console terminal

> md-date-range-picker@0.4.1 dist .......... /md-date-range-picker
> node ./server.dist.js

events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::3000
    at Object.exports._errnoException (util.js:1026:11)
    at exports._exceptionWithHostPort (util.js:1049:20)
    at Server._listen2 (net.js:1257:14)
    at listen (net.js:1293:10)
    at Server.listen (net.js:1389:5)
    at EventEmitter.listen (....../bower_components/md-date-range-picker/node_modules/express/lib/application.js:618:24)
    at Object.<anonymous> (....../bower_components/md-date-range-picker/server.dist.js:8:5)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dist"
npm ERR! node v6.9.1
npm ERR! npm  v4.0.1
npm ERR! code ELIFECYCLE
npm ERR! md-date-range-picker@0.4.1 dist: `node ./server.dist.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the md-date-range-picker@0.4.1 dist script 'node ./server.dist.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the md-date-range-picker package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node ./server.dist.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs md-date-range-picker
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls md-date-range-picker
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:

yoni12ab commented 7 years ago

Hi @claudioviola , After that @ipiz will update the npm package you can npm install the new version and it suppose to be fixed Yoni

claudioviola commented 7 years ago

Great! Thank you guys! Works fine!

greatCodeIdeas / md-date-range-picker

Change locale #12