在输入框中显示选定的datepicker日期

时间:2017-07-30 22:05:15

标签: javascript jquery html datepicker

我有一个总是希望显示的JQuery DatePicker,所以我已将它分配给div。我希望它的行为如this示例所示,其中所选日期出现在输入框中,但由于某种原因,它对我来说不会这样。我有什么办法可以让输入框中显示的值?我希望用户能够手动在框中键入日期,或者让他们从日期选择器中选择日期。到目前为止,这是我的代码的相关部分。

<form class="form-horizontal" role="form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
    <div class="form-group row">
        <input type="text" id="my-input">
        <div id="my-datepicker"></div>
    </div>
    <div class="form-group last">
        <input type="submit" name="submit_date" value="Show"/>
    </div>
</form>

<script>
    $("#my-datepicker").datepicker().on('changeDate', function (e) {
        $("#my-input").val(e.format());
    });
</script>

此链接显示我的页面到目前为止: https://gyazo.com/9ad02c1c1e2dbb832894f38107dc8bb9

2 个答案:

答案 0 :(得分:0)

您尝试遵循的示例已经过时了。新语法如下:

$("#my-datepicker").datepicker({
  onSelect: function (event) {
    $("#my-input").val($("#my-datepicker").val());
  }
});

Codepen example

答案 1 :(得分:0)

之前在Listening to onChange on a jQuery datepicker?

中提问并回答

工作示例here

  $( function() {
    $( "#datepicker" ).datepicker({
      onSelect: function(e) {
        console.log("Selected date: " + e + "; input's current value: " + this.value);
        $("#my-input").val(e)
      }
    });
});