Select for card expiration

Asked

Viewed 294 times

2

I wanted to make two fields select one for the month and one for the year to use as expiration dates of a card, but wanted it to be generated dynamically and that when selecting the year 2017 for example appears only the months remaining to end the year that in the case on today date would appear only December. I only made a basic structure in html.

<div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
  <label>Mês</label>
   <select required ng-model="customer.monthCard">
     <option value="01">Janeiro</option>
     <option value="02">Favereiro </option>
     <option value="03">Março</option>
     <option value="04">Abril</option>
     <option value="05">Maio</option>
     <option value="06">Junho</option>
     <option value="07">Julho</option>
     <option value="08">Agosto</option>
     <option value="09">Setembro</option>
     <option value="10">Outubro</option>
     <option value="11">Novembro</option>
     <option value="12">Dezembro</option>
   </select>
</div>
<div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">
  <label>Ano</label>
    <select required ng-model="customer.yearCard">
      <option value="18"> 2018</option>
      <option value="19"> 2019</option>
      <option value="20"> 2020</option>
      <option value="21"> 2021</option>
    </select>
</div>
javascript html angularjs html5

  • For security reasons, I advise you to do this verification through the programming you use in the dynamic language, for example: PHP. Because anyone with knowledge in the browser console can remove this check.

  • My idea would be through Avascript and Angular generate the years (until 2027 for example) when loading the page and the current year receives only the months that come after the current month and then load dynamically on the page. The validations will all be done on the server, it would be something more for interface same.

  • @Carlosandrade, the check could very well be done on the frontend, provided that in the backend there is a check of type: If the date informed is not a date, or is earlier than today’s date, return error

  • Yes, of course. So that in the backend also have. I find it difficult to do two types of verification, while one would be enough. But every case is a case.

1 answer

0


I did something that might break a branch

<div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">
  <label>Ano</label>
  <select required ng-model="customer.yearCard">
    <option value="{{ano}}" ng-repeat="ano in AnosCard"> {{ano}}</option>
  </select>
</div>
<div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
   <label>Mês</label>
   <select ng-disabled="!customer.yearCard" required ng-model="customer.monthCard">
     <option value="{{mes}}" ng-repeat="mes in mesesCard">{{mes}}</option>
</select>

Javascript

        function geraDatas(){
        var data = new Date()
        data = data.getFullYear()
        var dataFim = data + 11
        var anos = []
        for (var index = 0; data < dataFim; data++, index++) {
            anos.push(data)   
        }
        $scope.AnosCard = anos
    }()

    $scope.$watch('customer.yearCard', function(newValue) {
        console.log(newValue)
        $scope.mesesCard = []
        var anoAtual = (new Date()).getFullYear()
        console.log(newValue, anoAtual)
        if(newValue == anoAtual){
            var mesAtual = (new Date().getMonth()) + 1
            console.log(mesAtual)
            var meses = []
            for(mesAtual; mesAtual <= 12; mesAtual++){
                meses.push(mesAtual)
            }
            $scope.mesesCard = meses
        } else {
            $scope.mesesCard = [1,2,3,4,5,6,7,8,9,10,11,12]
        }
    });

Browser other questions tagged javascript html angularjs html5

You are not signed in. Login or sign up in order to post.