2

Estoy Empezando a trabajar con la función DatePicker de JQuery-UI, entonces he visto algunos tutoriales y son como el siguiente codigo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DatePicker</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">  
  <link rel="stylesheet" href="css/fa-regular.css">
  <link rel="stylesheet" href="css/fa-solid.css">
  <link rel="stylesheet" type="text/css" href="css/fa-brands.css">
  <link rel="stylesheet" type="text/css" href="css/fontawesome.css">
</head>
<body>
  <div class="container">
    <div class="col-sm-6" style="height:130px;">
        <div class="form-group">
            <div class='input-group date' id='datetimepicker10'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    Calendario
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker10').datetimepicker({
                viewMode: 'years',
                format: 'DD/MM/YYYY'
            });
        });
    </script>
</div>
  <script type="text/javascript" src="js/jquery-3.3.1.js"></script> 
  <script type="text/javascript" src="js/jquery-ui.js"></script>
</body>
</html>

Al dar click en la palabra calendario (Donde después lo cambiare por un icono) tiene que desplegar el calendario para agregarlo en el input.

El problema es que al dar click nada sucede.

Me estoy basando en los ejemplos de Aquí

4
  • Lo que percibo de tu código es que te falta importar las librerías de datetimepicker en proyecto. te dejo el siguiente link para que lo cheques eonasdan.github.io/bootstrap-datetimepicker/Installing el 29 ene. 2018 a las 21:55
  • ¿Como seria eso? Estoy chechando el ejemplo de jqueryui.com/datepicker y no tiene nada mas que eso. el 29 ene. 2018 a las 22:09
  • Tu pregunta es acerca de jquery-ui pero el ejemplo del link es de bootstrap.js lo que no es lo mismo.
    – Einer
    el 29 ene. 2018 a las 22:43
  • Soy nuevo en esto, me puse a buscar y me base de alli, pero, ya encontre la respuesta que necesitaba, haciendo pruebas y buscando en internet llegue a la solucion el 29 ene. 2018 a las 22:45

1 respuesta 1

1

$(document).ready(function() {
  $("#fecha").datepicker({
  	changeMonth:true,
  	changeYear: true
  });
  $('#icono').click(function() {
    $("#fecha").focus();
  });
});
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DatePicker</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

</head>
<body>
  <form class="form-inline">
    <div class="form-group">
      <label for="">Fecha:</label>
      <input type="text" id="fecha" name="fecha" class="form-control">
    </div>
    <div class="input-group-addon">
      <i class="fa fa-calendar" id="icono"></i>
    </div>
  </form>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript" src="js/date_local.js"></script>
</body>
</html>

Esta es la solucion que encontre a mi problema, la obtuve Aquí

Tu Respuesta

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

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