UI Bootstrap Datepicker 弹出日期格式
Posted
技术标签:
【中文标题】UI Bootstrap Datepicker 弹出日期格式【英文标题】：UI Bootstrap Datepicker Popup date format 【发布时间】：2017-12-03 06:18:44 【问题描述】：我正在使用 UI Bootstrap Datepicker Popup，并且我想使用自定义日期格式。我的休息服务以“dd/MM/yyyy”格式向我发送日期。
我想使用这种格式，但是在更改模型值时，日期选择器不会更新。我定义了uib-datepicker-popup="dd/MM/yyyy"，但似乎不起作用。
Plunker：https://plnkr.co/edit/SfSXmeL0ue0yef1yTKMO?p=preview
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope)
$scope.today = function()
$scope.dt = '02/01/2017';
;
$scope.clear = function()
$scope.dt = null;
;
$scope.dateOptions =
formatYear: 'yy',
startingDay: 1
;
$scope.open1 = function()
$scope.popup1.opened = true;
;
$scope.popup1 =
opened: false
;
);<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
.full button span
background-color: limegreen;
border-radius: 32px;
color: black;
.partially button span
background-color: orange;
border-radius: 32px;
color: black;
</style>
<div ng-controller="DatepickerPopupDemoCtrl">
<pre>Selected date is: <em>dt | date:'fullDate' </em></pre>
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="dd/MM/yyyy" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<hr />
<button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
</div>
</body>
</html>在 plunker 上：
- 点击“今天”，使$scope.dt = '02/01/2017'
- 打开日期选择器弹出窗口，它在 2 月 1 日而不是 1 月 2 日初始化
【问题讨论】：
您需要在此处发布问题代码和标记的最小示例，而不是您的 plunker，明天可能会更改或消失，对未来没有帮助：***.com/help/mcve 我加了一个sn-p 【参考方案1】：经过一番研究，我想我正在寻找一个指令来添加自定义解析器和格式化程序：
.directive('dateFormatter', [
function ()
return
restrict: 'A',
require: 'ngModel',
link: function postLink(scope, element, attrs, ngModel)
ngModel.$parsers.push(function(data)
return moment(data).format('DD/MM/YYYY');
);
ngModel.$formatters.push(function(data)
return moment(data, 'DD/MM/YYYY').toDate()
);
;
]);
更新 plunkr：https://plnkr.co/edit/oi1EtcDmzpzyyKmXvhqz?p=preview
【讨论】：
【参考方案2】：UI Bootstrap datepicker 将它在内部使用的日期解析器作为服务公开。将uibDateParser 服务注入您的控制器并使用解析函数将您的日期转换为正确的格式：
function ($scope, uibDateParser)
$scope.today = function()
$scope.dt = uibDateParser.parse('02/01/2017', 'dd/MM/yyyy');
;
...
https://plnkr.co/edit/u5GRT5QOjdT61zZ36fmE?p=preview
【讨论】：
其实我是通过休息服务收到这个日期的，所以我不想做一个新的Date()。我的数据看起来像 begin:"01/02/2017",end:"02/02/2017" 我正在寻找一种方法来告诉日期选择器它应该使用哪种格式来解析日期。这不可能吗？ 其实是可以的...github.com/angular-ui/bootstrap/tree/master/src/dateparser 在我的模型中解析对我来说似乎不是一个好的解决方案。如果我的 dto 包含很多日期，我将需要单独解析所有日期。我认为我使用指令找到了更好的解决方案（请参阅我接受的答案）。以上是关于UI Bootstrap Datepicker 弹出日期格式的主要内容，如果未能解决你的问题，请参考以下文章
AngularJs的UI组件ui-Bootstrap分享——Datepicker Popup
扩展 datepicker 的功能（ui bootstrap）
jQuery ui datepicker 与 bootstrap datepicker 冲突
如何设置ui bootstrap datepicker的日期值