javascript - 图像上的 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>

单击此图像后，我会收到“已单击警告”，但不会收到日期选择器。我也不知道如何在选择日期后触发表单发布事件。最后我想发布选择的 channel 和选择的日期，以便我可以切换页面。

谢谢

Answer 1

海尔纳

这是我在我的 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 而不是类选择器)。另外，检查日历上的拼写 - 应该是 calendar :)

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