更改格式日期datepicker角度材料

时间:2017-11-02 13:32:31

标签: javascript angularjs datepicker angular-material date-format

我正在学习并试图了解angularJS框架是如何工作的,我设法显示了一个日期选择器,但我无法更改当前日期的格式(mm-dd-yyyy)。我想将此格式更改为用户的本地日期,fr-FR,en-GB ...

我在那里看到了documentation,但我不知道代码的哪一部分粘贴了这些示例......

我也试过这个

 angular.module('BlankApp', ['ngMaterial']);
        var app = angular.module('myApp', []);

        app.config(function($interpolateProvider){
            $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
        });
        myAppModule.config(function($mdDateLocaleProvider) {

            // Example of a French localization.
            $mdDateLocaleProvider.months = ['janvier', 'février', 'mars'];
            $mdDateLocaleProvider.shortMonths = ['janv', 'févr', 'mars'];
            $mdDateLocaleProvider.days = ['dimanche', 'lundi', 'mardi'];
            $mdDateLocaleProvider.shortDays = ['Di', 'Lu', 'Ma'];

            // Can change week display to start on Monday.
            $mdDateLocaleProvider.firstDayOfWeek = 1;

            // Optional.
            $mdDateLocaleProvider.dates = [1, 2, 3, 4, 5, 6];

            // 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('L') : '';
            };

            $mdDateLocaleProvider.monthHeaderFormatter = function(date) {
                return myShortMonths[date.getMonth()] + ' ' + date.getFullYear();
            };

            // In addition to date display, date components also need localized messages
            // for aria-labels for screen-reader users.

            $mdDateLocaleProvider.weekNumberFormatter = function(weekNumber) {
                return 'Semaine ' + weekNumber;
            };

            $mdDateLocaleProvider.msgCalendar = 'Calendrier';
            $mdDateLocaleProvider.msgOpenCalendar = 'Ouvrir le calendrier';

            // You can also set when your calendar begins and ends.
            $mdDateLocaleProvider.firstRenderableDate = new Date(1776, 6, 4);
            $mdDateLocaleProvider.lastRenderableDate = new Date(2012, 11, 21);
        });
HTML代码中的

<md-datepicker ng-model="creation" ui-date="{ dateFormat: 'yy-mm-dd' }"></md-datepicker>

1 个答案:

答案 0 :(得分:0)

您是否尝试过ng-model-options?就像他们的api谈话一样:

mdDatepicker: https://material.angularjs.org/latest/api/directive/mdDatepicker

ngModelOptions: https://docs.angularjs.org/api/ng/directive/ngModelOptions#usage

PD:请记住,您正在使用角度材料制作角度1版本