我想将 md-datepicker 的格式设置为 dd-mm-yyyy
Posted
技术标签:
【中文标题】我想将 md-datepicker 的格式设置为 dd-mm-yyyy【英文标题】:i want set format of md-datepicker to dd-mm-yyyy 【发布时间】:2017-06-24 22:26:56 【问题描述】:角度材料的日期选择器。 我想将日期选择器的格式更改为 dd-mm-yyyy。
angular.module('MyApp')
.controller('AppCtrl', function($scope)
$scope.myDate = new Date();
$scope.minDate = new Date(
$scope.myDate.getFullYear(),
$scope.myDate.getMonth() - 2,
$scope.myDate.getDate());
$scope.maxDate = new Date(
$scope.myDate.getFullYear(),
$scope.myDate.getMonth() + 2,
$scope.myDate.getDate()); ).config(function($mdDateLocaleProvider)
$mdDateLocaleProvider.formatDate = function(date)
return moment(date).format('YYYY-MM-DD');
;
);
但我希望对应用程序中的所有日期选择器进行一次配置。 我认为这个示例适用于单个日期选择器。
【问题讨论】:
***.com/questions/32566416/… 是 uib-datepicker 吗?那么这应该有助于***.com/questions/23343371/… Angular bootstrap datepicker date format does not format ng-model value的可能重复 由 angular.module('app').config(function($mdDateLocaleProvider) $mdDateLocaleProvider.formatDate = function(date) return moment(date).format('YYYY-MM- DD'); ; ); 【参考方案1】:您可以从下面的代码轻松完成,
app.config(function($mdDateLocaleProvider)
$mdDateLocaleProvider.formatDate = function(date)
if (!date) return '';
else
return 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);
;
);
【讨论】:
【参考方案2】:angular.module('app').config(function($mdDateLocaleProvider)
$mdDateLocaleProvider.formatDate = function(date)
return moment(date).format('YYYY-MM-DD');
;
);
【讨论】:
@MuhamedShafeeq momentjs 必须包含在您的项目中才能使用它。【参考方案3】:如果您使用的是最新版本的 angular-material.js,请使用 $mdDateLocale
服务。此代码示例使用 angular 的内置日期过滤器作为使用 moment.js 库的替代方法。在此链接https://docs.angularjs.org/api/ng/filter/date 上使用 angular 的 $filter
服务查看其他日期格式选项。
// mainController.js
angular.module('app').config(function($mdDateLocale, $filter, $scope)
// FORMAT THE DATE FOR THE DATEPICKER
$mdDateLocale.formatDate = function(date)
return $filter('date')($scope.myDate, "dd-MM-yyyy");
;
);
【讨论】:
【参考方案4】:使用 javascript 库来实现这一点
将此 Moment-with locals.min.js 文件添加到您的页面
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>
然后在您的应用程序配置模块中..
angular.module('timeApp').config(function ($mdDateLocaleProvider)
$mdDateLocaleProvider.formatDate = function (date)
return moment(date).format('DD-MM-YYYY');
;
)
在 html 页面中
<md-datepicker ng-model="dateofbirth" md-current-view="year" md-placeholder="Enter Date of Birth" md-open-on-focus></md-datepicker>
【讨论】:
以上是关于我想将 md-datepicker 的格式设置为 dd-mm-yyyy的主要内容,如果未能解决你的问题,请参考以下文章
dateformat mask到角度材质2中的md-datepicker
md-datepicker 似乎无法识别 md-max-date 属性