Jquery UI Datepicker on an image

Question

Greetings,

I want to pop up the Jquery Datepick as the image is clicked and displaying next to it. Once a date is clicked, I want to post my form.

Here how I try this:

The HTML:

<form id="myform">
<span class="quickgo">
Quick Go:
<select>
<option value="1">Discovery Channel</option>
<option value="2">History Channel</option>
</select>
<img class="calenderpick" src="/img/calender.png" />
</form>

And the javascript part:

<script type="text/javascript">
$(function() {
    $(".calenderpick").click(function() {
      $(this).datepicker();
      alert("it is clicked!");
    });           
});
</script>

Once this image is clicked, I can get the "it is clicked warning" however not the date picker. I also have no clue about how to trigger the form posting event once a date is picked. In the end I want to post the selected channel and the picked date so that I can switch the page.

Thanks

Answer 1

• Why its not opening on clicking the image

Look into the source over here JQuery Datepicker Icon Trigger

• How to post the form on selecting a date

Look into the source over here JQuery Datepicker Events - onSelect

in the onSelect event you can do something like $("#form").submit()

Hope this helps

Answer 2

Hellnar,

here's what i use regularly in my mvc apps:

<input class="date" id="StartDate" name="StartDate" value="" type="hidden" />

<script type="text/javascript">
    $(document).ready(function() {
    $("#StartDate").datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            showOn: 'button',
            buttonImage: '/img/calender.png'
        });
    });
</script>

hope this helps (notice i use an id and not a class selector). also, check the spelling on calender - should be calend*a*r :)

edit - if you wanted to submit the form on selecting the date, change the javascript code to:

<script type="text/javascript">
    $(document).ready(function() {
    $("#StartDate").datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            showOn: 'button',
            buttonImage: '/img/calender.png',
            onSelect: function(dateText, inst) { $("#myform").submit(); }
        });
    });
</script>