1

Tengo dos datetimepicker uno que selecciona un mes y otro que selecciona un año, estoy validando que no estén vacíos o tengan el formato para mes 'MM' y para año 'YYYY' pero en el formato de la fecha pareciera incorrecta por que lo valida como incorrecto

introducir la descripción de la imagen aquí

mi js es

<script>
    $(document).ready(function () {

        //$('#datetimepicker').datetimepicker('setStartDate', '2016')
        //$('#datetimepicker').datetimepicker('setStartDate', '2012-01-01');

        $(function () {
            $('#datetimepickerMes').datetimepicker({
                //viewMode: 'Months',
                format: 'MM',
                locale: 'es'
            });

            $('#datetimepickerAnio').datetimepicker({
                viewMode: 'years',
                format: 'YYYY',
                minDate: '01/01/2016'
            });
        });


        $('#registrationForm').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {

                datetimepickerMes: {
                    validators: {
                        notEmpty: {
                            message: 'La fecha de nacimiento no puede ser vacia'
                        },
                        date: {
                            format: 'MM',
                            message: 'La fecha de nacimiento no es valida'
                        }
                    }
                },

                datetimepickerAnio: {
                    validators: {
                        notEmpty: {
                            message: 'La fecha de nacimiento no puede ser vacia'
                        },
                        date: {
                            format: 'YYYY',
                            message: 'La fecha de nacimiento no es valida'
                        }
                    }
                },

            }
        });
    });
</script>

0

1 respuesta 1

1

El problema que tienes es que en el date validator los tokens YYYY y DD también son obligatorios por lo que no te funcionará si la validación que tratas de configurar no incluye DD , MM y YYYY, todos juntos.

Las dos opciones que tienes aquí son:

  1. Usar un regexp validator

    $(document).ready(function() {
      $('#registrationForm').bootstrapValidator({
        feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
    
          datetimepickerMes: {
            validators: {
              notEmpty: {
                message: 'La fecha de nacimiento no puede ser vacia'
              },
              regexp: {
                regexp: /^(0[1-9])|(1[0-2])$/,
                message: 'La fecha de nacimiento no es valida'
              }
            }
          },
    
          datetimepickerAnio: {
            validators: {
              notEmpty: {
                message: 'La fecha de nacimiento no puede ser vacia'
              },
              regexp: {
                regexp: /^\d{4}$/,
                message: 'La fecha de nacimiento no es valida'
              }
            }
          },
    
        }
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://momentjs.com/downloads/moment.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
    
    
    <form id="registrationForm" class="form-horizontal">
      <div class="form-group">
        <label class="col-xs-2 control-label">Fecha</label>
    
        <div class="col-xs-4">
          <input type="text" class="form-control date" name="datetimepickerMes" placeholder="Mes" />
        </div>
    
        <div class="col-xs-4">
          <input type="text" class="form-control" name="datetimepickerAnio" placeholder="Año" />
        </div>
      </div>
    </form>

    1. Usar un callback validator

    $(document).ready(function() {
      $('#registrationForm').bootstrapValidator({
        feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
    
          datetimepickerMes: {
            validators: {
              notEmpty: {
                message: 'La fecha de nacimiento no puede ser vacia'
              },
              callback: {
                callback: function(value, validator) {
                  var m = new moment(value, 'MM', true);
                  return m.isValid()
                },
                message: 'La fecha de nacimiento no es valida'
              }
            }
          },
    
          datetimepickerAnio: {
            validators: {
              notEmpty: {
                message: 'La fecha de nacimiento no puede ser vacia'
              },
              callback: {
                callback: function(value, validator) {
                  var m = new moment(value, 'YYYY', true);
                  return m.isValid()
                },
                message: 'La fecha de nacimiento no es valida'
              }
            }
          },
    
        }
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://momentjs.com/downloads/moment.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
    
    
    <form id="registrationForm" class="form-horizontal">
      <div class="form-group">
        <label class="col-xs-2 control-label">Fecha</label>
    
        <div class="col-xs-4">
          <input type="text" class="form-control date" name="datetimepickerMes" placeholder="Mes" />
        </div>
    
        <div class="col-xs-4">
          <input type="text" class="form-control" name="datetimepickerAnio" placeholder="Año" />
        </div>
      </div>
    </form>

En mi opinión la primer opción es la mejor ya que es la mas sencilla y fácil de configurar pero te puse la otra también en caso que tengas que hacer alguna comprobación más complicada. Suerte

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.