CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-datepicker
Rhecil Codes
Rhecil Codes

Reputation: 541

Can't work out why jQuery UI Datepicker does not insert date into input

I'm using jQuery UI Datepicker, which is initialising correctly on the input, but doesn't insert the selected value into the field.

The input is:

<input name="data[entry-date]" id="parkingEntryDate" type="text" placeholder="dd/mm/yy" class="date-input">

The JS is: 

$.datepicker.setDefaults({
  dateFormat: "dd/mm/yy",
  dayNamesMin: [ "S", "M", "T", "W", "T", "F", "S" ],
  minDate: "d",
  maxDate: "+1y",
  prevText: "",
  nextText: "",
  onSelect: function(dateText, inst) {
            alert(dateText);
          }
});

$('#parkingEntryDate').datepicker();

The calendar shows as expected, I see the correct date in the alert onSelect, but the date does not get inserted into the input as the value; it stays blank and doesn't accept keyboard input, as expected.

Scripts are loaded in the right order using WordPress enqueue_script, and datepicker is initialised in last main.js.

<head>
<script type='text/javascript' src='http://macbook-pro.local:5757/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://macbook-pro.local:5757/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
</head>
...
<script type='text/javascript' src='http://macbook-pro.local:5757/wp-includes/js/jquery/ui/core.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://macbook-pro.local:5757/wp-includes/js/jquery/ui/datepicker.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://macbook-pro.local:5757/content/themes/mytheme/js/plugins.min.js?ver=20151215'></script>
<script type='text/javascript' src='http://macbook-pro.local:5757/content/themes/mytheme/js/main.js?ver=20151215'></script>

No errors in inpector or console, and can't seem to think of what could be going on. Hoping someone more experience with JS or jQuery UI than I has experienced similar and/or can point me in a direction of where to look for an issue next.

Many thanks in advance.

Upvotes: 3

Views: 2416

Answers (1)

Rhecil Codes
Rhecil Codes

Reputation: 541

Removing the id from the inputs and initialising the datepicker with the class worked. I'm 100% sure the id is unique and wasn't used or referenced anywhere else in CSS or JS. I have no idea why this worked - it doesn't make sense to me, but I'm over it.

If anyone knows why, I would be interested.

Hope this helps a future codesmith.

Upvotes: 3

Related Questions