aspiring
aspiring

Reputation: 1647

jquery UI datepicker is not showing up on html input text

enter image description here

The above input text or label doesn't seem to show the jQuery UI datepicker when click on either of it. I tried different combinations of solutions found here in SO and online. Not sure why none are working.

Html code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>    
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>  

<label class="tmDtpicker">
    <input id="dtinput" class="hasDatepicker" type="text" name="Start" placeholder='10/05/2014' data-constraints="@NotEmpty @Required @Date" />
</label>

CSS code:

.tmDtpicker #dtinput {
    position: relative;
    cursor: pointer;
    width: 130px;
    margin-bottom: -2px;
}

.tmDtpicker:after {
    content:'\f073';
    position: absolute;
    z-index: 4;
    cursor: text;
}

js code:

</body>
   //other scripts

<script>
    $(document).ready(            
          function () {
              $("#dtinput").datepicker({ showWeek: true, firstDay :1,                  
                  showOtherMonths: true,
                  selectOtherMonths: true,
                  minDate: '0d', dateFormat: "dd-mm-yy"
              });
          }
        );
    </script>

Upvotes: 0

Views: 1316

Answers (1)

Zee
Zee

Reputation: 8488

You have included 2 jquery-ui.

...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>    
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
...

Remove the first one.

...
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
...

For a side note, always include jQuery first then other libraries like jqueryUI

Update

Remove class="hasDatepicker" from the input.

Upvotes: 1

Related Questions