Question

我正在使用twitter bootstrap datepicker（http://www.eyecon.ro/bootstrap-datepicker/）

我想要做的是在用户更改日期时使用输入值（例如15-02-2012）加载页面。

输入框使用此代码......

    <div class="input-append date"  data-date="12-02-2012" data-date-format="dd- mm-yyyy">
    <input class="span9" size="16" id="dp3" type="text" value="12-02-2012" onchange="myFunction()">
    <span class="add-on"><i class="icon-th"></i></span>

重新加载页面的JavaScript就是这个......

<script>
function myFunction()
{
datevalue = document.getElementById("dp3").value
window.open(datevalue,"_self");
}
</script>

问题是当日期选择器中更改日期（输入id = dp3）时，没有任何反应，页面不会重新加载。但是当我尝试将myFunction（）附加到另一个文本框时，它确实有效，并且它能够获取datepicker（dp3）中的值。

所以问题是JavaScript没有识别datepicker（id = dp3）的值的变化。有谁知道为什么会这样？

Answer 1

我看到您从链接的示例n°3中获取了代码，但您将id切换为错误的代码。

                       Here  --.
                               V
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
    <input class="span2" size="16" type="text" value="12-02-2012" readonly="">
    <span class="add-on"><i class="icon-calendar"></i></span>
</div>

如果将id保留在input标记上并保留原始JS代码，则会在错误的元素（输入）上调用.datepicker()方法：它应该在父母div。

然后，在您的jQuery上，您应该绑定日期选择器的changeDate事件，而不是onChange标记本身的input。

你可以尝试这样的事情（使用jQuery）：

$('#dp3').datepicker().on('changeDate', function() {
    //Retrieve the date located on the data of your datepicker
    var datevalue = $('#dp3').data("date");

    //You can take the value from the input as well if you want
    //The input tag doesn't really need an ID to be retrieved (see comments)
    //var datevalue = $('#dp3 input').val();

    window.open(datevalue,"_self");
});

修改：此处是working fiddle，稍作修改。

javascript - 当用户在日期选择器中更改日期时打开链接

1 个答案: