Datepicker is not a function

Question

Datepicker is not a function

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I'm trying to make an input a calendar type to select a date, but the console always shows me the error:

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

This is the code I have for the scripts and the 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>

And this the jsp of the form:

<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>

I have to say that I am using the Spring tags for the forms, but with normal inputs I have obtained the same result

jquery formularios datepicker calendar

asked by atila665 20.12.2018 в 13:45

source

2 answers

Array identification problem Display an alert in a TableViewCell

score 1 · Answer 1

Includes the datepicker library to use its functions.

<!-- 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"/>

score 0 · Answer 2

Sort your tags a bit, since as a good practice the scripts should be specified at the end of the document to prevent our pages from delaying to start because the DOM is Load linearly in our browser.

It worked perfectly for me and with the same versions you are using =)

$(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>