jquery datepicker ui-state-default ui-state-hover href =“#”

时间:2014-01-09 06:08:19

标签: jquery jquery-ui spring-security

我的jquery datepicker存在问题。

每当我点击日期选择器时,datepicker就会显示正常,我可以选择一个日期。我遇到的问题是,当我选择日期时,会执行以下链接。

http://myServer:8080/MyApp/#

我感兴趣所以我使用firebug来检查生成的样式,我可以看到jquery datepicker中的所有日期实际上都有这个链接。

有谁知道我需要做些什么来改变这个?我在我的表单后面发布了javascript,还有生成的样式的截图。

FORM ELEMENTS ...
<div class="ym-fbox" id="weekEndingDate">
    <form:label path="weekEndingDate"><spring:message code="label.weekEndingDate"/><sup class="ym-required">*</sup></form:label>
    <form:input path="weekEndingDate" class="{required:true} datepicker" placeholder="enter a value"/>
</div>

JS BEHIND FORM ...
$().ready(function() {

    $(".datepicker").datepicker({dateFormat: 'dd/mm/yy'});
    $(".datepicker").blur(function(e) { $(this).datepicker("hide"); });

    $("#submitBtn").click(function(){ 
        if ($("shortsAndOversDailyForm").valid()) {
            return true;
        }
        return false;
    }); 

});

enter image description here

感谢

更新20140110

我使用的jquery版本是......

jquery-1.7.1.min.js
jquery.metadata.js
jquery.validate.min.js
jquery.hotkeys-0.8.js
jquery-ui-1.8.16.custom.min.js
jquery.ui.datepicker-en-AU.js
jquery.ui.datepicker.validation.min.js

我正在使用这些版本的jquery,因为我在我的公司复制了另一个使用相同版本的应用程序。我这样做是因为我需要支持ie6,而那些版本的jquery在ie6中运行良好。 (这可能是另一个值得另一篇文章的问题,但是你们认为我使用的是正确的版本吗?或者我应该选择更新的版本?)

我今天早上花了几个小时试图解决这个问题并遇到以下问题......

http://wordpress.org/support/topic/solution-to-ie-jquery-date-picker-jumps-to-top-of-page

我试着通过在我的js中添加以下功能来让这对我有用...

$(".datepicker").datepicker({
      dateFormat: "yy-mm-dd",
      changeMonth: true,
      changeYear: true,
      numberOfMonths: 1,
      showButtonPanel: true,
      onSelect: function() {
          alert("on select");
          $(".ui-datepicker a").removeAttr("href");
          $(this).change();
      }
    });

但我无法触发onSelect功能。对我来说,它不起作用。

2 个答案:

答案 0 :(得分:1)

在Datepicker中,点击事件附加到&lt; td&gt; tag,&lt; a&gt;的父级标签

此事件处理程序将false返回给jQuery。

然后jQuery调用event.preventDefault()和stopPropagation()。

这就是他们如何阻止&lt; a&gt;的默认操作标签

所以你不应该触发/ MyApp /#链接。

你使用的是什么jQuery版本? (现在jQuery UI正在使用1.9.1)

您是否将任何其他事件处理程序附加到&lt; a&gt;标记

您用来显示日期选择器的元素是什么?

答案 1 :(得分:0)

这是通过以下方式解决的......

$(".datepicker").datepicker({
      dateFormat: "dd/mm/yy",
      changeMonth: false,
      changeYear: false,
      numberOfMonths: 1,
      showButtonPanel: false,
      onSelect: function() {
          $("#"+$(this).attr("data-target")).val( $(this).val());
      }
    });


@InitBinder
public void initBinder(WebDataBinder webDataBinder) {
    SimpleDateFormat df = new SimpleDateFormat(dateFormat);
    df.setLenient(false);
    webDataBinder.registerCustomEditor(Date.class, new CustomDateEditor(df, true));
}