How to use angular-moment in my project?

[jblancas-git]

• Hi, Jad!, I'm trying to use the angular-moment in my laravel-angular project version 3.3.0 ...

• [ ] bug report

• [ ] feature request

• [X] support request

• [ ] other (Please specify)

• Provide information & explanation I need to config the $mdDateLocaleProvider in order to customize the DatePicker control and be able to format the date just like example of the angular-material web page.

• What I Did: 1.- Using bower I installed the angular-moment package. 2.- I did "artisan ng:config datepicke" in order to make config files according to example: (https://material.angularjs.org/latest/api/service/$mdDateLocaleProvider)

-- datepicker.config.js--

export function DatepickerConfig($mdDateLocaleProvider){
    'ngInject';

// Example uses moment.js to parse and format dates.
    $mdDateLocaleProvider.parseDate = function(dateString) {
      var m = moment(dateString, 'L', true);
      return m.isValid() ? m.toDate() : new Date(NaN);
    };

    $mdDateLocaleProvider.formatDate = function(date) {
      var m = moment(date);
      return m.isValid() ? m.format('DD/MM/YYYY') : '';
    };
}

3.- I ran Gulp for compile.

result:

[13:34:20] Using gulpfile ~/proyetos/progressive33/gulpfile.js
[13:34:20] Starting 'default'...
[13:34:20] Starting 'bower-js'...
[13:34:20] Finished 'default' after 60 ms
[13:34:22] gulp-notify: [Laravel Elixir]  
[13:34:22] gulp-notify: [Laravel Elixir]  
[13:34:22] Finished 'bower-js' after 1.53 s
[13:34:22] Starting 'bower-css'...
[13:34:23] gulp-notify: [Laravel Elixir]  
[13:34:23] gulp-notify: [Laravel Elixir]  
[13:34:23] Finished 'bower-css' after 598 ms
[13:34:23] Starting 'angular in ./angular/'...
[13:34:26] Version: webpack 1.13.3
 Asset     Size  Chunks             Chunk Names
app.js  44.7 kB       0  [emitted]  main
[13:34:26] gulp-notify: [Laravel Elixir]  
[13:34:26] Finished 'angular in ./angular/' after 3.38 s
[13:34:26] Starting 'ng-html-js'...
[13:34:27] 
angular/config/datepicker.config.js
   5:5   error  "moment" is not defined  no-undef
   9:15  error  "moment" is not defined  no-undef
  14:15  error  "moment" is not defined  no-undef

angular/app/components/student-ed/student-ed.component.js
  82:22  error  "moment" is not defined  no-undef

✖ 4 problems (4 errors, 0 warnings)

[13:34:27] Finished 'ng-html-js' after 708 ms
[13:34:27] Starting 'concat-scripts'...
[13:34:27] Finished 'concat-scripts' after 25 ms
[13:34:27] Starting 'sass'...

Thank you very much for you help us!

• Laravel & Angular version: 3.3.0

[flick36]

Hi, not @jadjoubran but i think this should work haven't test it 😆

export function DatepickerConfig($mdDateLocaleProvider, moment){
    'ngInject';
this.$mdDateLocaleProvider = $mdDateLocaleProvider;
this.moment= moment;

// Example uses moment.js to parse and format dates.
    this.$mdDateLocaleProvider.parseDate(dateString)=> {
      var m = thi.moment(dateString, 'L', true);
      return m.isValid() ? m.toDate() : new Date(NaN);
    };

    this.$mdDateLocaleProvider.formatDate(date)=> {
      var m = this.moment(date);
      return m.isValid() ? m.format('DD/MM/YYYY') : '';
    };
}

[jadjoubran]

Thank you so much @flick36 for answering! I also never tried the above code but what you're seeing in the terminal is just eslint complaining that moment was never defined.. You can alter your eslint configuration to define moment as a global.. Or you could add this conditional comment: /* global moment:false */ at the top of the file to silence this warning from eslint

[jblancas-git]

Thank you so much @flick36 & @jadjoubran for your help!

I did some things that you recommended me and my code was working correctly.

The code looks like this: ---File: .eslintrc---

"globals": {
    "angular": true,
    "module": true,
    "moment": true,
    "inject": true
  }

---Config File: datepicker.config.js ---

export function DatepickerConfig($mdDateLocaleProvider){
    'ngInject';

// Example uses moment.js to parse and format dates.
    $mdDateLocaleProvider.parseDate = function(dateString) {
      var m = moment(dateString, 'L', true);
      return m.isValid() ? m.toDate() : new Date(NaN);
    };
    $mdDateLocaleProvider.formatDate = function(date) {
      var m = moment(date);
      return m.isValid() ? m.format('DD/MM/YYYY') : '';
    };
}

*The format date is working

Thank you!!

[jadjoubran]

Sounds great 😄