使用md-datepicker在MEANjs中设置另一个日期格式 [英] Setting another Date forma in MEANjs with md-datepicker

问题描述

我正在使用md-datepicker指令从角度材料，但是我想打字在日期，不仅从datepicker中选择它。我发现以下示例代码：

  angular.module（'MyApp'）
 .controller（'AppCtrl'函数（$ scope）{
 $ scope.myDate = new Date（）; 
 
 $ scope.minDate = new Date（
 $ scope.myDate.getFullYear（） -  1 ，
 $ scope.myDate.getMonth（），
 $ scope.myDate.getDate（））; 
 
 $ scope.maxDate = new Date（
 $ scope .myDate.getFullYear（）+ 1，
 $ scope.myDate.getMonth（），
 $ scope.myDate.getDate（））;}）
 
 .config （$ mdDateLocaleProvider）{
 $ mdDateLocaleProvider.formatDate = function（date）{
 return date？moment（date）.format（'DD.MM.YYYY'）：''; 
} ; 
 
 $ mdDateLocaleProvider.parseDate = function（dateString）{
 var m = moment（dateString，'DD.MM.YYYY'，true）; 
 return m.isValid ）？m.toDate（）：new Date（Na N）; 
}; 
}）; 
  

我的问题现在是在MEANJS yeoman生成器应用程序中使用.config部分的位置。我找不到任何东西有人这样做了吗？

解决方案

如果您无法加载md-datepicker文件并将其加载进入MEAN.JS，查看此答案。

但是，如果您已将文件正确加载到应用程序中，并且您只想访问应用程序的配置块，则可以访问位于 /modules/core/client/app/init.js ，在这个代码块中只需添加所需的逻辑：

  //设置HTML5位置模式
 angular 
 .module（app.applicationModuleName）
 .config（bootstrapConfig）; 
 
函数bootstrapConfig（$ compileProvider，$ locationProvider，$ httpProvider，$ mdDateLocaleProvider）{
 $ locationProvider.html5Mode（true）.hashPrefix（'！'）; 
 
 $ httpProvider.interceptors.push（'authInterceptor'）; 
 
 //禁止生产环境的调试数据
 // @link https://docs.angularjs.org/guide/production 
 $ compileProvider.debugInfoEnabled（app.applicationEnvironment！ =='production'）; 
 
 // md-datepicker配置
 $ mdDateLocaleProvider.formatDate = function（date）{
 return date？ moment（date）.format（'DD.MM.YYYY'）：''; 
}; 
 $ mdDateLocaleProvider.parseDate = function（dateString）{
 var m = moment（dateString，'DD.MM.YYYY'，true）; 
 return m.isValid（）？ m.toDate（）：new Date（NaN）; 
}; 
} 
 
 bootstrapConfig。$ inject = ['$ compileProvider'，'$ locationProvider'，'$ httpProvider'，'$ mdDateLocaleProvider']; 
  

不要忘记注入 $ mdDateLocaleProvider 在配置块中。

I am using the md-datepicker directive from angular-material, however i would like to typ in the date, not only choose it from the datepicker. I found the following example code:

        angular.module('MyApp')
          .controller('AppCtrl', function($scope) {
          $scope.myDate = new Date();

          $scope.minDate = new Date(
          $scope.myDate.getFullYear()-1,
          $scope.myDate.getMonth(),
          $scope.myDate.getDate());

          $scope.maxDate = new Date(
          $scope.myDate.getFullYear()+1,
          $scope.myDate.getMonth(),
          $scope.myDate.getDate());    })

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

          $mdDateLocaleProvider.parseDate = function(dateString) {
            var m = moment(dateString, 'DD.MM.YYYY', true);
            return m.isValid() ? m.toDate() : new Date(NaN);
          };
         });

my problem now is where to use the .config section in a MEANJS yeoman generator application. I couldnt find anything. Does someone did this so far?

解决方案

If you're having trouble loading the md-datepicker files and get it to be loaded into MEAN.JS check out this answer.

However if you are already correctly loading your files into your app and you just want to access the config block of the app you can do so by accessing the file located in /modules/core/client/app/init.js, and in this code block just add the logic needed:

// Setting HTML5 Location Mode
  angular
    .module(app.applicationModuleName)
    .config(bootstrapConfig);

  function bootstrapConfig($compileProvider, $locationProvider, $httpProvider, $mdDateLocaleProvider) {
    $locationProvider.html5Mode(true).hashPrefix('!');

    $httpProvider.interceptors.push('authInterceptor');

    // Disable debug data for production environment
    // @link https://docs.angularjs.org/guide/production
    $compileProvider.debugInfoEnabled(app.applicationEnvironment !== 'production');

    // md-datepicker configuration
    $mdDateLocaleProvider.formatDate = function(date) {
        return date ? moment(date).format('DD.MM.YYYY') : '';
    };
    $mdDateLocaleProvider.parseDate = function(dateString) {
        var m = moment(dateString, 'DD.MM.YYYY', true);
        return m.isValid() ? m.toDate() : new Date(NaN);
    };
}

bootstrapConfig.$inject = ['$compileProvider', '$locationProvider', '$httpProvider', '$mdDateLocaleProvider'];

Don't forget to inject $mdDateLocaleProvider in the config block.

这篇关于使用md-datepicker在MEANjs中设置另一个日期格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！