CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Ariel Sabbadini
Ariel Sabbadini

Reputation: 35

Date is not displaying when It's being selected through calendar

I'm trying to display a date selected by bootstrap calendar date but I don't see the value of the date selected. Date is displaying correctly when I choose edit option to update it into the item list but If I change the date though the calendar that is not being updated after tag "Vigencia Desde Updated".

I appreciate any help on that.

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 link:

http://plnkr.co/edit/KFA4AsgQdItUfSWVc1Ag

Upvotes: 0

Views: 653

Answers (1)

svarog
svarog

Reputation: 9847

  1. You are injecting ui-bootstrap into your app by inserting 'ui.bootstrap' but you not using the uib-datepicker-popup directive.
  2. ui-bootstrap doesn't require jquery, you were using some sort of jquery variant that isn't compatible with angular and didn't change the model.
  3. you should remove filters from your ng-models, this

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

Doesn't work, you can't apply a filter on a model value, but only when displaying it in your template.

Remove the filters

ng-model="ctrl.notificacion.vigenciaHasta"

This is how your datpicker markup should look like

<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>

Noticed I've added the is-open attribute to open and close the picker from the right button.

Here is an updated plunker

Upvotes: 1

Related Questions