Angular JS引导UI日历问题

Question

I am facing very strange issue with angular-ui bootstrap calendar. 我在与angular-ui引导日历中遇到非常奇怪的问题。

Here is the sample i have created 这是我创建的示例

http://plnkr.co/edit/V5UgCbfilCXX8nsube12?p=preview http://plnkr.co/edit/V5UgCbfilCXX8nsube12?p=preview

The scenario is that when page land it shows right date in ng-model variable however when i am selecting date from calendar ng-model shows date in UST. 场景是，当页面登陆时，它在ng-model变量中显示正确的日期，但是当我从日历中选择日期时ng-model在UST中显示日期。

eg when i select date from calendar as "01/05/2012" ng-model binded property shows as "2012-01-04T18:30:00.000Z". 例如，当我从日历中选择日期为“ 01/05/2012”时，ng-model绑定属性显示为“ 2012-01-04T18：30：00.000Z”。 I want what is in textbox ie "01/05/2012". 我想要文本框中的内容，即“ 01/05/2012”。

How to overcome this issue. 如何克服这个问题。

<!doctype html>
<html ng-app="ui.bootstrap.demo">
 <head>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<script>
    angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
      $scope.today = function() {
        $scope.dt = new Date();
      };

      $scope.dates = [{ date:'01/01/2012',isOpen:false, isDisabled:false}, {date:'05/05/2000',isOpen:false, isDisabled:false}, {date:'',isOpen:false, isDisabled:true}];

      $scope.today();

      $scope.clear = function () {
        $scope.dt = null;
      };

      // Disable weekend selection
      $scope.disabled = function(date, mode) {
        return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
      };

      $scope.toggleMin = function() {
        $scope.minDate = $scope.minDate ? null : new Date();
      };
      $scope.toggleMin();

      $scope.open = function($event, date) {
        $event.preventDefault();
        $event.stopPropagation();
        date.isOpen=true;
        $scope.opened = true;
      };

      $scope.dateOptions = {
        formatYear: 'MM/dd/yyyy',
        startingDay: 1
      };

      $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
      $scope.format = 'MM/dd/yyyy';
    });
</script>
 </head>
 <body>

<div ng-controller="DatepickerDemoCtrl">
    <h4>Popup</h4>
    <br/>
<br/>
My Dates object {{dates}}
<br/>
<br/>
<div class="row" ng-repeat='x in dates'>
<span style="margin-left:20px">{{x.date}}</span>
    <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="x.date" is-open="x.isOpen" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" ng-disabled="x.isDisabled" class="btn btn-default" ng-click="open($event,x)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
    <br/>
<br/>
</div>
<hr />
</div>
  </body>
</html>

Answer 1

You actually have the right value on your model. 实际上，您的模型具有正确的价值。 The .000Z is the fraction of a second and Z indicates UTC timezone. .000Z是秒的分数，Z表示UTC时区。

Answer 2

It has the same issue here: 它在这里有相同的问题：

Angular bootstrap datepicker date format does not format ng-model value 角引导日期选择器日期格式未格式化ng-model值

And its being answered by some. 它得到了一些人的回答。 You can refer the link above. 您可以参考上面的链接。

It works for me! 这个对我有用！

Angular JS引导UI日历问题

问题描述

2 个解决方案

解决方案1
0 2015-04-02 17:30:20

解决方案2
0 2015-08-03 20:54:49

Angular JS引导UI日历问题

问题描述

2 个解决方案

解决方案1 0 2015-04-02 17:30:20

解决方案2 0 2015-08-03 20:54:49

解决方案1
0 2015-04-02 17:30:20

解决方案2
0 2015-08-03 20:54:49