JqueryUI Datepicker: Uncaught TypeError: Cannot read property 'settings' of undefined?

Question

I am developing a asp.net MVC4 project where i use lots of JqueryUI datepicker.

For one of my date picker when i tried to click on datepicker image i am getting some error like,

Uncaught TypeError: Cannot read property 'settings' of undefined                jquery-ui-1.10.3.min.js:9

Html

<div>
<input type="text" id="tsDte"  style="font-size: 14px;width: 50%" >              
                <img src="~/Images/dayPicker.png" onclick="tsDatePickerClick()" style="vertical-align:bottom"/>
</div>

Javascript

var currentDate = new Date();

$("#tsDte").datepicker({
    dateFormat: 'yy-mm-dd',
    maxDate: 0,
    changeYear: true 
}).attr('readonly', 'readonly');
$("#tsDte").datepicker("setDate", currentDate);


function tsDatePickerClick() {
    $("#tsDte").datepicker('show');
}

Here i have a Textfield and a datepicker image.When i click on datepicker image datepicker will popup .

i have followed the similar way in other datepicker and they are working fine.I have only problem with this date picker.

Any help is appreciated.

Answer 1

That same error will be shown if you try to open a datepicker on an input field who has the class "hasDatepicker" assigned. Simply remove this class in the html.

Before:

<input type="text" value="01/01/2014" class="hasDatepicker">

After:

<input type="text" value="01/01/2014">

Answer 2

I think your datepicker wasn't created correctly, so when you call show, it expects a settings object.

Probably you didn't create it inside $(document).ready, you should have:

$(document).ready(function(){      //Add this line (and it's closing line)
    var currentDate = new Date();

    $("#tsDte").datepicker({
        dateFormat: 'yy-mm-dd',
        maxDate: 0,
        changeYear: true 
    }).attr('readonly', 'readonly');
    $("#tsDte").datepicker("setDate", currentDate);
});

Hope this helps. Cheers

Answer 3

You are including the jquery-ui-1.10.3.min.js library.

Your issue is caused by duplicating your jQuery UI core scripts.(check if you are including any other librady such as jquery-ui-1.10.3.drag-drop.min.js .

Load just them once, and your issue will go away.

Answer 4

On refreshing the page, you need to remove class 'hasDatepicker' and then set the settings (again). On refresh, the class is kept and so the datepicker is not recreated.