datepicker is not a function - JQuery - Bootstrap

Question

I m trying to include the datepicker for Bootstrap but am getting the following error   Uncaught TypeError         datepicker is not a function  I don t see why it s there  I ve looked at other cases of this error  but none match mine   HTML    lt script src  https   code jquery com jquery-2 2 4 min js  integrity  sha256-BbhdlvQf xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44   crossorigin  anonymous  gt  lt  script gt   lt script src   lt  php echo BASE URL    gt  js moment min js  gt  lt  script gt   lt script src   lt  php echo BASE URL    gt  js bootstrap min js  gt  lt  script gt   lt script src   lt  php echo BASE URL    gt  js bootstrap-datetimepicker min js  gt  lt  script gt   lt script src   lt  php echo BASE URL    gt  js main js  gt  lt  script gt    lt div class  col-md-6  gt       lt div class  form-group  gt            lt label for  geboortedatum  gt Geboortedatum  lt  label gt            lt div class  input-group datepicker  data-provide  datepicker  gt                  lt input type  text  name  geboortedatum  id  geboortedatum  class  form-control  gt                  lt div class  input-group-addon  gt                      lt span class  glyphicon glyphicon-th  gt  lt  span gt                  lt  div gt            lt  div gt       lt  div gt   lt  div gt    JS     document  ready function              datepicker   datepicker           format   dd mm yyyy                UPDATE after adding JQuery UI  It now looks like the following

User · Answer

Need to include jquery-ui too    lt script src    code jquery com ui 1 11 4 jquery-ui js  gt  lt  script gt

User · Answer

lt script type  text javascript  gt       var options               format   mm dd yyyy               todayHighlight  true              autoclose  true                      datetimepicker   datepicker options     lt  script gt

User · Answer

I resolved this by arranging the order in which your JS is being loaded   You need to have it as jQuery -  datePicker -  Init js  Call your JQuery in your header  datePicker script in head below your jquery and Init JS in footer

User · Answer

You can try the following and it worked for me   Import following scripts and css files as there are used by the date picker     lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt   lt script type  text javascript  src  https   cdnjs cloudflare com ajax libs bootstrap-datepicker 1 4 1 js bootstrap-datepicker min js  gt  lt  script gt   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs bootstrap-datepicker 1 4 1 css bootstrap-datepicker3 css   gt   lt link rel  stylesheet  href  css bootstrap min css  gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0 js bootstrap min js  gt  lt  script gt   lt script src  http   code jquery com ui 1 11 0 jquery-ui js  gt  lt  script gt   lt link rel  stylesheet  href  http   code jquery com ui 1 12 1 themes base jquery-ui css  gt    The JS coding for the Date Picker I use    lt script gt            document  ready function                   alert   Cliecked                var date input    input name  orangeDateOfBirthForm        our date input has the name  date              var container     bootstrap-iso form   length gt 0       bootstrap-iso form   parent      body               var options                   format   dd mm yyyy     format of the date                 container  container                  changeYear  true     you can change the year as you need                 changeMonth  true     you can change the months as you need                 todayHighlight  true                  autoclose  true                  yearRange   1930 2100     the starting to end of year range                             date input datepicker options                    lt  script gt    The HTML Coding     lt input type  text  id  orangeDateOfBirthForm  name  orangeDateOfBirthForm  class  form-control validate  required gt    lt label data-error  wrong  data-success  right  for  orangeForm-email  gt Date of Birth lt  label gt

User · Answer

To get rid of the bad looking datepicker you need to add jquery-ui css   lt link rel  stylesheet  type  text css  href  https   code jquery com ui 1 12 0 themes smoothness jquery-ui css  gt

User · Answer

Not the right function name I think    document  ready function              datepicker   datetimepicker           format   dd mm yyyy

User · Answer

You need to include jQueryUI   x000D   x000D    document  ready function     x000D   x000D          datepicker   datepicker   x000D          format   dd mm yyyy  x000D          x000D      x000D   lt script src  https   code jquery com jquery-2 2 4 min js  integrity  sha256-BbhdlvQf xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44   crossorigin  anonymous  gt  lt  script gt  x000D   lt script   src  https   code jquery com ui 1 11 3 jquery-ui min js    integrity  sha256-xI qyl9vpwWFOXz7 x 9WkG5j SVnSw21viy8fWwbeE     crossorigin  anonymous  gt  lt  script gt  x000D   lt script src   lt  php echo BASE URL    gt  js moment min js  gt  lt  script gt  x000D   lt script src   lt  php echo BASE URL    gt  js bootstrap min js  gt  lt  script gt  x000D   lt script src   lt  php echo BASE URL    gt  js bootstrap-datetimepicker min js  gt  lt  script gt  x000D   lt script src   lt  php echo BASE URL    gt  js main js  gt  lt  script gt  x000D   x000D   lt div class  col-md-6  gt  x000D       lt div class  form-group  gt  x000D            lt label for  geboortedatum  gt Geboortedatum  lt  label gt  x000D            lt div class  input-group datepicker  data-provide  datepicker  gt  x000D                  lt input type  text  name  geboortedatum  id  geboortedatum  class  form-control  gt  x000D                  lt div class  input-group-addon  gt  x000D                      lt span class  glyphicon glyphicon-th  gt  lt  span gt  x000D                  lt  div gt  x000D            lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I had similiar problem  The quick fix I found is to change    lt div class  input-group datepicker  data-provide  datepicker  gt    to    lt div class  input-group date  data-provide  datepicker  gt

[javascript] $(...).datepicker is not a function - JQuery - Bootstrap

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to datepicker