JQuery UI Datepicker on Image

Question

Hi,

I want to open jQuery Datepick when the image is clicked and shown next to it. After the date is clicked, I want to publish my form.

Here is how I try this:

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>

As soon as this image is clicked, I can get a warning about a button click, but not select a date. I also do not know how to fire a form publish event after selecting a date. In the end, I want to publish the selected channel and the selected date so that I can switch the page.

thank

Answer 1

Hellnar

here is what i regularly use in my mvc applications:

<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>

, ( , id, ). - a:

- , javascript :

<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>

Answer 2

• .

JQuery Datepicker Icon Trigger

JQuery Datepicker - onSelect

onSelect - $("#form").submit()

,