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

Question

I am using Yii Framework to develop an application. I am using

$(document).ready(function(){
    
    $('.date-picker').datepicker();
    
});

everywhere it is running, but when I am placing it in index.php view file, then it is giving me the following error in firefox console:

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

$('.date-picker').datepicker();

I have search the above error everywhere but no solutions are applicable in my criteria from stackoverflow, and other blogs for this query.

Thanks

Solution 1

Try to include jquery library files in your view page. I had the same problem two weeks ago,but when i called it separetely my problem got solved.

<?php
Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerCoreScript('jquery.ui');

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl .'/js/jquery.ui.datepicker.js'); ?>

Solution 2

The source of your error is most probably the noConflict() setting for jQuery. Here's the reasoning from Wordpress Function Reference:

The jQuery library included with WordPress is set to the noConflict() mode (see wp-includes/js/jquery/jquery.js). This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

In the noConflict() mode, the global $ shortcut for jQuery is not available.

You just have to substitute $ for jQuery and your code will work.

Try this:

jQuery(document).ready(function() {
  jQuery('.date-picker').datepicker();
});

Or, you could continue using $ if you pass it in the function, like this:

jQuery(document).ready(function($) {
  $('.date-picker').datepicker();
});

Comments

[Praveen]

I guess that can't be the actual problem.

[Asad Nadeem]

I have done this before asking this question here. I have used noconflict and jQuery instead of "$", but no effect :(

[Saran]

Sorry it didn't help.