Javascript 图像上的Jquery UI日期选择器

您好

我想在单击图像并在其旁边显示时弹出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>

$（函数（）{
$（“.calenderpick”）。单击（函数（）{
$（this.datepicker（）；
警报（“已单击！”）；
});           
});

单击此图像后，我可以得到“it is clicked warning”，但不能得到日期选择器。我也不知道在选择日期后如何触发表单发布事件。最后，我想发布所选频道和所选日期，以便切换页面

谢谢

• 为什么不点击图片打开

看看这里的源头

• 如何在选择日期时发布表单

看看这里的源头

在onSelect事件中，您可以执行类似于

$（“#表单”）.submit（）的操作。

希望这对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>

$（文档）.ready（函数（）{
$（“#开始日期”）。日期选择器({
日期格式：“dd-mm-yy”，
变化月：对，
变化年：是的，
showOn:'按钮'，
buttonImage:“/img/calender.png”
});
});

希望这有帮助（注意我使用的是id而不是类选择器）。此外，检查日历上的拼写-应为日历ar:）

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

$（文档）.ready（函数（）{
$（“#开始日期”）。日期选择器({
日期格式：“dd-mm-yy”，
变化月：对，
变化年：是的，
showOn:'按钮'，
buttonImage:“/img/calender.png”，
onSelect:function（dateText，inst）{$（“#myform”）.submit（）；}
});
});

谢谢您的回答，但是我的html没有像示例中那样的输入文本字段，因此它是不同的。发布表单是我第二部分所需要的，谢谢：）@Hellnar-AFAIK

日期选择器绑定到一个标准表单输入字段

。在代码中调用的datepicker（）方法将输入字段附加到datepicker。这就是为什么你的代码没有按你希望的那样工作。很高兴这有帮助。。祝你一切顺利！！