jquery datepicker not working on input click

Question

I know it is kind of silly/minor mistake. but i could not able to find it.

I wrote same code as mentioned here http://jqueryui.com/datepicker/#default but still nothing.

Code:

<input type="text" id="hasDatepicker" class="fromDate large hasDatepicker" maxlength="10" placeholder="dd-mm-yyyy" autocomplete="off">

JS :

$(".hasDatepicker").datepicker();

Fiddle : http://jsfiddle.net/mkcb5b0e/

Answer 1

The reason is hasDatepicker is an internal class used by the jQuery UI datepicker to determine whether datepicker widget is already initialized for the selected element, if so then it doesn't do anything.

So in your case since your input already has the class the .datepicker() call doesn't do anything assuming that the widget is already initialized.

$(".hasDatepicker2").datepicker();

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<input type="text" id="hasDatepicker" class="fromDate large hasDatepicker2" maxlength="10" placeholder="dd-mm-yyyy" autocomplete="off">

Answer 2

Correct code-

HTML Code - (remove hasDatepicker from class)

<input type="text" id="hasDatepicker" class="fromDate large" maxlength="10" placeholder="dd-mm-yyyy" autocomplete="off">

jQuery Code- (give #hasDatepicker as selector)

$("#hasDatepicker").datepicker();

Working fiddle - http://jsfiddle.net/Ashish_developer/m3adjs1r/