Question

Fanrod在这里。这是我第一次对我这么温柔。

请参阅下面的代码。它应该工作，是吗？当您单击按钮时，输入字段应显示今天的日期，但今天的日期只会闪烁一秒钟，然后该框变为空白。

如果删除FORM标签，则按预期工作。

因此，如果输入字段位于FORM元素内，则setDate（）不起作用。

在Firefox和Chrome下试过这个并得到相同的结果。

我是否滥用datePicker？

已经扫描了stackoverflow，专家交换等等，以获得解决方案，但没有任何乐趣。

我无法相信这是一个错误，因为datePicker如此广泛使用，但我看不到任何其他结论。

我能看到的唯一解决办法是要么在FORM中没有输入字段（在我的情况下可行但是担心将来）或使用$（“＃ttdateofbirth”）。val（...）有明显的缺点。

有谁知道如何解决这个问题？

感谢您的投入。

非工作网页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DatePicker test</title>
<link rel="stylesheet" href="js/css/ui-lightness/jquery-ui-1.10.0.custom.css"/>
<script type="text/javascript" src="js/js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/js/jquery-ui-1.10.0.custom.js"></script>

<style type="text/css">
.datepicker {
    font: 11pt "Trebuchet MS", sans-serif;
    margin: 10px;
}
.inputlabel {
    font: 11pt "Trebuchet MS", sans-serif;
    margin: 3px;
    float:left; clear:left;
    display: block;
}

.ui-datepicker { font-size: 8pt !important; background: #cccccc; }

input {
    float: left;
    margin-bottom: .25em;
    font: 11pt "Trebuchet MS", sans-serif;
    margin: 3px;
    }
button {
    float: left;
    margin-bottom: .25em;
    font: 11pt "Trebuchet MS", sans-serif;
    margin: 3px;
    }

</style>
<script type="text/javascript">
//<![CDATA[
// set up inputs for dates before today's date
$(function(){
    var pickerOpts = {
        showOtherMonths: true,
        selectOtherMonths: true,
        dateFormat: "dd/mm/y",
        showButtonPanel: true,
        changeYear: true,
        changeMonth : true
        };
        $("#ttdateofbirth").datepicker(pickerOpts);
        });

    function setthedate() {
        var adate = new Date();
        $("#ttdateofbirth").datepicker('setDate',adate);
        };
//]]>
</script>

</head>
<body>
<form>
<span class="inputlabel">Date of birth:</span>
<span><input id="ttdateofbirth" type="text"  value=""/>
<button style="float:left;display:inline;" onclick="setthedate()">Set date</button>
</span>
</form>
</body>
</html>

Answer 1

在表单中使用<button>元素时，它会提交表单，重新加载页面并清空输入。将其更改为：

<input type="button" style="float:left;display:inline;" onclick="setthedate()" value="Set date">

或使用return false / preventDefault。

当输入字段在<form>元素</form>中时，jQuery datePicker setDate函数将输入字段置空

1 个答案: