Question

我正在尝试显示由引导程序日历日期选择的日期，但我没有看到所选日期的值。当我选择编辑选项以将其更新到项目列表中时，日期正确显示但是如果我在标记“Vigencia Desde Updated”之后通过未更新的日历更改日期。

我很感激任何帮助。

app.js

angular.module('mainApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);

angular.module('mainApp').controller('NotificacionController', function($scope) {

$(document).ready(function(){
    $('.input-group.date').datetimepicker({
        locale: 'es',
    });
});

var self = this;

self.notificacion = {
    id: null,
    vigenciaDesde: null,
    vigenciaHasta: null,
    cuotas: "",
    marca: ""
  }

  self.notificaciones = [

    {
      id: 1,
      vigenciaDesde: new Date(2016, 9, 1),
      vigenciaHasta: new Date(2016, 9, 8),
      cuotas: "3 cuotas",
      marca: "Nike"
    }, {
      id: 2,
      vigenciaDesde: new Date(2016, 10, 1),
      vigenciaHasta: new Date(2016, 10, 20),
      cuotas: "6 cuotas",
      marca: "Adidas"
    }
  ]

  self.edit = function(id) {
    console.log('id to be edited', id);
    for (var i = 0; i < self.notificaciones.length; i++) {
      if (self.notificaciones[i].id == id) {
        self.notificacion = angular.copy(self.notificaciones[i]);
        break;
      }
    }
  }

  self.reset = function(){
        self.notificacion={id:null, vigenciaDesde:null, vigenciaHasta:null, cuotas:'', marca:''};  
        $scope.myForm.$setPristine(); //reset Form
    };

});

的index.html

<!doctype html>
<html ng-app="mainApp">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
  <!--script src="https://code.angularjs.org/1.0.7/i18n/angular-locale_es-ar.js"></script-->
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>

  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/es.js"></script>

  <script src="app.js"></script>
  <link rel="stylesheet" href="style.css" />

</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="NotificacionController as ctrl">

    <!-- Row Cuotas -->

    <div class="row">
      <div class="form-group col-md-12">
        <label class="col-md-2 control-lable" for="file">Cuotas</label>
        <div class="col-md-7">
          <input type="text" ng-model="ctrl.notificacion.cuotas" name="cuotas" class="cuotas form-control input-sm" placeholder="Cuotas" />
        </div>
      </div>
    </div>

    <!-- Row Marca -->

    <div class="row">
      <div class="form-group col-md-12">
        <label class="col-md-2 control-lable" for="file">Marca</label>
        <div class="col-md-7">
          <input type="text" ng-model="ctrl.notificacion.marca" name="marca" class="marca form-control input-sm" placeholder="Marca" />
        </div>
      </div>
    </div>

    <!-- Row Tipo de Vigencia Desde -->

    <div class="row">
      <div class="form-group col-md-12">
        <label class="col-md-2 control-lable" for="file">Vigencia Desde</label>
        <div class="col-md-7">

          <div class='input-group date'>
            <input type='text' class="form-control ctrl.notificacion.vigenciaDesde input-sm" id="vigenciaDesde" ng-required="true" close-text="Close" ng-model="ctrl.notificacion.vigenciaDesde | date:'dd/MM/yyyy'">
            <span class="input-group-addon"> 
            <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>

        </div>
      </div>
    </div>

    <!-- Row Tipo de Vigencia Hasta -->

    <div class="row">
      <div class="form-group col-md-12">
        <label class="col-md-2 control-lable" for="file">Vigencia Hasta</label>
        <div class="col-md-7">
          <div class='input-group date vigenciaHasta' name="vigenciaHasta">
            <input type='text' class="form-control vigenciaHasta" id="vigenciaHastaId" ng-required="true" close-text="Close" ng-model="ctrl.notificacion.vigenciaHasta | date:'dd/MM/yyyy'">
            <span class="input-group-addon"> 
            <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>

        </div>
      </div>
    </div>

    <div class="row">
      <div class="form-group col-md-12">
        <label class="col-md-2 control-lable" for="file">Vigencia Desde Updated</label>
        <div ng-model="ctrl.notificacion.vigenciaDesde">
          <pre>Vigencia Desde Updated: <em>{{ctrl.notificacion.vigenciaDesde | date:'dd/MM/yyyy' }}</em></pre>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="form-actions floatRight">
        <button type="button" ng-click="ctrl.reset()" class="btn btn-warning btn-sm" ng-disabled="myForm.$pristine">Reset Form</button>
      </div>
    </div>

    <br/>

    <div class="panel panel-default">

      <div class="panel-heading"><span class="lead">Lista de Notificaciones Existentes </span></div>

      <div class="tablecontainer">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>ID.</th>
              <th>Vigencia Desde</th>
              <th>Vigencia Hasta</th>
              <th>Cuotas</th>
              <th>Marca</th>
              <th width="20%"></th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="n in ctrl.notificaciones | orderBy:'id'">
              <td><span ng-bind="n.id"></span></td>
              <td><span ng-bind="n.vigenciaDesde | date:'dd/MM/yyyy'"></span></td>
              <td><span ng-bind="n.vigenciaHasta | date:'dd/MM/yyyy'"></span></td>
              <td><span ng-bind="n.cuotas"></span></td>
              <td><span ng-bind="n.marca"></span></td>
              <td>
                <button type="button" ng-click="ctrl.edit(n.id)" class="btn btn-success custom-width">Edit</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>


    </div>
  </div>

</body>

</html>

plunker链接：

http://plnkr.co/edit/KFA4AsgQdItUfSWVc1Ag

Answer 1

您正在通过插入'ui.bootstrap'向您的应用注入ui-bootstrap但不使用uib-datepicker-popup指令。
ui-bootstrap不需要jquery，你使用的是某种jquery变种，它与angular不兼容，并且没有改变模型。
您应该从ng-model，

ng-model="ctrl.notificacion.vigenciaHasta | date:'dd/MM/yyyy'"

不起作用，您无法对模型值应用过滤器，但仅限于在模板中显示过滤器。

删除过滤器

ng-model="ctrl.notificacion.vigenciaHasta"

这就是你的datpicker标记应该是这样的

<div class='input-group date'>
    <input uib-datepicker-popup type='text' is-open="open" class="form-control" ng-required="true" close-text="Close" ng-model="ctrl.notificacion.vigenciaDesde">
    <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open = !open"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>

注意到我已添加is-open属性以从右侧按钮打开和关闭选择器。

这是更新的plunker

通过日历选择日期时，不显示日期

1 个答案: