CODEWITHSUNDEEP
javascriptjquery
boisterouslobster
boisterouslobster

Reputation: 1293

Datepicker given a div and input tag

I have been able to successfully attach a datepicker to an input field. However, is it possible to also display the datepicker that is attached to the input after clicking the span field?

<div class="date_month">
<input class="date" id = "set_date_01" type="text" readonly> 
<span class="date_icon">&nbsp;</span></div>

I have looked around and could not find a good solution. Any help is appreciated!

Upvotes: 0

Views: 66

Answers (3)

Skoua
Skoua

Reputation: 3603

I would try this:

$('.date_icon').on('click', function() {
    $('#set_date_01').focus();
});

But you really should use a label with a for attribute instead of your span. You wouldn't need js then to achieve this effect and it would be great for accessibility.

For instance:

<div class="date_month">
<label for="set_date_01">
    Pick a date
    <input class="date" id="set_date_01" type="text" readonly>
</label>
</div>

Upvotes: 3

Verhaeren
Verhaeren

Reputation: 1661

DatePicker has an attribute named buttonImage:

$(".date").datepicker({
    buttonImage: "/images/datepicker.gif",
    showOn: "both"
});

showOn must be set to button or both in order for this to work.

Upvotes: 0

Redit0
Redit0

Reputation: 370

It's hard to say for sure without knowing which datepicker you're using, but most jQuery date pickers will have events that you can trigger manually. So you would need to capture the click event for that span tag, and fire the datepicker's 'show the datepicker' event.

Here's some documentation describing what I mean when using the jQuery UI built-in datepicker: http://api.jqueryui.com/datepicker/#method-show

Upvotes: 0

Related Questions