Show selected datepicker date in input box

Question

I have a JQuery DatePicker which I always want to be displayed, so I've assigned it to a div. I want it to behave as shown in this example, where the selected date appears in the input box, but for some reason it just won't work this way for me. Is there anything I can do to have the value shown in the input box? I want the user to be able to either manually type the date into the box, or for them to select the date from the datepicker. This is the relevant part of my code as it stands so far.

<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>

This link shows my page so far: https://gyazo.com/9ad02c1c1e2dbb832894f38107dc8bb9

I have "a" datepicker. Could you be more specific? There are thousends of datepickers around the internet. All require different code. You can't just copy code from one datepicker and use it on another. — icecub, Jul 30 '17 at 22:12
Hard for anyone to know why demo works and yours doesn't unless as mentioned you are using a different datepicker script — charlietfl, Jul 30 '17 at 22:21
Ah I'm so sorry, I never realised, I thought it was just the name of this specific one. It's a JQuery DatePicker, [this](https://jqueryui.com/datepicker/) one here. — optional_gun, Jul 30 '17 at 22:24

score 0 · Answer 1 · answered Jul 30 '17 at 23:26

0

The example you're trying to follow is quite outdated. The new syntax is as follows:

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

Codepen example

answered Jul 30 '17 at 23:26

Jesús Cruz

192
2
18

score 0 · Answer 2 · answered Jul 30 '17 at 23:36

Previously asked and answered in Listening to onChange on a jQuery datepicker?

Working example here

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

Show selected datepicker date in input box

2 Answers2