5

Estoy tratando de encontrar una manera de poder eliminar el valor de día en un input de tipo fecha, es decir, lo común es que salga '09/08/2019', no se si hay una manera para que solo sea mes y año ('08/2019').

<form action="" method="POST" class="form-row mb-4">
    <div class="col">
         <label for="fecha">Primera fecha</label>
         <input type="date" name="fecha" id="fecha" class="form-control" value="2019-08-09">
    </div>
</form>

1
  • 2
    Podrías usar un <input type="month">.
    – phpMyGuel
    el 9 ago. 2019 a las 11:49

1 respuesta 1

7

Opción 1: Puedes usar <input type="month">:

<form action="" method="POST" class="form-row mb-4">
    <div class="col">
        <label for="fecha">Primera fecha</label>
        <input type="month" name="fecha" id="fecha" class="form-control" value="2019-08">
    </div>
</form>

Aunque un problema puede ser que no esta soportado en algunos los navegadores (como Firefox y Explorer).

Para mas información puedes revisar la documentación.

Opción 2: La opción con datepicker podría ser de la siguiente forma:

Aclaro que el código no es mio, es de la respuesta de Ben Koehler en Stack Overflow en Ingles jQuery UI DatePicker to show month year only

$(function() {
            $('.date-picker').datepicker( {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: false,
            dateFormat: 'mm-yy',
            onClose: function(dateText, inst) { 
                $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
            }
            });
        });
.ui-datepicker-calendar {
        display: none;
    }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
</head>
<body>
    <label for="startDate">Mes :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>

Para cambiar el formato de la fecha puedes cambiar la linea dateFormat: 'formato', y colocar el formato que buscas (por ejemplo 'mm-yy' para '01-2019').

Como esta en ingles puedes intentar cambiarlo a español como indica la respuesta en DatePicker en español

Espero te sirva, saludos.

7
  • 2
    Sino en JQuery el datapicker es muy personalizable.
    – Srsole
    el 9 ago. 2019 a las 11:55
  • @Srsole si aunque el problema es que viene en ingles y hay que cambiarle el idioma, luego es una gran opción.. el 9 ago. 2019 a las 11:58
  • 1
    Excelente, muchas gracias! el 9 ago. 2019 a las 12:35
  • @VictorAlvarez de nada, que tengas buen día. el 9 ago. 2019 a las 12:35
  • 1
    @Srsole si el OP me lo pide puedo agregar mas información, hasta entonces solo me remito a los limites de la pregunta. el 9 ago. 2019 a las 13:07

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.