1

Estoy intentando hacer de un input un tipo calendario para seleccionar una fecha, pero en consola siempre me aparece el error:

Uncaught TypeError: $(...).datepicker is not a function

Este es el código que tengo para los scripts y el css:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="styles/displaytag.css" type="text/css">
<link rel="stylesheet" href="styles/common.css" type="text/css">

<!-- Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- FontAwesome (iconos) -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<!-- Quilljs -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

Y este el jsp del formulario:

<div class="form-group col-md-4">
    <div>
        <label for="fechaInicio"><spring:message code="fechaInicio" /></label>  
        <form:input id="fechaInicio" path="fechaInicio" readonly="false" cssClass="form-control" required="required" /> 
        <br />  
        <form:errors cssClass="alert alert-danger medium" path="fechaInicio" /> 
    </div>
</div>

<script type="text/javascript"> 
    $(document).ready(function() {
        $("#fechaInicio").datepicker();
     });
</script>

He de decir que estoy usando los tags de Spring para los formularios, pero con inputs normales he obtenido el mismo resultado

2 respuestas 2

1

Incluye la librería datepicker para utilizar sus funciones.

<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
1
  • Es el datepicker de jquery-ui, no de bootstrap. Se puede encontrar un ejemplo aquí Datepicker
    – DaniR
    el 20 dic. 2018 a las 13:02
0

Ordene un poco tus tags, ya que como buena práctica se deben especificar los scripts al final del documento para evitar que nuestras páginas demoren en iniciarse debido a que el DOM se carga de manera lineal en nuestro navegador.

A mi me funcionó perfecto y con las mismas versiones que estas utilizando =)

$(document).ready(function() {
  $("#fechaInicio").datepicker();
});
<link href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"/>

<div class="form-group col-md-4 mt-5">
  <div>
      <label for="fechaInicio">Fecha</label>  
      <input type="text" id="fechaInicio"></p>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

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.