UI Bootstrap Datepicker彈出日期格式

Question

我正在使用UI Bootstrap Datepicker彈出窗口，並且我想使用自定義日期格式。 我的休息服務會以“ dd / MM / yyyy”格式向我發送日期。 我想使用這種格式，但是當更改模型值時，日期選擇器不會更新。 我定義了uib-datepicker-popup="dd/MM/yyyy"但似乎不起作用。

柱塞： 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>

在插入器上：-單擊“今天”，使$scope.dt = '02/01/2017'打開日期選擇器彈出窗口，它在2月1日而不是1月2日初始化。

Answer 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

Answer 2

UI Bootstrap datepicker公開了它內部用作服務的日期解析器。 將uibDateParser服務注入到控制器中，並使用parse函數將日期uibDateParser為正確的格式：

function ($scope, uibDateParser) {
  $scope.today = function() {
    $scope.dt = uibDateParser.parse('02/01/2017', 'dd/MM/yyyy');
  };
...
}

https://plnkr.co/edit/u5GRT5QOjdT61zZ36fmE?p=preview

UI Bootstrap Datepicker彈出日期格式

問題描述

2 個解決方案

解決方案1
3 已采納 2017-06-30 07:21:14

解決方案2
0 2017-06-29 14:19:03

UI Bootstrap Datepicker彈出日期格式

問題描述

2 個解決方案

解決方案1 3 已采納 2017-06-30 07:21:14

解決方案2 0 2017-06-29 14:19:03

解決方案1
3 已采納 2017-06-30 07:21:14

解決方案2
0 2017-06-29 14:19:03