日期选择器格式不影响ng-model Angular Material

时间:2016-09-11 10:16:24

标签: javascript angularjs datepicker angular-material

我想在我的ng-model中使用此格式['DD-MM-YYYY']格式DatePicker。

我在config()

中这样做了
function showSideBarUserInterface()
{
   var html = HtmlService.createTemplateFromFile(
        'SideBarUserInterface').evaluate()
        .setWidth(400)
        .setTitle("What would you like to do?")
        .setSandboxMode(HtmlService.SandboxMode.IFRAME);
    var ss = SpreadsheetApp.getActive();
    SpreadsheetApp.getUi().showSidebar(html);
}

并在视图和日志中返回有效的日期格式。

screenshot

但这不会影响ng-model变量

$mdDateLocaleProvider.formatDate = function(date) {
  var newDateFormate =   moment(date).format('DD-MM-YYYY');  
            return newDateFormate ; 
};

因为如果记录这个变量,它会给我这个日期格式

 <md-datepicker ng-model="user.bod" md-placeholder="Enter birth date "> </md-datepicker>

2 个答案:

答案 0 :(得分:1)

ng-model值是js Date对象。使用服务来模拟模型值:

var dateString = $mdDateLocale.formatDate(valueFromNgModel);

答案 1 :(得分:1)

你去了!!!

https://stackoverflow.com/a/43392704/5613548

&#13;
&#13;
angular.module('MyApp')

.controller('AppCtrl', function($scope) {
  $scope.person = {
    name: "John",
    birthDate: "1990-01-01 00:00:00"
  };
})

.directive('mdDatepicker', function () {
  function link(scope, element, attrs, ngModel) {
    var parser = function (val) {
      val = moment(val).format('YYYY-MM-DD hh:mm:ss');
      return val;
    };
    var formatter = function (val) {
      if (!val) return val;
      val = moment(val).toDate();
      return val;
    };
    ngModel.$parsers.push(parser);
    ngModel.$formatters.push(formatter);
  }
  return {
    require: 'ngModel',
    link: link,
    restrict: 'EA',
    priority: 1
  }
});
&#13;
<link href="https://material.angularjs.org/HEAD/docs.css" rel="stylesheet"/>
<link href="https://material.angularjs.org/HEAD/angular-material.css" rel="stylesheet"/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js"></script>
<script src="https://material.angularjs.org/HEAD/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>



<div ng-app="MyApp" ng-controller="AppCtrl">
  <md-content>
    <md-datepicker ng-model="person.birthDate" md-placeholder="Enter date"></md-datepicker>
  </md-content>
  
  <big>ng-model value is: <strong>{{person.birthDate}}</strong></big>
</div>
&#13;
&#13;
&#13;