CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
Logan Bertram
Logan Bertram

Reputation: 1942

jQuery UI Datepicker not initializing due to extra classes on input fields

I'm no stranger to jQuery, and I have a lot of experience with Bootstrap Datepicker and have never had an issue. This project, however, has a lot of legacy configurations for jQuery UI Datepicker which have more or less boxed me into using it. For whatever reason, though, I can't seem to get it to initialize. I'm using jQuery and jQuery UI from the CDN and I'm not trying to do anything fancy yet.

Below is how everything is set up in its most basic state.

CDN:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

Initialization:

<script type="text/javascript">
  $("#checkin").datepicker();
</script>

HTML:

<div class="travel-dates small">
  <div class="date">
    <label for="checkin">Check in</label>
    <div class="input-group form-group">
      <input name='checkin' id="checkin" class="form-control input-sm" placeholder="mm/dd/yyyy" required="" type="text"> 
      <span class="input-group-btn">
        <button type="button" tabindex="-1" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>
  </div>
  <div class="date">
    <label for="checkout">Check out</label>
    <div class="input-group form-group">
      <input name="checkout" id="checkout" class="form-control input-sm" placeholder="mm/dd/yyyy" required="" type="text"> 
      <span class="input-group-btn">
        <button type="button" tabindex="-1" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>
  </div>
</div>

I tried calling the datepicker on click as well using $("#checkin").datepicker("show"), and when I do, I get the error "t is undefined," which references datepicker in its trace.

I must be missing something, or doing something wrong, but I can't get this to work for the life of me. I've crawled through all the other SO answers on the topic, and haven't found anything that helped. I'm honestly at the point of deciding it's easier to redo all of the cool things they did for jQuery UI Datepicker with something else rather than try to get this to work with so little to go on in the way of errors. Any help or advice would be much appreciated.

UPDATE:

What I posted above ended up working when I copied it back over. The site I'm working on was an angular site that has been ported to PHP and we still had some angular classes on my inputs. These classes are not defined in our current CSS files, we just hadn't gotten around to removing them. For some reason, removing those classes did the trick. And to clarify, the calendar wasn't hidden or display: none, it was failing to initialize without error. Everything is working now, but I'd be curious if anyone can solve the mystery of why the extra undefined classes were causing it to fail.

Original HTML:

<div class="travel-dates small ng-isolate-scope">
  <div class="date">
    <label for="checkin" class="ng-scope">Check in</label>
    <div class="input-group form-group">
      <input name='checkin' id="checkin" class="form-control input-sm ng-pristine ng-invalid ng-invalid-required hasDatepicker" placeholder="mm/dd/yyyy" required="" type="text"> 
      <span class="input-group-btn">
        <button type="button" tabindex="-1" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>
  </div>
  <div class="date">
    <label for="checkout" class="ng-scope">Check out</label>
    <div class="input-group form-group">
      <input name="checkout" id="checkout" class="form-control input-sm ng-pristine ng-invalid ng-invalid-required hasDatepicker" placeholder="mm/dd/yyyy" required="" type="text"> 
      <span class="input-group-btn">
        <button type="button" tabindex="-1" class="btn btn-default btn-sm" disabled="disabled"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>
  </div>
</div>

Upvotes: 0

Views: 299

Answers (1)

Twisty
Twisty

Reputation: 30883

Am unable to replicate the issue you as you described it. I suspect that something is causing an issue with loading jQuery UI.

$(function() {
  $("#checkin").datepicker();
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div class="travel-dates small">
  <div class="date">
    <label for="checkin">Check in</label>
    <div class="input-group form-group">
      <input name='checkin' id="checkin" class="form-control input-sm" placeholder="mm/dd/yyyy" required="" type="text">
      <span class="input-group-btn">
        <button type="button" tabindex="-1" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>
  </div>
  <div class="date">
    <label for="checkout">Check out</label>
    <div class="input-group form-group">
      <input name="checkout" id="checkout" class="form-control input-sm" placeholder="mm/dd/yyyy" required="" type="text">
      <span class="input-group-btn">
        <button type="button" tabindex="-1" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions