0

lo que sucede es que estoy implementando un calendario en mi aplicación, para ello use el de JQuery, pero al momento de las configuraciones es donde surge el problema y es que no me deja seleccionar la fecha completa, solo el año y posterior a esto se oculta y no debería hacerlo, ya le di muchas vueltas pero no logro configurar de forma correcta el calendario, por favor me podrían ayudar a ver donde esta el inconveniente.

$('[data-toggle="datepicker"]').datepicker({
  inline: true,
  startView: 2
});
.calendar {
  border: 1px solid red;
  height: 30px;
}

.datepicker-container {
  margin-top: 40px;
}
<link href="https://fengyuanchen.github.io/datepicker/css/datepicker.css" rel="stylesheet" />

<div class="datepicker">
  <span class="text">
  Selecciona una fecha
  </span>
  <div class="calendar" data-toggle="datepicker">
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>

2 respuestas 2

1

No te dejaba seleccionar el año por una opción que tenias que es startView, poniendo esa opción en 0 te dejará seleccionar el día, aquí te dejo el enlace a la documentación del plugin.

También en su demo ellos utilizan un input para realizar la acción del date picker así que cambie el div por un input y ya funciona correctamente, ya no se cierra automáticamente y te deja cambiar la fecha.

$('#date-picker').datepicker({
  inline: true,
  startView: 0,
  container: $('.datepicker')
});
.calendar {
  border: 1px solid red;
  height: 30px;
}
<link href="https://fengyuanchen.github.io/datepicker/css/datepicker.css" rel="stylesheet" />

<div class="datepicker">
  <span class="text">
  Selecciona una fecha
  </span>
  <br>
  <input id="date-picker" class="calendar" type="text">
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>

4
  • Amigo, muchas gracias por tu respuesta, hay algo curioso, y es que cuando uso el input para el datapicker, el inline deja de funcionar por algún motivo que desconozco Commented el 19 oct. 2018 a las 14:50
  • Ya le especifique el contenedor para el inline. Commented el 19 oct. 2018 a las 14:58
  • Muchisimas gracias!!! de verdad Commented el 19 oct. 2018 a las 15:44
  • De nada, un saludo. Commented el 19 oct. 2018 a las 15:49
0

Te dejo un datepicker que uso en mi aplicación para que veas algunas de las opciones disponibles:

  $('.mydatepickerclass').datepicker({
                dateFormat: "dd/mm/yy",
                minDate: new Date(2010, 3 - 1, 1),
                numberOfMonths: 1,
                showCurrentAtPos: 0,
                firstDay: 1,
                beforeShowDay: $.datepicker.noWeekends,
                changeMonth: true,
                changeYear: true,
                showAnim: 'slideDown'
            });

Lo que preguntas creo que con el dateFormat: "dd/mm/yy" es suficiente

Espero te sirva.

3
  • Hola, muchas gracias por tu respuesta pero temo que no es lo que estoy buscando, busco es que me deje seleccionar la fecha completa, pero al seleccionar el año, inmediatamente se oculta el calendario Commented el 19 oct. 2018 a las 14:21
  • pues el problema no esta en el datepicker(), ya que ese que te envié esta funcionando bien (solo he probado explorer y chrome), publica todo el código de la pagina, que el error esta en otra parte Commented el 19 oct. 2018 a las 14:33
  • En el código ejecutable de la pregunta se esta replicando mi inconveniente, tal cual pasa en mi aplicación :( Commented el 19 oct. 2018 a las 14:35

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.