CODEWITHSUNDEEP
laraveldatetimepicker
Kristian Vasilev
Kristian Vasilev

Reputation: 544

Laravel with datetimepicker

I've configured by bower and installed bootstrap-datetimepicker like it says in the docs

I've set the bower directory in resources/assets/bower. After that I wanted to include the installed components inside of my blade. As far as I know the best way to do that is to use laravel-mix. I opened the app.js and added the following lines of code

require('../assets/bower/moment/moment')
require('../assets/bower/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker')

I did the same with app.scss file and added 

@import "../assets/bower/eonasdan-bootstrap-datetimepicker/src/sass/bootstrap-datetimepicker-build";

This is the console output when I run npm run dev

ERROR in ./resources/sass/app.scss Module build failed (from ./node_modules/css-loader/index.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    $bs-datetimepicker-active-bg: $btn-primary-bg !default;
                                 ^
          Undefined variable.
  ╷
7 │ $bs-datetimepicker-active-bg: $btn-primary-bg !default;
  │                               ^^^^^^^^^^^^^^^
  ╵
  resources\assets\bower\eonasdan-bootstrap-datetimepicker\src\sass\_bootstrap-datetimepicker.scss 7:31  @import
  stdin 3:9

As far as I can see this is a bootstrap variable but even when I included bootstrap variable that didn't help.

I'm stuck for hours now and I have no clue what to do. Even after i compiled successfully app.js. It still says taht custom.js:117 Uncaught TypeError: $(...).datetimepicker is not a function. I have my app.js included in the blade before I included my custom.js so It's supose to be working since it's loaded after it.

$('#datetimepicker1').datetimepicker();

Upvotes: 0

Views: 4388

Answers (1)

VIKAS KATARIYA
VIKAS KATARIYA

Reputation: 6005

Add this CDN

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

Write in your AJAX Code

<script>
  $(function() {
    $( "#datetimepicker1" ).datepicker({

    });
</script>

Upvotes: 1

Related Questions