图像上的Jquery UI Datepicker

Question

问候,

我想弹出Jquery Datepick,因为单击图像并显示在旁边.点击日期后,我想发布我的表单.

我在这里尝试这个:

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>

和javascript部分:

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

单击此图像后,我可以获得"点击警告"但不是日期选择器.我也不知道如何在选择日期后触发表单发布事件.最后,我想发布所选频道和选择日期,以便我可以切换页面.

谢谢

Answer 1

Hellnar酒店,

这是我在我的mvc应用程序中经常使用的内容:

<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而不是类选择器).另外,检查日历上的拼写 - 应该是calend 一个 r :)

编辑 - 如果您想在选择日期时提交表单,请将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>