UI Bootstrap Datepicker彈出日期格式

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

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' - 打開日期選擇器彈出，它初始化上月1日，而不是月第二個

來源

2017-06-29 jaudo

您需要發佈的親一個小例子，瑕疵代碼和標記在這裏，而不是你的明天可以改變或消失，幫助未來沒有人的運動員：https://stackoverflow.com/help/mcve – Rob

我添加了一個代碼段 – jaudo

經過一番研究，我覺得我一直在尋找一個指令添加自定義解析器和格式：

.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

來源

2017-06-30 07:21:14 jaudo

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

來源

2017-06-29 14:19:03

事實上，我通過一個接收日期休息服務，所以我不想做一個新的日期（）。我的數據看起來像{begin：「01/02/2017」，結束：「02/02/2017」} – jaudo

我正在尋找一種方法來告訴datepicker它應該使用哪種格式來解析日期。這不可能嗎？ – jaudo

其實這是可能的... https：//github.com/angular-ui/bootstrap/tree/master/src/dateparser –

UI Bootstrap Datepicker彈出日期格式

回答

相關問題