La pregunta se refiere a crear un único campo input
tipo MM/YY
. Formatear y validar una fecha de caducidad en una tarjeta de crédito requiere mucha atención, por lo que establezco una lista de requerimientos.
Primer requerimiento:
Tener un placeholder MM/YY que vaya sustituyéndose conforme pongas los numeros, por ejemplo mientras vayas poniendo la fecha 07/19
vaya haciendo lo siguiente:
0M/YY
07/YY
07/1Y
- en este caso se debería saltar el simbolo/
07/19
Segundo requerimiento: No dejar escribir letras ni caracteres especiales.
Tercer requerimiento: No debería dejar escribir un mes sin sentido. Por ejemplo, el mes 13 no existe por lo que no debería ser posible escribir 13 en lugar de MM. Solo de 01 hasta 12.
Cuarto requerimiento: La fecha debería ser una fecha superior ó igual al mes actual. No debería ser posible completar el campo con una fecha de caducidad que ha pasado.
Quinto requerimiento:
No se puede utilizar <input value="MM/YY">
, todo tiene que estar hecho con JS y simplemente asignando la clase .caducidad
al campo, el mismo debería empezar a formatearse.
Os dejo mi código a lo que he llegado:
$(document).ready(function(){
$('.caducidad').on('keypress change', function () {
$(this).val(function (index, value) {
return value.replace(/\W/gi, '').replace(/[A-Za-z!@#$%^&*()]/g, '');
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="caducidad" />