Display datepicker according to selection

Question

Display datepicker according to selection

Navigation

#1 by (1 votes)

1

Good afternoon, I'm breaking my head to display the date as per the user's selection. Example:

select 01 - the "From / To" select 02 - Only "To" select 03 - Only "From" select 04 - No dates appear

I've created an array, with the dataInitial and dataFim elements, setting them to "s" or "n" for display, but I do not know if that's the right way to do it. Now I need to call the screen, when the user selects an option, it displays according to the rule.

(Note: I am using a date component, which uses a template)

-

Note that in the spt-data-interval component I have inserted a ng-show="home.source-filter.source == 's &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

Can the other rules be handled by the ng-show itself?

Follow the code:

HTML

<div class="form-group">
    <label for="" class="col-md-2 control-label">Tipo:</label>
        <div class="col-md-4">
            <select 
                class="form-control"
                ng-model="filtro.Vigencia" 
                ng-options="tipoVigencia.nome for tipoVigencia in tipoVigencia" 
                ng-change="" required>
                <option value="">Selecione o Tipo</option>>
            </select>
        </div>
        <spt-data-intervalo 
            ng-show="filtro.Vigencia.dataInicio=='s' && filtro.Vigencia.dataInicio=='s'" 
            template-url="inline" 
            inicio="inicioVigencia" 
            label-data-inicio="Vigência de:*" 
            classe-label="col-md-2" 
            fim="fimVigencia" 
            label-data-fim="Até:">
        </spt-data-intervalo>
    </div>

Control

$scope.tipoVigencia=[
    {nome: 'select 01', dataInicio:'s', dataFim:'s'},
    {nome: 'select 02',dataInicio:'n', dataFim:'s'},
    {nome: 'select 03',dataInicio:'s', dataFim:'n'},
    {nome: 'select 04',dataInicio:'n', dataFim:'s'},
    {nome: 'select 05',dataInicio:'n', dataFim:'n'}
];

Template Data

<div>
    <label for="inicio" class="float-left control-label" ng-bind="labelDataInicio"></label>
    <div class="{{classeLabel}}">
        <spt-data id="inicio" model="inicio" maxima="fim" mascara="39/19/9999" placeholder="dd/mm/aaaa" required></spt-data>
    </div>
</div>
<div>
    <label for="" class="float-left control-label" ng-bind="labelDataFim">Até:*</label>
    <div class="{{classeLabel}}">
        <spt-data id="fim" model="fim" minima="inicio" mascara="39/19/9999" placeholder="dd/mm/aaaa" required></spt-data>
    </div>
</div>

javascript angularjs select datepicker

asked by anonymous 09.01.2017 / 15:35

1 answer

Migration with possible data loss Android - Generate Apk

score 1 · Accepted Answer

Use the ng-if directive as follows:

(function() {
  'use strict';

  angular
    .module('appExemplo', []);

  angular
    .module('appExemplo')
    .controller('ExemploController', ExemploController);

  ExemploController.$inject = [];

  function ExemploController() {
    var exemplo = this;
    exemplo.filtro = {};
    
    exemplo.tiposVigencia = [
      {nome: 'select 01', dataInicio:'s', dataFim:'s'},
      {nome: 'select 02', dataInicio:'n', dataFim:'s'},
      {nome: 'select 03', dataInicio:'s', dataFim:'n'},
      {nome: 'select 04', dataInicio:'n', dataFim:'s'},
      {nome: 'select 05', dataInicio:'n', dataFim:'n'}
    ];    
  }
})()

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="appExemplo">
  <div ng-controller="ExemploController as exemplo">
    <select class="form-control"
            ng-model="exemplo.filtro.Vigencia"
            ng-options="tipoVigencia.nome for tipoVigencia in exemplo.tiposVigencia"
            ng-change="" required>
      <option value="">Selecione o Tipo</option>
    </select>
    <BR>
    <BR>
    <div ng-if="exemplo.filtro.Vigencia.dataInicio === 's'">
      SUBSTITUA AQUI O CÓDIGO DO SEU DATEPICKER DA DATA DE INICIO
    </div>
    <BR>
    <div ng-if="exemplo.filtro.Vigencia.dataFim === 's'">
      SUBSTITUA AQUI O CÓDIGO DO SEU DATEPICKER DA DATA DE TÉRMINO
    </div>
  </div>
</div>

ngIf

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

Free translation:

The ngIf directive removes or re-creates a portion of the DOM tree based on an {expression}. If the given expression is false the element is removed from the DOM, and if true it clones the element and reinserts in the DOM.

You can also use ng-show replacing ng-if but it is important to note that the element will be in the DOM if you choose this method.