1

Observem o código HTML;

   <div class="form-group">
                      <label for="inputEmail3" class="col-sm-2 control-label">Período:</label>
                      <div class="row">
                          <div class="col-sm-2">
                            <input autocomplete="off" id="idPeriodoInicio" class="form-control monthPicker listar_uj" name="periodoInicio" id="periodoInicio"  placeholder="Período Inicial">
                          </div>
                           <div class="col-sm-2">
                            <input autocomplete="off"  id="idPeriodoFim" class="form-control monthPicker listar_uj" name="periodoFim" id="periodoFim" placeholder="Período Final">
                          </div>

                      </div>
                    </div>

tem como aproveitar essa linha código somente para formatar o campo? Eu não quero que aparece nenhum calendário, eu só quero simplesmente no ato do usuário digitar o campo ele validar o campo com a formatação.

function carregaCalendario(){   
            $(".monthPicker").datepicker({
                dateFormat: 'MM/yy',
                changeMonth: true,
                changeYear: true,
                showButtonPanel: false,
                monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
               // monthNames: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],

                onClose: function(dateText, inst) {
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).val($.datepicker.formatDate('mm/yy', new Date(year, month, 1)));
                }
            });

            $(".monthPicker").focus(function () {
                $(".ui-datepicker-calendar").hide();
                $("#ui-datepicker-div").position({
                    my: "center top",
                    at: "center bottom",
                    of: $(this)
                });
            });
        }

2 Respostas 2

2

Você pode usar o jQuery com o MaskedInput.

As bibliotecas são essas

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>

Pelo que eu entendi você quer uma máscara apenas com o mês e o ano.

Ficaria assim no formato mm/yy

Html

<div class="form-group">
                      <label for="inputEmail3" class="col-sm-2 control-label">Período:</label>
                      <div class="row">
                          <div class="col-sm-2">
                            <input autocomplete="off" id="idPeriodoInicio" class="form-control monthPicker listar_uj" name="periodoInicio" id="periodoInicio"  placeholder="Período Inicial">
                          </div>
                           <div class="col-sm-2">
                            <input autocomplete="off"  id="idPeriodoFim" class="form-control monthPicker listar_uj" name="periodoFim" id="periodoFim" placeholder="Período Final">
                          </div>

                      </div>
                    </div>

jQuery

$(document).ready(function () {
        $('#idPeriodoInicio').mask('99/99');
        $('#idPeriodoFim').mask('99/99');
    });

Pode ver funcionando aqui > http://jsfiddle.net/m9ngvpk6/

0

Com JavaScript puro você consegue formatar o campo adicionando uma barra quando o número de caracteres for igual a 2.

Basta você pegar os campos pela classe comum .monthPicker e aplicar um onkeydown em cada input. Ao digitar no campo, uma barra será adicionada quando ele tiver 2 caracteres.

Pode colocar também maxlength="5" para limitar o número de caracteres no input.

No exemplo abaixo coloquei ainda para aceitar apenas números nos campos:

document.addEventListener("DOMContentLoaded", function(){
   
   // seleciona todos os campos pela classe
   var datas = document.querySelectorAll(".monthPicker");
   // teclas de controle (backspace, tab, ctrl etc.)
   var p = [8,9,13,16,17,35,36,37,39,46];
   
   for(var x=0; x<datas.length; x++){
      
      datas[x].onkeydown = function(e){
         
         var kcode = e.which || e.keyCode; // código da tecla
         var key = e.key; // valor da tecla
         
         // evita teclas que não sejam números
         // e as teclas que não sejam de controle
         // ao mesmo tempo
         if( /\D/.test(key) && !~p.indexOf(kcode) ){
            e.preventDefault(); // anula o efeito do evento keydown
            return; // sai da função
         }
         
         // se o número de caracteres for igual a 2
         // concatena a barra
         if(this.value.length == 2 && kcode != 8) this.value += "/";
         
      }
      
   }
   
});
<div class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">Período:</label>
 <div class="row">
     <div class="col-sm-2">
       <input type="text" maxlength="5" autocomplete="off" id="idPeriodoInicio" class="form-control monthPicker listar_uj" name="periodoInicio" placeholder="Período Inicial">
     </div>
      <div class="col-sm-2">
       <input type="text" maxlength="5" autocomplete="off"  id="idPeriodoFim" class="form-control monthPicker listar_uj" name="periodoFim" placeholder="Período Final">
     </div>

 </div>
</div>

Você deve fazer log-in para responder a esta pergunta.