Date Picker Not Working

Topic: Date Picker Not Working

dngu3355 free asked 3 years ago

Hi, We have a problem with making the date picker work in Laravel. We just tried to copy paste it in our application to see if it works. However, it says that $(...).datepicker is not a function. I found out that we did not include the picker-date.js script (from the pro template package) in our compiled assets, so we included it, but then it shows a lot of error and conflicts on Sidenav and Datatables.

See the screenshot below for your reference.

Resources (screenshots, code snippets etc.)
Before picker-date.js was imported. enter image description here

After picker-date.js was imported. enter image description here

Hoping for your assistance on this matter. Thank You.

Add comment

Grzegorz Bujański staff answered 3 years ago

1 0 Best answer

Hi. Try add picker as an alias in webpack.config.js:

 .webpackConfig( {
        resolve : {
            alias : {
                'picker': 'mdbootstrap-pro/src/js/vendor/pro/picker' ,
            } ,
        } ,
    } )

dngu3355 free commented 3 years ago

Hi,

This solution works. Thank you so much.

Grzegorz Bujański staff commented 3 years ago

You're welcome.

Add comment

dngu3355 free answered 3 years ago

0 0 Best answer

<p>This is our code in our blade.php file:</p>

<pre class="prettyprint"><code><div class="row justify-content-start">
<div class="col-xl-2 pr-0">
     <label class="col-form-label text-muted">Date Started:</label>
</div>
<div class="col-xl-6 md-form md-outline input-with-post-icon datepicker mt-0">
      <input type="text" class="form-control form-control-sm" name="date_started" id="date_started">
       <i class="mr-2 fas fa-calendar input-prefix" tabindex=0></i>
 </div>
</code></pre>

<p></p>

<p>Then, this is the script for our date picker:</p>

<pre class="prettyprint"><code>$('.datepicker').datepicker({
  inline: true
});
</code></pre>

<p>We import our Mdbootsrap components in app.js. Jquery is also imported at the very top.
<img src="https://usercontent.mdbootstrap.com/mdb-images/support/e211cdcc-d364-49e7-952d-37d375ea494e-Screenshot_25.jpg" alt="enter image description here" title=""></p>

<p>This is how we declare the scripts in our main blade file. (These are the compiled scripts)</p>

Please insert min. 20 characters.

This is our code in our blade.php file:

<div class="row justify-content-start">
<div class="col-xl-2 pr-0">
     <label class="col-form-label text-muted">Date Started:</label>
</div>
<div class="col-xl-6 md-form md-outline input-with-post-icon datepicker mt-0">
      <input type="text" class="form-control form-control-sm" name="date_started" id="date_started">
       <i class="mr-2 fas fa-calendar input-prefix" tabindex=0></i>
 </div>

Then, this is the script for our date picker:

$('.datepicker').datepicker({
  inline: true
});

We import our Mdbootsrap components in app.js. Jquery is also imported at the very top. enter image description here

This is how we declare the scripts in our main blade file. (These are the compiled scripts)

enter image description here

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.18.0
Device: PC
Browser: Google Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

dngu3355

35Support score
3Questions 2Answers 0Snippets