0

Hola estoy utilizando el componente TempusDominus DateTimePicker en mi proyecto, y tengo un problema con el mismo. Tengo un input y lo que necesito es que al darle click se muestre el componente con los años, y al seleccionar un año se muestre y se cierre el componente. El problema es que al seleccionar el año no se cierra el componente y lo que hace es visualizarme los meses de ese año,y luego de eso los dias del mes seleccionado.Al final el input me muestra todo el formato completo en vez de mostrarme solo el año que es que lo que me hace falta. Adjunto imagenes para visualizar mejor lo que me sucede.

Lo que deseo es que después de esta primera imagen no salgan las demás opciones del componente, que el input se quede con el año seleccionado. Si alguien sabe de algun otro componente datetimepicker compatible con bootstrap 4 también le agradecería que me enviara un link donde descargarlo.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

1 respuesta 1

2

Puedes lograrlo de la siguiente manera:

$('#fecha').datetimepicker({
    viewMode: 'years',
    format: 'YYYY'
});

Ejemplo

$(document).ready(function(){
  $('#datetimepicker1').datetimepicker({
    viewMode: 'years',
    format: 'YYYY'
  });
});
.container{
  margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.js"></script>
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>



<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
          <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
          <span class="input-group-addon" data-target="#datetimepicker1" data-toggle="datetimepicker">
                        <span class="fa fa-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

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.