I am a newbie in Javascript and jquery I have a jquery function
$('.input-group .date').datepicker({
});
for
<div class="input-group date" id="dp3">
<input class="form-control" type="text" placeholder="Date" name="date" value="">
</div>
I want to add this inside input tag using onclick="" can you please tell me how to do this ?
If I'm thinking what your thinking then it's wrong.
.datepicker() already assigns an onClick event so you don't have to create an extra one.
You have to make sure you are using jQuery and jQuery UI in order for datepicker to work.
Then you either have to put your script before you close body or in the head and use
$(document).ready(function(){ ... });
I also think you are using the wrong selector here.
. is class
# is ID
So it should be
$('.input-group .form-control').datepicker();
Example: http://jsfiddle.net/Spokey/AjRm3/
For those coming to this question because they want to know how to bind to the event that happens when someone clicks on an input box, then this is useful:
$('input.your-input-box-class').focus(function(e){
// do something
});
For those who want to use datepicker like the original question asks, then remember that jQuery UI abstracts away from these types of details. So just use the widgets like they were meant to be used. In this case, create the datepickers for all your input boxes that have a certain class (say date maybe) when the DOM is done loading:
$(document).ready(function(){
$('input.datepicker').datepicker({ /*... pass options here ...*/ });
});
And for options, you read the documentation, they include handling all the events you need:
Call a function:
onclick="someFunction(this);"
Set function:
function someFunction(this) {
$(this).prev('.input-group.date').datepicker({});
}
You bind datepicker to DOM element, not onClick.
$(document).ready(function(){
$('.form-control').datepicker({});
});
Or add it in function, so you can call it dynamically.
put the set of code inside a javascript function say clickMe()
function clickMe(){
$('.input-group .date').datepicker({
});
}
now call the function in click method.
<div class="input-group date" id="dp3">
<input class="form-control" type="text" placeholder="Date" name="date" value="" onclick="clickMe()">
</div>
$('.input-group .date')should be:$('.input-group.date')